3.3 新的input属性
HTML5为input元素新增了多个属性，用于限制输入行为或格式。
3.3.1 autocomplete——自动完成
视频讲解
autocomplete属性可以帮助用户在输入框中实现自动完成输入。取值包括on和off，用法如下所示。
<input type="email" name="email" autocomplete="off" />
提示：autocomplete属性适用input类型包括：text、search、url、telephone、email、password、datepickers、range和color。
autocomplete属性也适用于form元素，默认状态下表单的autocomplete属性处于打开状态，其包含的输入域会自动继承autocomplete状态，也可以为某个输入域单独设置autocomplete状态。
注意：在某些浏览器中需要先启用浏览器本身的自动完成功能，才能使autocomplete属性起作用。
【示例】设置autocomplete为on时，可以使用HTML5新增的datalist元素和list属性提供一个数据列表供用户进行选择。下面示例演示如何应用autocomplete属性、datalist元素和list属性实现自动完成。
在浏览器中预览，当用户将焦点定位到文本框中时，会自动出现一个城市列表供用户选择，如图3.36所示。而当用户单击页面的其他位置时，这个列表就会消失。
当用户输入时，该列表会随用户的输入自动更新，例如，当输入字母q时，会自动更新列表，只列出以q开头的城市名称，如图3.37所示。随着用户不断地输入新的字母，下面的列表还会随之变化。
图3.36 自动完成数据列表
图3.37 数据列表随用户输入而更新
提示：多数浏览器都带有辅助用户完成输入的自动完成功能，只要开启了该功能，浏览器会自动记录用户所输入的信息，当再次输入相同的内容时，浏览器就会自动完成内容的输入。从安全性和隐私的角度考虑，这个功能存在较大的隐患，如果不希望浏览器自动记录这些信息，则可以为form或form中的input元素设置autocomplete属性，关闭该功能。
3.3.2 autofocus——自动获取焦点
视频讲解
autofocus属性可以实现在页面加载时，让表单控件自动获得焦点。用法如下所示。
<input type="text" name="fname" autofocus="autofocus" />
autocomplete属性适用所有<input>标签的类型，如文本框、复选框、单选按钮、普通按钮等。
注意：在同一页面中只能指定一个autofocus对象，当页面中的表单控件比较多时，建议为最需要聚焦的那个控件设置autofocus属性值，如页面中搜索文本框，或者许可协议的“同意”按钮等。
【示例1】下面示例演示如何应用autofocus属性。
以上代码在Chrome浏览器中的运行结果如图3.38所示。页面载入后，“同意”按钮自动获得焦点，因为通常希望用户直接单击该按钮。如果将“拒绝”按钮的autofocus属性值设置为on，则页面载入后焦点就会在“拒绝”按钮上，如图3.39所示，但从页面功用的角度来说这样并不合适。
图3.38 “同意”按钮自动获得焦点
图3.39 “拒绝”按钮自动获得焦点
【示例2】如果浏览器不支持autofocus属性，可以使用JavaScript实现相同的功能。在下面脚本中，先检测浏览器是否支持autofocus属性，如果不支持则获取指定的表单域，为其调用focus()方法，强迫其获取焦点。
3.3.3 form——归属表单
视频讲解
form属性可以设置表单控件归属的表单。适用于所有<input>标签的类型。
提示：在HTML4中，用户必须把相关的控件放在表单内部，即<form>和</form>之间。在提交表单时，在<form>和</form>之外的控件将被忽略。
【示例】form属性必须引用所属表单的id，如果一个form属性要引用两个或两个以上的表单，则需要使用空格将表单的id值分隔开。下面是一个form属性应用。
<form action="" method="get" id="form1">
请输入姓名：<input type="text" name="name1" autofocus/>
<input type="submit" value="提交"/>
</form>
请输入住址：<input type="text" name="address1" form="form1" />
以上代码在Chrome浏览器中的运行结果如图3.40所示。如果填写姓名和住址并单击“提交”按钮，则name1和address1分别会被赋值为所填写的值。例如，如果在姓名处填写“zhangsan”，住址处填写“北京”，则单击“提交”按钮后，服务器端会接收到“name1=zhangsan”和“address1=北京”。用户也可以在提交后观察浏览器的地址栏，可以看到有“name1=zhangsan&address1=北京”字样，如图3.41所示。
图3.40 form属性的应用
图3.41 地址中要提交的数据
3.3.4 表单重写
视频讲解
HTML5新增5个表单重写属性，用于重写<form>标签属性设置，简单说明如下：
formaction：重写<form>标签的action属性。
formenctype：重写<form>标签的enctype属性。
formmethod：重写<form>标签的method属性。
formnovalidate：重写<form>标签的novalidate属性。
formtarget：重写<form>标签的target属性。
注意：表单重写属性仅适用于submit和image类型的input元素。
【示例】下面示例设计通过formaction属性，实现将表单提交到不同的服务器页面。
3.3.5 height和width——高和宽
视频讲解
height和width属性仅用于设置<input type="image">标签的图像高度和宽度。
【示例】下面示例演示了height与width属性的应用。
<form action="testform.asp" method="get">
请输入用户名: <input type="text" name="user_name" /><br />
<input type="image" src="images/submit.png" width="72" height="26" />
</form>
源图像的大小为288×104像素，使用以上代码将其大小限制为72×26像素，在Chrome浏览器中的运行结果如图3.42所示。
图3.42 form属性的应用
3.3.6 list——列表选项
视频讲解
list属性用于设置输入域的datalist。datalist是输入域的选项列表。该属性适用于以下类型的<input>标签：text、search、url、telephone、email、date pickers、number、range和color。
演示示例可参考3.4.1节datalist元素介绍。
注意：目前最新的主流浏览器都已支持list属性，不过呈现形式略有不同。
3.3.7 min、max和step——最小值、最大值和步长
视频讲解
min、max和step属性用于为包含数字或日期的input输入类型设置限值，适用于date pickers、number和range类型的<input>标签。具体说明如下：
min属性：设置输入框所允许的最小值。
max属性：设置输入框所允许的最大值。
step属性：为输入框设置合法的数字间隔（步长）。例如，step="4"，则合法值包括-4、0、4等。
【示例】下面示例设计一个数字输入框，并规定该输入框接受介于0到12的值，且数字间隔为4。
在Chrome浏览器中运行，如果单击数字输入框右侧的微调按钮，则可以看到数字以4为步进值递增，如图3.43所示；如果输入不合法的数值，如5，单击“提交”按钮时会显示错误提示，如图3.44所示。
图3.43 list属性应用
图3.44 显示错误提示
3.3.8 multiple——多选
视频讲解
multiple属性可以设置输入域一次选择多个值。适用于email和file类型的<input>标签。
【示例】下面在页面中插入一个文件域，使用multiple属性允许用户一次提交多个文件。
在Chrome浏览器中的运行结果如图3.45所示。如果单击“选择文件”按钮，则会允许在打开的对话框中选择多个文件。选择文件并单击“打开”按钮后会关闭对话框，同时在页面中会显示选中文件的个数，如图3.46所示。
图3.45 multiple属性的应用
图3.46 显示被选中文件的个数
3.3.9 pattern——匹配模式
视频讲解
pattern属性规定用于验证input域的模式（pattern）。模式就是JavaScript正则表达式，通过自定义的正则表达式匹配用户输入的内容，以便进行验证。该属性适用于text、search、url、telephone、email和password类型的<input>标签。
提示：读者可以在http://html5pattern.com上面找到一些常用的正则表达式，并将它们复制、粘贴到自己的pattern属性中进行应用。
【示例】下面示例使用pattern属性设置文本框必须输入6位数的邮政编码。
在Chrome浏览器中的运行结果如图3.47所示。如果输入的数字不是6位，则会出现错误提示，如图3.48所示。如果输入的并非规定的数字，而是字母，也会出现这样的错误提示，因为pattern="[0-9]{6}"中规定了必须输入0～9这样的阿拉伯数字，并且必须为6位数。
图3.47 pattern属性的应用
图3.48 出现错误提示
3.3.10 placeholder——替换文本
视频讲解
placeholder属性用于为input类型的输入框提供一种文本提示，这些提示可以描述输入框期待用户输入的内容，在输入框为空时显示，而当输入框获取焦点时自动消失。placeholder属性适用于text、search、url、telephone、email和password类型的<input>标签。
【示例】下面是placeholder属性的一个应用示例。请注意比较本例与上例提示方法的不同。
以上代码在Chrome浏览器中的运行结果如图3.49所示。当输入框获得焦点并输入字符时，提示文字消失，如图3.50所示。
图3.49 placeholder属性的应用
图3.50 提示消失
3.3.11 required——必填
视频讲解
required属性用于定义输入框填写的内容不能为空，否则不允许提交表单。该属性适用于text、search、url、telephone、email、password、date pickers、number、checkbox、radio和file类型的<input>标签。
【示例】下面示例使用required属性规定文本框必须输入内容。
在Chrome浏览器中的运行结果如图3.51所示。当输入框内容为空并单击“提交”按钮时，会出现“请填写此字段”的提示，只有输入内容之后才允许提交表单。
图3.51 提示“请填写此字段”