新增的input输入类型
email类型的应用
<!--email类型的应用-->
<form action="#" >
请输入您的E-mail地址:<input type="email" name="email">
<input type="submit" />
</form>
<!--url类型的应用-->
<form action="#" >
请输入网址:<input type="url" name="url">
<input type="submit" />
</form>
<!--number类型的应用-->
<form action="#" >
请输入数值:<input type="number" name="number" min="1" max="100" step="4">
<input type="submit" />
</form>
<!--step是4的倍数-->
<!--日期检出器类型的应用-->
<form action="#" >
请输入日期:<input type="date" name="date">
<input type="submit" />
</form>
<!--month 月 年
week 周和年
time 时间
datetime 日 月 年 00:00时间
datetime-local 日 月 年 本地时间-->
<!--search类型的应用-->
<form action="#" >
请输入搜索关键字:<input type="search" name="search">
<input type="submit" value="搜索" />
</form>
<!--tel类型的应用-->
<form action="#" >
请输入手机号码:<input type="tel" name="tel">
<input type="submit" />
</form>
<!--color类型的应用-->
<form action="#" >
请输入手机号码:<input type="color" name="color">
<input type="submit" />
</form>
新增的input属性
新增的autocomplete属性
<h2>html5自动完成功能</h2>
//可以模糊查询下拉框
<form autocomplete="on">
<input type="text" id="city" list="citylist" />
<datalist id="citylist" style="display: none;">
<option value="beijing">beijing</option>
<option value="qingdao">qingdao</option>
<option value="qingzhou">qingzhou</option>
<option value="qinghai">qinghai</option>
<option value="士大夫">士大夫</option>
</datalist>
</form>
新增的multiple属性
//可以上传多个文件
<form action="#" method="get">
请选择上传多个文件<input type="file" name="img" multiple="multiple" />
<input type="submit" value="提交"/>
</form>
新增的pattern属性
正则表达式可以放到input的pattern里面
<form action="#" method="get">
请输入邮政编码<input type="text" pattern="[0-9]{6}"title="请输入6位数的邮政编码"/>
<input type="submit" value="提交"/>
</form>
新增的requited属性
//提示文本不能为空
<form action="#" method="get">
请输入姓名<input type="text"required="required"/>
<input type="submit" value="提交"/>
</form>
新增的form元素
新增的list属性和datalist元素
//datalist可以实现数据下拉效果,不可以模糊查询,而list属性用于指定输入框绑定的datalist元素,其值是某个datalist的id.
<form action="#" method="get">
请输入网址<input type="list" list="url_list" name="weblink"/>
<datalist id="url_list">
<option label="新浪" value="http://www.sina.com.cn"></option>
<option label="百度" value="http://www.baidu.com.cn"></option>
</datalist>
<input type="submit"/>
</form>
新增的keygen元素
//keygen元素是秘钥对生成器,能够使用户验证更为可靠。
<form action="#" method="get">
请输入用户名:<input type="text" />
请选择加密强度:<keygen name="security" />
<input type="submit"/>
</form>
新增的form属性
HTML5新增的俩个form属性,分别是autocomplete和novalidate属性。
新增的autocomplete属性
已经在input属性是已经介绍过了
新增的novalidate属性
form元素的novalidate属性用于在提交表单时取消整个表单的验证,即关闭对表单内的所有元素的有效性检查。
<form action="#" method="get" novalidate="true">
请输入电子邮件地址:<input type="email" />
<input type="submit"/>
</form>