HTML 表单用于收集不同类型的用户输入。

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签(<input>)。

输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域(Text Fields)

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

密码字段

密码字段通过标签<input type="password"> 来定义:

单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单单选框选项

复选框(Checkboxes)

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
username:<input type="text" name="firstname"><br>
password:<input type="password" name="lastname"><br>
Sex:<input type="radio" name="sex" value="man">Man
    <input type="radio" name="sex" value="woman">Woman<br>
Interest:<br><input type="checkbox" name="interest" value="football">football<br>
         <input type="checkbox" name="interest" value="basketball">basketball<br>
         <input type="checkbox" name="interest" value="eat">eat<br>
    <input type="submit" value="提交">
</form>

username:
password:
Sex:Man
Woman
Interest:
football
basketball
eat

HTML学习(14)表单的更多相关文章

  1. bootstrap基础学习【表单含按钮】(二)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. [jQuery学习系列五 ]5-Jquery学习五-表单验证

    前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...

  3. 学习W3SCHOOL 表单验证

    //表单学习笔记 //建立一张表单的验证 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...

  4. SpringMVC学习系列- 表单验证

    本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...

  5. php学习笔记——表单

    13.表单 1)GET vs. POST GET 和 POST 都创建数组(例如,array( key => value, key2 => value2, key3 => value ...

  6. [html5] 学习笔记-表单新增的元素与属性(续)

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  7. JavaWeb学习日记----表单提交方式

    1.表单提交方式 (1) 使用input控件中的submit提交 代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  8. 9. Javascript学习笔记——表单处理

    9. 表单处理 9.1 表单的基础知识 ///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement. //属性:action.me ...

  9. Bootstrap学习-排版-表单

    1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h ...

  10. JavaScript高级程序设计学习笔记--表单脚本

    提交表单 用户单击提交按钮或图像按钮时,就会提交表单.使用<input>和<button>都可以定义提交按钮,只要将其type特性的值设置为"submit" ...

随机推荐

  1. win10配置jdk环境变量

    备注:这里以jdk-10.0.2_windows-x64_bin为例 1.jdk安装目录如下 2.右键“此电脑”-点击“属性”-点击“高级系统设置”-点击“环境变量”-选中“Path”-点击“编辑” ...

  2. C语言实现 循环队列

    #include <stdio.h>#include <stdlib.h>#include <stdbool.h> typedef struct queue{ in ...

  3. Linux vim三种模式的快捷键

    1.移动光标 数字 + h,j,k,l 上,下,左,右 ctrl-e 移动页面 ctrl-f 上翻一页 ctrl-b 下翻一页 ctrl-u 上翻半页 ctrl-d 下翻半页 w 跳到下一个字首,按标 ...

  4. java - GC垃圾收集器详解(二)

    CMS收集器 CMS收集器(ConcurrentMarkSweep:并发标记清除)是一种以获取最短回收停顿时间为目标的收集器. 适合应用在互联网站或者B/S系统的服务器上,这类应用尤其重视服务器的响应 ...

  5. Python基础概念

    一.Python中执行代码的方式 直接在编译器中交互执行: 在编译器中通过Python和文件的路径执行: 在linux系统中可以./test.py(需要代码第一行增加# !/usr/bin/env p ...

  6. vue加载单文件使用vue-loader报错

    报错信息如下:ERROR in ./src/login.vue Module Error (from ./node_modules/vue-loader/lib/index.js): vue-load ...

  7. ZOJ1310-Robot (BFS)

    The Robot Moving Institute is using a robot in their local store to transport different items. Of co ...

  8. 2020 Plan

    1. English IELTS  7.0 IELTS word 3271,  10 words diff 2 Grammar framework IELTS writing Friends foll ...

  9. Wannafly Camp 2020 Day 1H 最大公约数 - 质因数分解,高精度

    把每个质因子扒出来乱搞一下 #include <bits/stdc++.h> using namespace std; int g[505][505]; int isp[505]; str ...

  10. python常用的正则表达式,持续更新<<

    # -*- coding: utf-8 -*- import re str_0 = 'Aqin1012Heheheaaaaaaahehe如何da' def re_str(re_str_0,str_0) ...