每日一点前端-7-html5+css3友好的表单

此表单由html5+css3制作。代码简单，且界面美观。省去了很多js的编写。

友好的表单.gif

代码：

    
    
    


表单描述

    

        
表单描述
        

            

                姓名     
                
            
            

                优先级    
                
            
            

                估算的时间  
                
            
            

                日期的选择  
                
            
            

                电子邮件   
                
            
            

                URL字段   
                
            
            

                颜色选择   
                
            
            

                密码正则表达 
                
            
            

                姓名
                iotzzh
            
            

                
            
        
    



    <h4>表单描述</h4>
    <form class="form1" method="post" action="chapter2.html">
        <fieldset class="fieldset1">
            <legend class="legend1">表单描述</legend>
            <ol class="ol1">
                <li>
                    <label>姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <input class="input-name" autofocus required type="text" placeholder="zzh"/>
                </li>
                <li>
                    <label>优先级&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <input class="input-range" required type="range"/>
                </li>
                <li>
                    <label>估算的时间&nbsp;&nbsp;</label>
                    <input class="input-number" required type="number"/>
                </li>
                <li>
                    <label>日期的选择&nbsp;&nbsp;</label>
                    <input class="input-date" type="date" value="2016-09-01"/>
                </li>
                <li>
                    <label>电子邮件&nbsp;&nbsp;&nbsp;</label>
                    <input class="input-email" type="email" />
                </li>
                <li>
                    <label>URL字段&nbsp;&nbsp;&nbsp;</label>
                    <input class="input-url" type="url" placeholder="www.iotzzh.com"/>
                </li>
                <li>
                    <label>颜色选择&nbsp;&nbsp;&nbsp;</label>
                    <input class="input-color" type="color"/>
                </li>
                <li>
                    <label>密码正则表达&nbsp;</label>
                    <input class="input-password" type="password" autocomplete="off" placeholder="8-10 characters"
                           pattern="^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.*[\w]).*$"/>
                </li>
                <li>
                    <b>姓名</b>
                    <span class="li-span-name" contenteditable="true">iotzzh</span>
                </li>
                <li class="li-input-submit">
                    <input class="input-submit" type="submit" value="提交"/>
                </li>
            </ol>
        </fieldset>
    </form>

公众号.png