HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型:
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
E-mail: <input type="email" name="user_email" />
Homepage: <input type="url" name="user_url" />
Points: <input type="number" name="points" min="1" max="10" />
在提交表单时会自动验证
新的 form 属性:
autocomplete 自动完成,就是已经填写完的表单,再次返回后,是之前填写的内容
novalidate 规定在提交表单时不应该验证 form 或 input 域。
新的 input 属性:
autocomplete
autofocus
form 指定input或其他组件所属的表单,如果定义在表单之外还是表单的一部分
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width 如定义一个图片的高度和宽度
list
min, max 和 step 步长
multiple Select images: <input type="file" name="img" multiple="multiple" />指定一个输入框可以选择多个
pattern (regexp) 规定用于验证 input 域的模式(pattern),即正则表达式
placeholder
required Name: <input type="text" name="usr_name" required="required" /> 表明该字段不能为空
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
<p>请填写并提交此表单,然后重载页面,来查看自动完成功能是如何工作的。</p>
<p>请注意,表单的自动完成功能是打开的,而 e-mail 域是关闭的。</p>
</body>
</html>
注意:html5中不支持frame和frameset标签
本章全面介绍这些新的输入类型:
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
E-mail: <input type="email" name="user_email" />
Homepage: <input type="url" name="user_url" />
Points: <input type="number" name="points" min="1" max="10" />
在提交表单时会自动验证
新的 form 属性:
autocomplete 自动完成,就是已经填写完的表单,再次返回后,是之前填写的内容
novalidate 规定在提交表单时不应该验证 form 或 input 域。
新的 input 属性:
autocomplete
autofocus
form 指定input或其他组件所属的表单,如果定义在表单之外还是表单的一部分
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width 如定义一个图片的高度和宽度
list
min, max 和 step 步长
multiple Select images: <input type="file" name="img" multiple="multiple" />指定一个输入框可以选择多个
pattern (regexp) 规定用于验证 input 域的模式(pattern),即正则表达式
placeholder
required Name: <input type="text" name="usr_name" required="required" /> 表明该字段不能为空
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
<p>请填写并提交此表单,然后重载页面,来查看自动完成功能是如何工作的。</p>
<p>请注意,表单的自动完成功能是打开的,而 e-mail 域是关闭的。</p>
</body>
</html>
注意:html5中不支持frame和frameset标签