html常用表单及CSS选择器练习

效果图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       body {
  10.         background-color: rgb(201, 225, 245);
  11.       }
  12.       main {
  13.         width: 28%;
  14.         margin-left: 42%;
  15.         font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  16.       }
  17.       form,
  18.       h3 {
  19.         text-align: left;
  20.       }
  21.       h3 {
  22.         margin-left: 90px;
  23.       }
  24.       span {
  25.         color: red;
  26.       }
  27.       input {
  28.         margin-top: 10px;
  29.       }
  30.       label.countInfo {
  31.         display: inline-block;
  32.         width: 100px;
  33.       }
  34.       label.contactInfo {
  35.         display: inline-block;
  36.         width: 100px;
  37.       }
  38.       label.contactInfo {
  39.         display: inline-block;
  40.         width: 100px;
  41.       }
  42.       label.QQ {
  43.         display: inline-block;
  44.         width: 107px;
  45.       }
  46.       p {
  47.         font-style: italic;
  48.         font-weight: 600;
  49.       }
  50.       div.hobby {
  51.         margin-top: 10px;
  52.         margin-bottom: 10px;
  53.       }
  54.       div.slogan {
  55.         margin-top: 10px;
  56.       }
  57.       div.slogan label {
  58.         display: inline-block;
  59.         vertical-align: top;
  60.       }
  61.       button {
  62.         width: 100px;
  63.         background-color: rgb(200, 229, 238);
  64.         border: 1px solid #666666;
  65.         border-radius: 5px;
  66.         margin-left: 25%;
  67.       }
  68.     </style>
  69.   </head>
  70.   <body>
  71.     <main>
  72.       <h3>用户注册</h3>
  73.       <form action="" method="get">
  74.         <!-- 账号 -->
  75.         <p>账号信息</p>
  76.         <div>
  77.           <span>*</span>
  78.           <label for="username" class="countInfo"> 账号： </label>
  79.           <input
  80.             type="text"
  81.             id="username"
  82.             autofocus
  83.             placeholder="8-16位"
  84.             required
  85.           />
  86.         </div>
  87.         <div>
  88.           <span>*</span>
  89.           <label for="psw" class="countInfo"> 密码： </label>
  90.           <input
  91.             type="password"
  92.             id="psw"
  93.             placeholder="请使用复杂密码"
  94.             required
  95.           />
  96.         </div>
  97.         <div>
  98.           <span>*</span>
  99.           <label for="conf" class="countInfo">确认密码：</label>
  100.           <input
  101.             type="password"
  102.             id="conf"
  103.             placeholder="请再次输入密码"
  104.             required
  105.           />
  106.         </div>
  107.         <br />
  108.         <br />
  109.         <!-- 联系信息 -->
  110.         <p>联系信息</p>
  111.         <div>
  112.           <span>*</span>
  113.           <label for="phonenum" class="contactInfo"> 手机： </label>
  114.           <input
  115.             type="text"
  116.             id="phonenum"
  117.             required
  118.             placeholder="请输入11位手机号"
  119.           />
  120.         </div>
  121.         <div>
  122.           <span>*</span>
  123.           <label for="email" class="contactInfo"> 邮箱： </label>
  124.           <input
  125.             type="email"
  126.             id="email"
  127.             required
  128.             placeholder="用于找回密码接收重要信息"
  129.           />
  130.         </div>
  131.         <div>
  132.           <label for="QQ" class="contactInfo QQ"> QQ： </label>
  133.           <input type="text" id="QQ" />
  134.         </div>
  135.         <div>
  136.           <span>*</span>
  137.           <label for="address" class="contactInfo"> 联系地址： </label>
  138.           <input type="text" id="address" required />
  139.         </div>
  140.         <br />
  141.         <br />
  142.         <!-- 补充信息 -->
  143.         <p>个人资料</p>
  144.         <label for="secret">性别：</label>
  145.         <input type="radio" name="gender" value="male" />男
  146.         <input type="radio" name="gender" value="female" />女
  147.         <input
  148.           type="radio"
  149.           name="gender"
  150.           value="secret"
  151.           id="secret"
  152.           checked
  153.         />保密
  154.         <div class="hobby">
  155.           <label for="">兴趣爱好：</label>
  156.           <br />
  157.           <input type="checkbox" name="hobby[]" id="read" checked />
  158.           <label for="read">看小说</label>
  159.           <input type="checkbox" name="hobby[]" id="write" />
  160.           <label for="write">写小说</label>
  161.           <input type="checkbox" name="hobby[]" id="watch" />
  162.           <label for="watch">看电视</label>
  163.           <input type="checkbox" name="hobby[]" id="playBall" />
  164.           <label for="playBall">打球</label>
  165.         </div>
  167.         <div>
  168.           <label for="home">籍贯：</label>
  169.           <select name="home" id="home">
  170.             <option value="hunan">湖南</option>
  171.             <option value="hubei">湖北</option>
  172.             <option value="guangdong">广东</option>
  173.             <option value="guangxi">广西</option>
  174.             <option value="henan">河南</option>
  175.             <option value="hebei">河北</option>
  176.             <option value="shandong">山东</option>
  177.             <option value="jiangxi">江西</option>
  178.           </select>
  179.         </div>
  180.         <div>
  181.           <label for="search">感兴趣的领域：</label>
  182.           <input type="search" id="search" name="search" list="keywords" />
  183.           <datalist id="keywords">
  184.             <option value="电竞"></option>
  185.             <option value="历史"></option>
  186.             <option value="国际"></option>
  187.             <option value="美女"></option>
  188.           </datalist>
  189.         </div>
  190.         <div class="slogan">
  191.           <label for="slogan">个性签名</label>
  192.           <textarea name="slogan" id="slogan" cols="30" rows="10"></textarea>
  193.         </div>
  195.         <br />
  196.         <button type="submit">注册</button>
  197.       </form>
  198.     </main>
  199.   </body>
  200. </html>

更多相关文章

  1. HTML表格实战：制作商品信息表格
  2. 0629作业
  3. HTML表格案例《商品信息表》
  4. 商品出售信息表
  5. 手机商品信息表
  6. 表格信息练习
  7. 图书商品信息表
  8. 商品信息表
  9. 学习第二天0629

随机推荐

  1. Android(安卓)UI系列-----CheckBox和Radi
  2. Android 带有角标的imageview，类似于qq、
  3. android 5.0多用户支持
  4. 【Android 界面效果12】EditText中的多行
  5. Android中做一个无标题窗口
  6. 使用eclipse打开android_sdk自带的例子
  7. Android UI学习 - ListView (android.R.l
  8. android之照相、相冊裁剪功能的实现过程
  9. Android(安卓)8.1 FreeForm切换显示异常
  10. android中调试之日志