HTML5新增的属性与元素

2018-01-23

HTML5为表单控件新增的属性

1.form属性

在HTML5以前，所有的表单控件都必须放在<form.../>元内部，表明该表单控件属于该表单；但HTML5为表单新增了form属性，用于定义该表单控件所属的表单，该属性的值应该是它所属表单的id，如下：

<form id="addForm" action="add">
  昵称：<input type="text" name="name" />
  密码：<input type="password" name="password" />
</form>
<textarea name="desc" form="addForm"></textarea>

2.formaction属性

这是一个十分实用的属性，相信大部分开发者以前都会遇到一个场景：页面中有一个表单，该表单包含了两个以上的提交按钮，但程序需要不同的按钮提交到不同的action。

HTML5的formaction属性专门用于处理上面场景：对于<input type="submit".../>、<input type="image".../>等元素，都可以指定formaction，该属性即可动态地让表单提交到不同的url。例如：

<form method="post">
  昵称：<input type="text" name="name" />
  密码：<input type="password" name="password" />
  <input type="submit" value="注册" formaction="regist" />
  <input type="submit" value="提交" formaction="login" />
</form>

3.formxxx属性

formxxx属性是一些与formaction极为相似的属性，对于<input type="submit".../>、<input type="image".../>等元素，都可以指定formenctype、formmethod、formtarget等属性，其中：

formenctype：通过该属性可以让按钮动地改变表单的enctype属性
formmethod：通过该属性可以让按钮动地设置表单以POST或GET方式提交
formarget：通过该属性可以让按钮动地改变表单的target属性

<form method="post">
  昵称：<input type="text" name="name" />
  密码：<input type="password" name="password" />
  <input type="submit" value="GET提交" formmethod="get" />
  <input type="submit" value="POST提交" formmethod="post" />
</form>

4.autofocus属性

当为某个表单控件增加该属性后，浏览器打开该页面时该组件就会自动获得焦点

由于打开页面时只能有一个控件获得焦点，因此整个页面上最多只能有一个表单控件可以设置该属性

5.placeholder属性

在一些用户界面足够人性化的页面里，当用户还未在单行文本框、多行文本域中输入内容时，单行文本框、多行文本域内就会显示了对用户的提示信息。一旦用户开始输入，单行文本框、多行文本域内的提示信息就会自动消失。

<form method="post">
  昵称：<input type="text" name="name" placeholder="请输入昵称" />
  密码：<input type="password" name="password" placeholder="请输入密码" />
  <input type="submit" value="注册"/>
  <input type="submit" value="登录"/>
</form>

6.list属性

在HTML5规范以前，HTML表单控件没有类似于combobox的组件。HTML5的list属性弥补了这个不足，list属性的值应该是一个<datalist.../>组件的id。也就是说，list属性必须与<datalist.../>元素结合使用

<datalist.../>: 该元素相当于一个“看不见”的<select.../>元素，用于生成一个隐藏的下拉菜单。<datalist.../>所包含的子元素与<select.../>元素完全相同

<form id="addForm" action="add">
  昵称：<input type="text" name="name" list="books"/>
  密码：<input type="password" name="password" />
</form>
<datalist id="books">
	<option value="html5">HTML5</option>
    <option value="css3">CSS3</option>
    <option value="javascript2017">javascript2017</option>
</datalist>

7.autocomplete属性

该属性主要与list属性结合使用，当文本框指定了有效的list属性后，该文本框下面总会显示一个下拉菜单供用户选择。但在有些时候可能出于安全考虑，开发者不想让某些用户看到这个下拉菜单，则可以通过autocomplete属性来实现。该属性支持如下两个值：

on：打开autocomplete，文本框下方会显示下拉菜单
off：关闭autocomplete，文本框下方不会显示下拉菜单