效果图

代码如下

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>用户注册</title>
  9. </head>
  10. <body>
  12. <style>
  13.     .register input{
  14.         border-radius: 5px;
  15.         border: 1px solid #666;
  16.     }
  17.     .item{
  18.         height: 40px;
  19.         line-height: 40px;
  20.     }
  21.     input[type="text"]{
  22.         width: 170px;
  23.     }
  24.     input[type="email"]{
  25.         width: 170px;
  26.     }
  27.     input[type="password"]{
  28.         width: 170px;
  29.     }
  30.     input[type="search"]{
  31.         width: 170px;
  32.     }
  33.     #keywords{
  34.         width: 170px;
  35.     }
  36.     .submit{
  37.         background-color: #1E9FFF;
  38.         color: #fff;
  39.         border-radius: 4px;
  40.         text-align: center;
  41.         padding: 0px 30px;
  42.         border: 1px solid transparent;
  43.         height: 38px;
  44.         line-height: 38px;
  45.     }
  46.     .item:nth-child(2) label{
  47.         color: red;
  48.     }
  49. </style>
  52. <div class="register">
  53.     <h4>用户注册</h4>
  54.     <form action="#" method="post">
  55.         <fieldset>
  56.             <div class="item">
  57.                 <label for="username">账号：</label>
  58.                 <input type="text" name="username" id="username" placeholder="请输入账号" required value="admin">
  59.             </div>
  60.             <div class="item">
  61.                 <label for="password">密码：</label>
  62.                 <input type="password" name="password" id="password" placeholder="请输入密码" required>
  63.             </div>
  64.             <div class="item">
  65.                 <label for="email">邮箱：</label>
  66.                 <input type="email" name="email" id="email" placeholder="examples@qq.com" required>
  67.             </div>
  68.         </fieldset>
  69.         <div class="item">
  70.             <label for="secret">性别：</label>
  71.             <input type="radio" name="gender" value="1"><label for="">男</label>
  72.             <input type="radio" name="gender" value="0"><label for="">女</label>
  73.             <input type="radio" name="gender" value="2" checked id="secret"><label for="">保密</label>
  74.         </div>
  75.         <div class="item">
  76.             <label>爱好:</label>
  77.             <input type="checkbox" name="hobby[]" id="game" checked /><label for="game">游戏</label>
  78.             <input type="checkbox" name="hobby[]" id="trave" /><label for="trave">旅游</label>
  79.             <input type="checkbox" name="hobby[]" id="shoot" checked /><label for="shoot">摄影</label>
  80.         </div>
  81.         <div class="item">
  82.             <select name="level" id="">
  83.                 <option value="1">铜牌会员</option>
  84.                 <option value="2">银会员</option>
  85.                 <option value="3">金牌会员</option>
  86.                 <option value="4" selected>钻石会员</option>
  87.             </select>
  88.         </div>
  89.         <div class="item">
  90.             <label for="">搜索关键字:</label>
  91.             <input type="search" name="search" list="keywords" />
  92.             <datalist id="keywords">
  93.                 <option value="html"></option>
  94.                 <option value="css"></option>
  95.                 <option value="javascript"></option>
  96.                 <option value="js"></option>
  97.                 <option value="php"></option>
  98.             </datalist>
  99.         </div>
  100.         <div class="item">
  101.             <button class="submit">提交</button>
  102.         </div>
  103.     </form>
  104. </div>
  105. </body>
  106. </html>

更多相关文章

  1. CSS基本选择器与上下文选择器
  2. 注册表单、基本选择器及上下文选择器
  3. 表格的制作
  4. html制作table
  5. Mozilla正在修改Firefox UI，计划5月份公布新设计
  6. js之数组对象与访问器
  7. html基础：form表单
  8. html内table表格的与form表单基础写法！
  9. 写用户注册表

随机推荐

  1. Python办公自动化｜从Word到Excel
  2. 手把手教你使用Matplotlib绘图｜实战
  3. PythonGUI编程｜使用Tkinter制作快递查询软
  4. 重庆火锅哪家强，Python帮你探探店
  5. NumPy进阶修炼｜基础
  6. Python办公自动化｜批量合并PDF，拿来就用
  7. 手把手教你使用Matplotlib｜实战
  8. 动画：用动画给面试官解释 TCP 三次握手过
  9. 开始你的第一个机器学习项目｜文末送书
  10. 玩转数据处理120题重制说明与下载