HTML表单元素

类型

Input 类型 - text

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

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

Input 类型 - password

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

<form>
Password: <input type="password" name="pwd">
</form>

Input 类型 - radio

<input type=“radio”> 标签定义了表单单选按钮（Radio Buttons）选项。

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

Input 类型 - checkbox

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

<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>

Input 类型 - submit

<input type=“submit”> 定义了提交按钮(Submit Button)。
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
email、url、number、range、Date pickers (date, month, week, time, datetime, datetime-local)、search、color

Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。
在提交表单时，会自动验证 email 域的值。

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

Input 类型 - url

url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。

Homepage: <input type="url" name="user_url" />

Input 类型 - number

number 类型用于应该包含数值的输入域。
还能够设定对所接受的数字的限定。

Points: <input type="number" name="points" min="1" max="10" />

max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值

Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条，能够设定对所接受的数字的限定。

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

数字限定同number

Input 类型 - Date Pickers（日期选择器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

Date: <input type="date" name="user_date" />

Input 类型 - search

search 类型用于搜索域，比如站点搜索或 Google 搜索。
search 域显示为常规的文本域。

元素

datalist 元素

datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output 元素

output 元素用于不同类型的输出，比如计算或脚本输出：

<output id="result" onforminput="resCalc()"></output>

属性

autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。
autofocus 属性适用于所有 标签的类型。

User name: <input type="text" name="user_name"  autofocus="autofocus" />

form 属性

form 属性规定输入域所属的一个或多个表单。
form 属性适用于所有 标签的类型。
form 属性必须引用所属表单的 id：

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

注释：如需引用一个以上的表单，请使用空格分隔的列表。

表单重写属性
表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。
表单重写属性有：

formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性

注：表单重写属性适用于以下类型的 标签：submit 和 image。

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

注：这些属性对于创建不同的提交按钮很有帮助。

height 和 width 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注：height 和 width 属性只适用于 image 类型的 标签。

<input type="image" src="img_submit.gif" width="99" height="99" />

list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注：list 属性适用于以下类型的 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

min、max 和 step 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）。
注：min、max 和 step 属性适用于以下类型的 标签：date pickers、number 以及 range。

multiple 属性

multiple 属性规定输入域中可选择多个值。
注：multiple 属性适用于以下类型的 标签：email 和 file。

Select images: <input type="file" name="img" multiple="multiple" />

novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注：novalidate 属性适用于 以及以下类型的 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.

<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

pattern 属性

pattern 属性规定用于验证 input 域的模式（pattern）。
模式（pattern） 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。
注：pattern 属性适用于以下类型的 标签：text, search, url, telephone, email 以及 password。

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。
注：placeholder 属性适用于以下类型的 标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

<input type="search" name="user_search"  placeholder="Search W3School" />

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。
注：required 属性适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Name: <input type="text" name="usr_name" required="required" />