HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注

下面这些是新增加的input属性：
autocomplete：自动显示以前输入过的信息，取值"on"或者"off"。适用于text, search, url, tel, email, password, datepickers, range, and color类型。

autofocus：页面加载完成后自动获取到焦点。
form：指定input所属的form，可以是多个。
formaction：指定form提交后处理这个input的页面(URL)或文件。　　
formenctype：指定form提交后数据如何编码。
formmethod：指定发送form数据的HTTP方法，会覆盖相应form的HTTP方法。
formnovalidate：提交前不检查数据的有效性。
formtarget：指定在那个地方显示form提交后response的内容。
height, width：输入框长和宽，只适用于image类型。　
max，min：输入值的最大值和最小值。适用于有意义的number,range, 日期类型。　　
multiple：是否允许输入多个值，适用于email和file类型。
pattern：指定验证输入值的正则表达式，适用于text,search,url,tel,email,password。
placeholder：输入前的提示信息，适用于text,search,url,tel,email,password。
required：是否是必填项，如果不填必填项，则表单不能提交，适用于text, search, url, tel, email, password, date pickers, number, checkbox, radio, 和file类型。
step：输入自动增长时的步长值，适用于number, range, date, datetime, datetime-local, month, time和week类型。
list：输入项的候选列表，需要和datalist元素配合使用，list属性可用在这些类型上：text、search、url、tel、email、date、number、range和color，目测在FireFox上有效。看一个小例子：

复制代码
<fieldset>
<legend> Favorites </legend>
<p>
<label>
<input type="text" name="favorites" list="options">
<datalist id="options">
<option value="A">
<option value="B">
<option value="C">
</datalist>
</label>
</p>
</fieldset>

下面的例子尝试使用了各个属性，可以运行在不同的浏览器下查看实际效果：

复制代码
<form action="demo_form.asp">
E-mail: <input type="email" name="email" autocomplete="on" />
Image: <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"/>
Enter a date before 1980-01-01:<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5" />
Select images: <input type="file" name="img" multiple="multiple" />
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" />
First Name: <input type="text" name="fname" placeholder="First name" />
Username: <input type="text" name="usrname" required="required" />
Number: <input type="number" name="points" step="3" />

<input type="submit" />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST" />
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation" />
<input type="submit" formtarget="_blank" value="Submit to a new window" />
</form>
<form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
Last name: <input type="text" name="lname" form="form1" />