HTML5 表单新增的属性（html5新增的表单元素属性）

<form></form>标记新增属性

required 规定必需在提交之前填写输入字段。

<form name="frm">
姓名：<input type="text" name="username" required="required"></br>
<input type="submit" name="submit" value="提交">
</form>

placeholder 默认显示内容

实例：带有 placeholder 文本的搜索字段：

<form action="demo_form.asp" method="get">
    <input type="search" name="user_search" placeholder="请输入默认值" />
    <input type="submit" />
</form>

autocomplete 用来设置input组件是否使用自动完成功能,HTML5新增的属性值有on(使用)或off(不使用)两种。

input的属性autocomplete默认为on,其含义代表是否让浏览器自动记录之前输入的值,很多时候，

需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到,可以在input中加入autocomplete="off" 来关闭记录

系统需要保密的情况下可以使用此参数，该属性也可作用于表单元素

实例：

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

novalidate 用来设置是否在发送表单时验证表单，如需要验证则填入novalidate即可。

novalidate也是HTML5新增的属性,IE并不支持novalidate属性

HTML5新的input类型(目前IE都不支持,Opera和Chrome对新的输入类型的支持最好,即使不被支持,仍然可以显示为常规的文本域。)

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类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定：

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔(如果 step="3"，则合法的数是 -3,0,3,6 等)

value number 规定默认值

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

input类型 - range

range类型用于应该包含一定范围内数字值的输入域。

range类型显示为滑动条。

您还能够设定对所接受的数字的限定：

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔(如果 step="3"，则合法的数是 -3,0,3,6 等)

value number 规定默认值

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

input类型 - Date Pickers(日期选择器)

HTML5拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间(小时和分钟)

datetime - 选取时间、日、月、年(UTC 时间)

datetime-local - 选取时间、日、月、年(本地时间)

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

input类型 - search

search类型用于搜索域，比如站点搜索或 Google 搜索。

search域显示为常规的文本域。

Search: <input type="search" name="user_color" />

input类型 - color

color输入类型用于规定颜色。

该输入类型允许您从拾色器中选取颜色：

Color: <input type="color" name="user_color" />

HTML5的新的表单元素：(目前IE都不支持)

datalist元素

datalist元素规定输入域的选项列表,功能类似于自造词列表。

列表是通过datalist内的option元素创建的。

如需把datalist绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

实例1：

<input list="browsers"/>
<datalist id="browsers">
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>

实例2：

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>

提示：option元素永远都要设置 value 属性。

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>

表单元素新增的属性值

文本框text

autofocus属性 自动获得焦点,也就是指加载网页之后,自动将光标(插入点)移到此文本框内。

多行文本框textarea

warp属性在HTML5属性值有：

soft 当在表单中提交时,textarea 中的文本不换行。默认值。

hard 当在表单中提交时,textarea 中的文本换行(包含换行符)。当使用 "hard" 时，必须规定 cols 属性。

wrap属性在HTML4属性值有：

off(也可写成wrap)：不换行，当输入的内容超出文本区域右边界时，文本将向左滚动，并显示滚动条。

如果希望换行，必须手动输入回车键才能将插入点移到下一行；

virtual：文本能够自动换行，当数据提交到服务器被处理时，换行符不会随输入文本一同提交到服务器；(默认值)

physical：文本能够自动换行，当数据提交到服务器被处理时，换行符将会随输入的文本一同被提交到服务器进行处理；

表单分组fieldset

fieldset元素可将表单内的相关元素分组。

HTML5新增的属性

disabled disabled 规定应该禁用fieldset。

form form_id 规定fieldset所属的一个或多个表单。

name value 规定fieldset的名称。

实例

组合表单中的相关元素：

<form>
<fieldset disabled="disabled" form="formid" name="person">
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>

legend元素为fieldset元素定义标题(caption)。