最全 H5 form 表单 + 正则验证

最新推荐文章于 2022-09-13 10:26:55 发布

转载最新推荐文章于 2022-09-13 10:26:55 发布 · 570 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhpblog/p/6841511.html

文章标签：

#前端 #ViewUI

本文展示了一个包含多种输入类型的HTML表单示例，包括电子邮件、文本、日期等，并使用CSS进行了美化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>