梳理HTML5中表单的常见特性及新特性

HTML5 新的表单特性
HTML5 的 <form> 和 <input>标识加上了几个新特性.
<form>新特性：
autocomplete
novalidate
<input>新特性：
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

<form> / <input> autocomplete 特性
autocomplete 特性要求 form 或 input 域应当有着全自动进行作用。
当客户在全自动进行域中刚开始键入时，访问器应当在该域中显示信息填写的选项。
提醒: autocomplete 特性有将会在 form元素中是打开的，而在input元素中是关掉的。
留意: autocomplete 可用于 <form> 标识，和下列种类的 <input> 标识：text, search, url, telephone, email, password, datepickers, range 和 color。
案例
HTML form 中打开 autocomplete (1个 input 字段关掉 autocomplete ):

<form> novalidate 特性
novalidate 特性的1个boolean 特性.
novalidate 特性要求在递交表单时不可该认证 form 或 input 域。
案例
不用认证递交的表奇数据

<input> autofocus 特性
autofocus 特性是1个 boolean 特性.
autofocus 特性要求在网页页面载入时，域全自动地得到聚焦点。
案例
让 "First name" input 键入域在网页页面加载时全自动聚焦：

<input> form 特性
form 特性要求键入域隶属的1个或好几个表单。
提醒:如需引入1个以上的表单，请应用空格隔开的目录。
案例
坐落于form表单外的input 字段引入了 HTML form (该 input 表单依然属于form表单的1一部分):

<input> formaction 特性
The formaction 特性用于叙述表单递交的URL详细地址.
The formaction 特性会遮盖<form> 元素中的action特性.
留意: The formaction 特性用于 type="submit" 和 type="image".
案例
下列HTMLform表单包括了两个不一样详细地址的递交按钮：

<input> formenctype 特性
formenctype 特性叙述了表单递交到服务器的数据信息编号 (只对form表单中 method="post" 表单)
formenctype 特性遮盖 form 元素的 enctype 特性。
关键: 该特性与 type="submit" 和 type="image" 相互配合应用。
案例
第1个递交按钮已默认设置编号推送表奇数据，第2个递交按钮以 "multipart/form-data" 编号文件格式推送表奇数据:

<input> formmethod 特性
formmethod 特性界定了表单递交的方法。
formmethod 特性遮盖了 <form> 元素的的method 特性。
留意: 该特性能够与 type="submit" 和 type="image" 相互配合应用。
案例
再次界定表单递交方法案例:

<input> formnovalidate 特性
novalidate 特性是1个 boolean 特性.
novalidate特性叙述了 <input> 元素在表单递交时不用被认证。
formnovalidate 特性会遮盖 <form> 元素的novalidate特性.
留意: formnovalidate 特性与type="submit1起应用
案例
两个递交按钮的表单(应用与不可用认证 ):

<input> formtarget 特性
formtarget 特性特定1个名字或1个重要字来指明表单递交数据信息接受后的展现。
The formtarget 特性遮盖 <form>元素的target特性.
留意: formtarget 特性与type="submit" 和 type="image"相互配合应用.
案例
两个递交按钮的表单, 在不一样对话框中显示信息:

<input> height 和 width 特性
height 和 width 特性要求用于 image 种类的 <input> 标识的图象高宽比和宽度。
留意: height 和 width 特性只可用于 image 种类的<input> 标识。
提醒:图象一般会另外特定高宽比和宽度特性。假如图象设定高宽比和宽度，图象所需的室内空间 在载入页时会被保存。假如沒有这些特性， 访问器不知道道图象的尺寸，其实不能预留 适度的室内空间。照片在载入全过程中会使网页页面合理布局实际效果更改 （虽然照片已载入）。
案例
界定了1个图象递交按钮, 应用了 height 和 width 特性:

<input> list 特性
list 特性要求键入域的 datalist。datalist 是键入域的选项目录。
OperaSafariChromeFirefoxInternet Explorer
案例
在 <datalist>中预订义 <input> 值:

<input> min 和 max 特性
min、max 和 step 特性用于为包括数据或时间的 input 种类要求限制（管束）。
留意: min、max 和 step 特性可用于下列种类的 <input> 标识：date pickers、number 和 range。
案例

<input> multiple 特性
multiple 特性是1个 boolean 特性.
multiple 特性要求<input> 元素中可挑选好几个值。
留意: multiple 特性可用于下列种类的 <input> 标识：email 和 file。: email, and file.
案例
提交好几个文档:

<input> pattern 特性
pattern 特性叙述了1个正则表达式表述式用于认证 <input> 元素的值。
留意:pattern 特性可用于下列种类的 <input> 标识: text, search, url, tel, email, 和 password.
提醒： 是用来全局性 title 特性叙述了方式.
案例
下面的事例显示信息了1个只能包括3个字母的文字域（不含数据及独特标识符）：

<input> placeholder 特性
placeholder 特性出示1种提醒（hint），叙述键入域所希望的值。
简洁明了的提醒在客户键入值前会显示信息在键入域上。
留意: placeholder 特性可用于下列种类的 <input> 标识：text, search, url, telephone, email 和 password。
案例
input 字段提醒文字t:

<input> required 特性
required 特性是1个 boolean 特性.
required 特性要求务必在递交以前填写键入域（不可以为空）。
留意:required 特性可用于下列种类的 <input> 标识：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 和 file。
案例
不可以为空的input字段:

<input> step 特性
step 特性为键入域要求合理合法的数据间距。
假如 step="3"，则合理合法的数是 ⑶,0,3,6 等
提醒： step 特性能够与 max 和 min 特性建立1个地区值.
留意: step 特性与下列type种类1起应用: number, range, date, datetime, datetime-local, month, time 和 week.
案例
要求input step步长为3:

<output> 元素
HTML5 还引进了1个新元素 <output>，用来表明不一样种类的輸出結果，例如輸出由脚本制作所写。

还能够用 for 特性特定輸出元素和文本文档中危害测算的别的元素之间的关联（例如，做为键入源或主要参数）。for 特性的值是1个由空格隔开的别的元素的 IDs 目录。

placeholder 特性
HTML5 引进了1个叫做 palceholder 的新特性。这个特性在 <input> 和 <textarea> 元素上为客户出示了在这个字段能够键入甚么的提醒。占位符标识符不可以包括回车符或换行符。
下面是 placeholder 特性的简易英语的语法：

这个特性仅有全新版的 Mozilla，Safari 和 Chrome 访问器适用。

required 特性
如今，大家不必须应用 JavaScript 解决诸如空文字框始终不可以被递交的这类顾客端认证了，由于 HTML5 引进了1个叫做 required 的新特性，能够依照以下方法应用，它会确保键入框有值：

这个特性仅有全新版的 Mozilla，Safari 和 Chrome 访问器适用。