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中新增的，用来提供一批值，帮助用户输入需要的数据。
