type为text表示input元素为一个单行文本框，是input元素的默认表现形式。单行文本输入框支持下面的属性设置。
A:设定元素大小maxlength属性设定用户能够输入的字符的最大数目；size属性设定了文本框能够显示的字符数目。
<form method="post" action="http://www.cnblogs.com/89526cyh/">
<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>
B:设置初始值和占位式提示value属性可以为输入框指定一个默认值；placeholder属性可以设置一段提示文字，告诉用户应该输入什么类型的数据
<form method="post" action="http://www.cnblogs.com/89526cyh/">
<p><label for="name">Name: <input placeholder="Your name"/></label></p>
<p><label for="city">City: <input placeholder="Where you live"/></label></p>
<p><label for="fave">Fruit: <input value="Apple"/></label></p>
<button type="submit">Submit Vote</button>
</form>
注：用button元素重置表单时，浏览器会恢复文本框中的占位式提示和默认值。
在chrome中的效果如下：
list属性可以设置为一个datalist元素的id属性值，这样用户就可以在datalist元素指定的列表中进行选择。datalist元素是HTML5中新增的，用来提供一批值，帮助用户输入需要的数据。
<form method="post" action="http://www.cnblogs.com/89526cyh/">
<p><label for="name">Name: <input placeholder="Your name"/></label></p>
<p><label for="city">City: <input placeholder="Where you live"/></label></p>
<p><label for="fave">Fruit: <input list="fruitlist"/></label></p>
<button type="submit">Submit Vote</button>
</form>
<datalist>
<option value="Apples" label="Lovely Apples"/>
<option value="Oranges">Refreshing Oranges</option>
<option value="Cherries"/>
</datalist>
datalist元素中的每一个option都代表一个用户可选择的值
在chrome中的效果如下：
D:生成只读或被禁用的文本框
readonly属性表示文本框只读，disabled属性表示不可编辑，在外观表现上有差异。
相关文章
精彩导读
热门资讯
关注我们
