最全 H5 form 表单 + 正则验证

<style type="text/css">
    label {
        width: 80px;
        padding: 0;
        display: inline-block;
        margin: 0;
        height: 25px;
        text-align:justify;
        /*text-justify:distribute-all-lines;!*ie6-8*!*/
        text-align-last:justify;/* ie9*/
        -moz-text-align-last:justify;/*ff*/
        -webkit-text-align-last:justify;/*chrome 20+*/
    }
    @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
        .test1:after{
            content:".";
            display: inline-block;
            width:100%;
            overflow:hidden;
            height:0;
        }
    }
</style>

<form> 
 <p>
 <label for="email">电子邮箱：</label> 
 <input type="email" required autofocus name="email" id="email" placeholder="您的电子邮箱"> 
 </p> 
 <p> 
 <label for="username-search">用户名：</label> 
<input type="text" pattern="^[\u4e00-\u9fa5]*$" required name="username" placeholder="请输入用户名"> 
<input type="search" placeholder="用户名搜索" autosave="www.yujie.com" results="5" name="username-search" id="username-search"> 
</p> 
<p> 
<label>性别：</label> 
<input type="radio" value checked name="docVLGender" required>男 
<input type="radio" value name="docVLGender">女 
</p> 
<p> 
<label for="username-search">生日：</label> 
<input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday" value="1982-10-10"> 
</p> 
<p> 
<label for="blog">博客地址：</label> 
<input type="url" name="blog" placeholder="您的博客地址" id="blog"> 
</p> 
<p> 
<label for="mobile">手机：</label> 
<input type="tel" name="mobile" pattern="^1[3458]{1}[0-9]{9}$" id="mobile" placeholder="您的手机号"> 
</p> 
<p> 
<label id="label-working-year" for="working-year">工作年限：</label> 
 <input type="range" min="1" step="1" max="20" name="slider" name="working-year" id="working-year" placeholder="您的工作年限" value="3"> 
 </p> 
 <p> 
 <label for="age">年龄：</label> 
 <input type="number" name="age" id="age" value="20" autocomplete="off" placeholder="您的年龄"> 
 </p> 
 <p> 
 <label for="avatar">头像：</label> 
 <input type="image" src="ms.jpg" mce_src="ms.jpg" name="avatar" id="avatar" placeholder="点击选择头像"> 
 </p> 
</form>

转载于:https://www.cnblogs.com/zhpblog/p/6841511.html