新增加的属性如同新增加的输入控件一样，不管目标浏览器是否支持，都可以放心使用，这是因为现在大多数浏览器如果不支持某一特性时会直接忽略它们，而不是报错。下面介绍HTML5新增的表单属性。
1.placeholder属性
placeholder是指当文本框（＜inputtype＝“text”＞或＜textarea＞）处于未输入状态时文本框中显示的输入提示。当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。
实现方法非常简单，只要加上placeholder属性，然后指定提示文字就可以了。placeholder属性的使用方法如下，其效果如图5.1所示。
＜inputtype＝＂text＂placeholder＝＂请在这里输入…＂＞
2.autocomplete属性
autocomplete属性是HTML5中的新属性。HTML5＜form＞的autocomplete属性规定表单是否应该启用自动完成功能。它允许浏览器预测对字段的输入并自动完成输入。当用户在字段开始键入时，浏览器基于之前键入过的值，显示出可以在字段中填写的可选项。
图5.1 placeholder属性实例
其语法为：＜formautocomplete＝＂on｜off＂＞
其中参数“on”是默认的，规定启用自动完成功能。参数“off”规定禁用自动完成功能。
autocomplete属性的表单应用实例（参见源码“chap05.1.1.1.html”）如下，其效果如图5.2所示。
<!DOCTYPEHTML>
<html>
<body>
<formaction="/example/html5/demo_form.asp"method="get"autocomplete="on">
Firstname:<inputtype="text"name="fname"/>
Lastname:<inputtype="text"name="lname"/>
E-mail:<inputtype="email"name="email"autocomplete="off"/>
<inputtype="submit"/>
</form>
<p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>
<p>请注意，表单的自动完成功能是打开的，而e-mail域是关闭的。</p>
</body>
</html>
图5.2 autocomplete属性实例
提示：在某些浏览器中，可能需要手动启用自动完成功能。
3.autofocus属性
autofocus属性规定在页面加载时，域自动地获得焦点。
其语法为：Username：＜inputtype＝＂text＂name＝＂user_name＂ autofocus＝＂autofocus＂／＞
autocomplete属性的表单应用实例（参见源码“chap05.1.1.2.html”）如下，其效果如图5.3所示。
<!DOCTYPEHTML>
<html>
<body>
<formaction="/example/html5/demo_form.asp"method="get">
Username:<inputtype="text"name="user_name"autofocus="autofocus"/>
<inputtype="submit"/>
</form>
</body>
</html>
图5.3 autofocus属性实例
提示：autofocus属性适用于所有＜input＞标签的类型。
4.list属性
HTML5为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5的新增元素，该元素类似于一个选择框（select），但是当用户想要设置的值不在选择列表之内时，允许其自行输入。该元素并不显示，而是当文本框获得焦点时以提示输入的方式显示。
list属性的使用方法实例如下。在文本框中有待选品牌，图5.4所示是网页代码（参见“chap05.1.1.4.html”）：
图5.4 list属性实例程序截图
注意：程序中，list属性的值要与datalist标签的id属性值相同。网页显示效果如图5.5所示。
图5.5 list属性实例
list属性适用于以下类型的＜input＞标签：text、search、url、telephone、email、datepickers、number、range以及color。
5.min、max和step属性
min、max和step属性用于为包含数字或日期的input类型规定限定（约束）。max属性规定输入域所允许的最大值。min属性规定输入域所允许的最小值。step属性为输入域规定合法的数字间隔（如果step＝＂3＂，则合法的数字是-3，0，3，6等）。
下面的例子显示一个数字域，该域接受介于0到10之间的值，且步进为3（即合法的值为0、3、6和9）。代码如下：
<formaction="/example/html5/demo_form.asp"method="get">
Points:<inputtype="number"name="points"min="0"max="10"step="3"/>
<inputtype="submit"/>
</form>
在Opera15.0下测试，网页的显示效果如图5.6所示。
图5.6 min、max和step属性使用实例
提示：min、max和step属性适用于以下类型的＜input＞标签：datepickers、number以及range。
6.required属性
required属性规定必须在提交之前填写输入域（不能为空）。required属性适用于以下类型的＜input＞标签：text、search、url、telephone、email、password、datepickers、number、checkbox、radio以及file。
下面的实例为网页中一个必须填写的输入框：
<!DOCTYPEHTML>
<html>
<body>
<formaction="/example/html5/demo_form.asp"method="get">(www.xing528.com)
Name:<inputtype="text"name="usr_name"required="required"/>
<inputtype="submit"/>
</form>
</body>
</html>
网页的显示效果如图5.7所示。
图5.7 required属性使用实例
7.multiple属性
multiple属性规定输入域中可选择多个值。multiple属性适用于以下类型的＜input＞标签：email和file。
其语法为：Selectimages：＜input type＝＂file＂name＝＂img＂multiple＝＂multiple＂／＞
multiple属性的使用实例如下：
<!DOCTYPEHTML>
<html>
<body>
<formaction="/example/html5/demo_form.asp"method="get">
Selectimages:<inputtype="file"name="img"multiple="multiple"/>
<inputtype="submit"/>
</form>
<p>当您浏览文件时，请试着选择多个文件。</p>
</body>
</html>
网页的显示效果如图5.8所示。
图5.8 multiple属性使用实例
8.novalidate属性
novalidate属性规定在提交表单时不应该验证form或input域。novalidate属性适用于＜form＞以及以下类型的＜input＞标签：text、search、url、telephone、email、password、datepickers、range以及color。
novalidate属性的使用实例如下：
<!DOCTYPEHTML>
<html>
<body>
<formaction="/example/html5/demo_form.asp"method="get"novalidate="novalidate">
E-mail:<inputtype="email"name="user_email"/>
<inputtype="submit"/>
</form>
</body>
</html>
网页的显示效果如图5.9所示。
图5.9 novalidate属性使用实例
反例（validate）的使用实例如下：
<!DOCTYPEHTML>
<html>
<body>
<form method="get">
E-mail:<inputtype="email"name="user_email"/>
<inputtype="submit"/>
</form>
</body>
</html>
网页的显示效果如图5.10所示。
图5.10 novalidate属性反例使用实例
9.pattern属性
pattern属性规定用于验证input域的模式（pattern），模式（pattern）是正则表达式。可以在JavaScript教程中学习有关正则表达式的内容。pattern属性适用于以下类型的＜input＞标签：text、search、url、telephone、email以及password。
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：
<!DOCTYPEHTML>
<html>
<body>
<formaction="/example/html5/demo_form.asp"method="get">
Countrycode:<inputtype="text"name="country_code"pattern="［A-z］{3}"
title="Threelettercountrycode"/>
<inputtype="submit"/>
</form>
</body>
</html>
网页的显示效果如图5.11所示。
图5.11 pattern属性使用实例
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
