实战HTML5表单

新增的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>