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:设置初始密码值。
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属性指定。
2)reset:生成重设表单的按钮;
3)button:生成普通按钮,无任何操作。
3中按钮的说明文字都通过value属性指定。
<for