记不住就存下来---- HTML 5 新增的属性与元素 之 表单控件新增元素

---

form 属性

在 HTML 5 之前,所有的表单控件必须放在<form../>元素内部, 表明该表单控件属于该表单.

但 HTML 5 为表单控件新增了 form 属性, 用于定义该表单控件所属的表单, 该属性的值应该是它所属表单的 id.

通过为表单控件指定 form 属性, 可以让表单控件定义在 <form../>元素之外, 从而提高灵活性.

上面粗体字代码使用<textarea../>定义了一个多行文本域, 虽然它并不在<from../>元素内部, 但由于为它指定了 form 属性, 因此它也是属于 addForm 的. 当提交该表单时,该多行文本域也会生成对应的请求参数.

由于 HTML 5 为所有表单控件都新增了 form 属性, 因此在页面上定义表单控件时更加灵活,可以随意地防止,排列表单控件, 这位页面布局提供了更大的灵活性.

---

 formaction 属性

这是一个非常实用的属性, 在页面中有一个表单, 该表单内包含了两个以上的提交按钮, 但程序提交需要不同的 action.

在 HTML 5 规范之前, 我们只能通过 Javascript 来实现:当浏览者点击不同的按钮时, 通过 JavaScript 控制动态的修改 <form../>元素的 action 属性.

HTML 5 的 forMacion 属性抓们用于处理上面的场景:对于<input type = “submit”../> , <input type = “image”> , <button type = “submit”..>元素, 都可以指定 formation, 该属性即可动态的让表单提交到不同的 URL .

上面粗体字代码定义了两个提交按钮,但他们的 formaction 属性不同, 因此点击第一个按钮将会提交到 regist , 点击第二个按钮将会提交到 login.

---

form XXX 属性

formxxx 属性是一些与 formaction 极为相似的属性, 对于 <input type= “submit”../>, <input type = “image”../> , <button type = “submit”../> 元素都可以指定 formenctype , formmenthod , form target 等属性:

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

上面粗体字代码定义了两个提交按钮,但他们的 formmethod 属性不同, 因此第一个按钮将会采用 GET 方式提交请求, 单击第二个按钮将会采用 POST 方式提交请求.

---

 autofocus 属性

同样非常实用.当为某个表单控件增加该属性后,浏览器打开该页面时,组件会自动获得焦点.

注意:

打开页面的时候只能一个控件获得焦点,因此整个页面上最多只能有一个表单控件可设置该属性.

---

placeholder 属性

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

在 HTML 5 规范之前,为了实现上面介绍的效果,只能通过 JavaScript 脚本来实现. HTML 5 规范为这种效果提供了placeholder 属性,该属性的值就是当行文本框,多行文本域显示的提示信息.

---

list 属性

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

datalist

该元素相当于一个 “看不见”的 <select../>元素, 用于生成一个隐藏的下拉菜单.<datalist../>所能包含的子元素与<select../>元素完全相同.该元素用于与制定了 list 属性的 <input../>元素结合使用.当双击指定了 list 属性的文本框时,该文本框将会展示 <datalist../>生成的下拉菜单.

上面粗体字代码使用了 list 属性指定了一个 <datalist../>元素,这样就可以吧这个单行文本框编程了一个 “复合组件”;

相当于一个文本框和下拉菜单组合后的效果.

提示:

为了保证 list 属性具有较好的, 一致的行为. 建议使用 <datalist../>定义下拉菜单时, 让每个 <option../>元素的文本与 value 属性值完全相同.

---

autocomplete 属性

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

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