IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

 

HTML5 Input表单为

和标签添加了几个新属性，属性如表1。

 

1  autocomplete属性

autocomplete属性规定form或input域应该拥有自动完成功能，当用户在自动完成域中开始输入时，浏览器在该域中显示填写的选项。autocomplete适用于标签，以及以下的标签：text、search、url、email、password、date Picker、range以及color。autocomplete属性有可能在form元素中是开启的，而在input元素中是关闭的。用法如下：

上述代码展示了一个form表单，我们为form域打开添加自动完成功并关闭password密码域的自动完成功能。起初为表单填充我们想要的值，效果如图1所示：

图1 autocomplete属性

 

自动填充功能提升了用户体验，为用户节省时间。当用户完成了某网站大量的表单输入，因为某一项不正确后返回表单页面后若需要重新填写所有项会影响用户体验，这时候为表单的某些输入域设置自动填充功能就能为用户省去大量时间。图2是返回后的表单：

图2  autocomplete属性

 

因为我们为form开启了自动填充功能，所以表单中的文本域都被填充为提交前的数据，而密码框关闭了该功能，所以密码的内容滞空。

 

2  autofocus属性

autofocus属性规定在加载时，域自动获得焦点。autofocus属性时一个boolean属性，适用于所有标签的类型。用法如下：

上述代码展示了一个form表单，在页面加载时，将焦点定到邮箱位置，效果如图3所示：

图3  autofocus属性

 

3  form属性

form属性规定输入域所属的一个或多个表单。form属性适用于标签的类型，必须引用所属表单的id。如需引用一个以上的表单，使用空格分隔的列表。用法如下：

上述代码包含了一个表单，其中先将姓名、密码、邮箱输入域包含在默认表单user_form里。之后通过form属性将url输入域包含在了这个表单里。

 

4  form overrides表单重写属性

表单重写属性允许重写form元素的某些属性设定。表单重写属性适用于的类型标签submit和image。表单重写属性包含表2。

表2  表单重写属性

 

 

下面我们创造一个表单，给予它默认的action为“itxdl.php”，默认method属性为“get”，target属性为默认值“_self”，效果是在当前窗口打开。通过表单的重写属性来改变该表单的原来设置的属性。代码如下：