html表单一直都是web的核心技术之一,有了它才能在web上进行各种各样的应用。html5的forms新增了许多新控件及其API,方便我们对表单的验证。
opera对新属性的支持性最好,ie10以下不支持,其他主流浏览器部分支持。
input的新类型:
1、url类型(url):提交表单时检测input的value是否是一个url格式;
当你什么也不输入的时候,点提交没有什么提示,但当你填入的信息不是一个正确的url时,浏览器会提醒你。
2、email:一个电子邮件地址或电子邮件地址列表;
这个和url同样。
3、number:数字输入框;
右边有两增减图标。
4、tel:电话输入框;
点提交没有任何提示,tel需要配合新增属性pattern来使用。
5、color:颜色选择框;
当点击黑框时,会弹出颜色选择框供你选择。
6、range:选择区域;
7、各种日期:
date:年-月-日格式的控件
time:时:分格式的控件
datetime:年-月-日 时:分:秒:秒的小数格式的控件,有时区
datetime-local:同上,但没时区
month:年-月格式的控件
week:年-周数格式的控件
当点击黑色下三角符号时会弹出如下日起选择框供你选择日期:
代码如下:
<form action="###">
date:<input type="date" name="" value="" /><br />
time:<input type="time" name="" value="" /><br />
datetime:<input type="datetime" name="" value="" /><br />
datetime-local:<input type="datetime-local" name="" value="" /><br />
month:<input type="month" name="" value="" /><br />
week:<input type="week" name="" value="" /><br />
<input type="submit"/>
</form>
input的新属性:
1、placeholder:占位符,当输入框为空时显示的文字;
<form action="###">
placeholder属性:<input type="text" placeholder="请输入用户名" name="" value="" />
<input type="submit"/>
</form>
如上面的代码,placeholder中写的值如上图所示,当点击文本框时,”请输入用户名“会自动消失。
2、required:该input是否为必填项;
<form action="###">
required属性:<input type="text" required name="" value=""/><br />
<input type="submit"/>
</form>
当点击提交时,框中也没有输入任何东西时,会出现提示。
3、list:指定一个datalist,作为下拉提示单;
当第一次点击框时不会出现下拉菜单,当第二次点击框时会出现下拉菜单供你选择。list属性和datalist标签配合使用,如下:
<form action="###">
list属性:<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist><br />
<input type="submit"/>
</form>
4、min/max:input能输入的最大/最小字节的长度;
<form action="###">
<input type="number" name="points" min="0" max="10" step="3" value="6" /><br />
<input type="submit"/>
</form>
5、step:对input的range类型,每次递增step的值,number中也可以用到,如上面的代码;
<form action="###">
range:<input type="range" name="rangename" max='100' min='0' step='20' >
<input type="submit"/>
</form>
6、pattern:指定一个正则表达式,用于检查输入是否符合正则;
<form action="###">
pattern属性:<input type="text" name="" value="" pattern="[A-z]{3}" />
<input type="submit"/>
</form>
当框中输入不符合pattern属性所要求的值时,会出现提示。