用html5和css制作信息登记表

最新推荐文章于 2025-02-26 15:53:34 发布

原创最新推荐文章于 2025-02-26 15:53:34 发布 · 8.1k 阅读

68 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #css3

web前端专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个简单的HTML信息登记表单的设计，包含禁用、只读、必填等输入字段属性，并展示了如何通过HTML5的新特性来增强用户体验。

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>信息登记表</title>
  <!-- <link rel="stylesheet" href="style07.css" type="text/css"> -->
  <style type="text/css">
   input {
    width:200px;
    height:18px;                                 
    border:1px solid #d4cdba;
    padding:2px; 
   }
   
   .btn input{
    width:100px; 
    height:30px;
    border-radius:3px;
   }
  </style>
 </head>
 <body>
  <div class="bg">
   <form action="#" method="get" autocomplete="off">
    <h2>信息登记表</h2>
    <p><span>用户登录：</span>
     <!-- 在下面的横线中填写`禁用属性`和`只读属性` -->
     <input type="text" name="user_name" value="myemail@163.com" disabled readonly/>
    </p>
    
    <p><span>真实姓名：</span>
    <!-- 在下面的横线中填写`必填属性`和`自动聚焦` -->
     <input type="text" name="real_name" placeholder="例如：思聪" required autofocus/>
    </p>
    
    <p><span>真实年龄：</span>
     <!-- 在下面的横线中填写`最大值属性`和`最小值属性` -->
     <input type="number" name="real_lage" value="24"   max="15"   min="120" required/>
    </p>
    
    <p><span>出生日期：</span>
     <!-- 在下面的横线中填写`type的日期类型` -->
     <input type="date" name="birthday" value="1999-10-1" required/>（必须填写）</p>
    </p>
    
    <p><span>个人主页：</span>
     <!--  在下面的横线中填写input标签的`引用数据列表属性`-->
     <input type="url" name="myurl"  list="urllist" placeholder="http://www.sdlfc.com"/>
     <datalist id="urllist">
      <option>http://www.baidu.cn</option>
      <option>http://www.sina.com</option>
      <option>http://www.w3school.com.cn</option>
     </datalist>
    </p>
    
    <p class="btn">
     <input type="submit" value="提交" />
     <input type="reset" value="重置" />
    </p>
   </form>
  </div>
 </body>
</html>

效果图：
在这里插入图片描述