HTML5：定制表单

HTML5中存在多种不同的输入框和按钮，通过设置input元素的type属性来实现，除此之外，HTML5中还支持选择列表、多行输入框等，这些元素都有自己的用途和属性，下面一一介绍。

单行文本输入框

type为text表示input元素为一个单行文本框，是input元素的默认表现形式。单行文本输入框支持下面的属性设置。

设定元素大小

maxlength属性设定用户能够输入的字符的最大数目；size属性设定了文本框能够显示的字符数目。

<form method="post" action="http://titan:8080/form">
	<p><label for="name">Name: <input maxlenth="10" id="name" name="name"/></label></p>
	<p><label for="city">City: <input size="10" id="city" name="city"/></label></p>
	<p><label for="fave">Fruit: <input size="10" maxlenth="10" id="fave" name="fave"/></label></p>
	<button type="submit">Submit Vote</button>
</form>

设置初始值和占位式提示

value属性可以为输入框指定一个默认值；placeholder属性可以设置一段提示文字，告诉用户应该输入什么类型的数据。

<form method="post" action="http://titan:8080/form">
	<p><label for="name">Name: <input placeholder="Your name" id="name" name="name"/></label></p>
	<p><label for="city">City: <input placeholder="Where you live" id="city" name="city"/></label></p>
	<p><label for="fave">Fruit: <input value="Apple" id="fave" name="fave"/></label></p>
	<button type="submit">Submit Vote</button>
</form>

在chrome中的效果如下：

用button元素重置表单时，浏览器会恢复文本框中的占位式提示和默认值。

使用数据列表

list属性可以设置为一个datalist元素的id属性值，这样用户就可以在datalist元素指定的列表中进行选择。datalist元素是HTML5中新增的，用来提供一批值，帮助用户输入需要的数据。

<form method="post" action="http://titan:8080/form">
	<p><label for="name">Name: <input placeholder="Your name" id="name" name="name"/></label></p>
	<p><label for="city">City: <input placeholder="Where you live" id="city" name="city"/></label></p>
	<p><label for="fave">Fruit: <input list="fruitlist" id="fave" name="fave"/></label></p>
	<button type="submit">Submit Vote</button>
</form>
<datalist id="fruitlist">
	<option value="Apples" label="Lovely Apples"/>
	<option value="Oranges">Refreshing Oranges</option>
	<option value="Cherries"/>
</datalist>

datalist元素中的每一个option都代表一个用户可选择的值，在chrome中的效果如下：

生成只读或被禁用的文本框

readonly属性表示文本框只读，disabled属性表示不可编辑，在外观表现上有差异。

<form method="post" action="http://titan:8080/form">
	<p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
	<p><label for="city">City: <input value="Boston" readonly id="city" name="city"/></label></p>
	<p><label for="fave">Fruit: <input value="Apple" id="fave" name="fave"/></label></p>
	<button type="submit">Submit Vote</button>
</form>

在chrome中效果如下：

设置了disabled属性的表单被设置为灰色，用户不能编辑其中的文字，且该表单的内容不会被提交到服务器；而设置了readonly属性的表单会阻止用户编辑文本框中的内容，但不影响外观，且内容会发给服务器。

密码输入框

type属性值为password的input元素用于输入密码。该属性的input元素支持以下属性：
1）maxlength：用户可以在密码框中输入的字符的最大数目；
2）pattern：用于输入验证的正则表达式；
3）placeholder：关于所需数据类型的提示；
4）readonly：设置密码框为只读；
5）required：用户必须输入一个值，否则无法通过输入验证；
6）size：通过指定密码框中可见的字符数目设置其宽度；
7）value：设置初始密码值。

<form method="post" action="http://titan:8080/form">
	<p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
	<p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
	<p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p>
	<button type="submit">Submit Vote</button>
</form>

用户输入的字符在密码框中显示为"*"，但需要注意，在提交表单时，服务器收到的是明文密码，对于安全至关重要的网站和应用系统，应该考虑使用SSL/HTTPS对浏览器和服务器之间的通信内容加密。

按钮

type属性设置为submit、reset和button则会生成类似button元素那样的按钮。

1）submit：生成提交表单的按钮，支持属性：formaction、formenctype、formmethod、formtarget和formnovalidate，这些属性和button元素的同名属性用法相同，参考 这里；
2）reset：生成重设表单的按钮；
3）button：生成普通按钮，无任何操作。
3中按钮的说明文字都通过value属性指定。

<for