1. 什么是表单

HTML表单用于搜集不同类型的用户输入以提交给服务器进行处理， 表单是一个包含表单元素的区域.

2. 什么是表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等.

2.1 <input> 元素

<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。

2.1.1 HTML输入类型

2.1.1.1 输入类型：text

<input type="text"> 定义供文本输入的单行输入字段：
实例:

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

2.1.1.2 输入类型：password

<input type="password"> 定义密码字段：
实例

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form> 

password 字段中的字符会被做掩码处理（显示为星号或实心圆）

2.1.1.3 输入类型：submit

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序（form-handler）：
实例

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

2.1.1.4 Input Type: radio

<input type="radio"> 定义单选按钮。
Radio buttons let a user select ONLY ONE of a limited number of choices:
实例:

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

注：name相同的为一组单选

2.1.1.5 Input Type: checkbox

<input type="checkbox"> 定义复选框。
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
实例：

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form> 

注：浏览器向服务器提交数据是会将name与value对应成组提交后台

2.1.1.6 Input Type: button

<input type="button> 定义按钮。
实例：

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

2.1.2 HTML5新增的输入内容

HTML5 增加了多个新的输入类型：

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

2.1.2.1 输入类型：number

<input type="number"> 用于应该包含数字值的输入字段。
您能够对数字做出限制。
根据浏览器支持，限制可应用到输入字段。
实例

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

输入限制

这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：
属性 描述

属性	描述
disabled	规定输入字段应该被禁用
max	规定输入字段的最大值
maxlength	规定输入字段的最大字符数
min	规定输入字段的最小值
pattern	规定通过其检查输入值的正则表达式
readonly	规定输入字段为只读（无法修改）
maxlength	规定输入字段的最大字符数
maxlength	规定输入字段的最大字符数
required	规定输入字段是必需的（必需填写）
size	规定输入字段的宽度（以字符计）
step	规定输入字段的合法数字间隔
value	规定输入字段的默认值

2.1.2.2 输入类型：date

<input type="date"> 用于应该包含日期的输入字段。
根据浏览器支持，日期选择器会出现输入字段中。
实例

<form>
  Birthday:
  <input type="date" name="bday">
</form>

可以向输入添加限制：
实例

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

2.1.2.3 输入类型：color

<input type="color"> 用于应该包含颜色的输入字段。
根据浏览器支持，颜色选择器会出现输入字段中。
实例

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

2.1.2.4 输入类型：range

<input type="range"> 用于应该包含一定范围内的值的输入字段。
根据浏览器支持，输入字段能够显示为滑块控件。
实例

<form>
  <input type="range" name="points" min="0" max="10">
</form>

能够使用如下属性来规定限制：min、max、step、value。

2.1.2.5 输入类型：month

<input type="month"> 允许用户选择月份和年份。
根据浏览器支持，日期选择器会出现输入字段中。
实例

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

2.1.2.6 输入类型：week

<input type="week"> 允许用户选择周和年。
根据浏览器支持，日期选择器会出现输入字段中。
实例

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

2.1.2.7 输入类型：time

<input type="time"> 允许用户选择时间（无时区）。
根据浏览器支持，时间选择器会出现输入字段中。
实例

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

2.1.2.8 输入类型：datetime

<input type="datetime"> 允许用户选择日期和时间（有时区）。
根据浏览器支持，日期选择器会出现输入字段中。
实例

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

2.1.2.9 输入类型：datetime-local

<input type="datetime-local"> 允许用户选择日期和时间（无时区）。
根据浏览器支持，日期选择器会出现输入字段中。
实例

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

2.1.2.10 输入类型：email

<input type="email"> 用于应该包含电子邮件地址的输入字段。
根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。
实例

<form>
  E-mail:
  <input type="email" name="email">
</form>

2.1.2.11 输入类型：search

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。
实例

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

2.1.2.12 输入类型：tel

<input type="tel"> 用于应该包含电话号码的输入字段。
目前只有 Safari 8 支持 tel 类型。
实例

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

2.1.2.13 输入类型：url

<input type="url"> 用于应该包含 URL 地址的输入字段。
根据浏览器支持，在提交时能够自动验证 url 字段。
某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。
实例

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

2.1.3 输入属性

2.1.3.1 value 属性

value 属性规定输入字段的初始值：
实例

<form action="">
 First name:<br>
<input type="text" name="firstname" value="John">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

2.1.3.2 placeholder 属性

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。
Opera Safari Chrome Firefox Internet Explorer
实例
拥有占位符文本的输入字段：
<input type="text" name="fname" placeholder="First name">

2.2 <select> 元素（下拉列表）

<select> 元素定义下拉列表：
实例:

<select name="cars">
       <option value="volvo">Volvo</option>
       <option value="saab">Saab</option>
       <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
</select>

option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
您能够通过添加 selected 属性来定义预定义选项。

2.3 <textarea> 元素

<textarea> 元素定义多行输入字段（文本域）：
实例;

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

2.4 <button> 元素

<button> 元素定义可点击的按钮：
实例:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

2.5 HTML5 <datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
实例:
通过 <datalist> 设置预定义值的 <input> 元素：

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>