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.         header h3 {
  10.             color: royalblue;
  11.         }
  12.         fieldset legend {
  13.             color:red;
  14.         }
  15.         div label[for="zhanghao"] {
  16.             color: blue;
  17.         }
  18.         div > .yyxx {
  19.             color: blueviolet;
  20.         }
  21.         .sfzh + div {
  22.             color: blueviolet;
  23.         }
  24.         #ah ~ div {
  25.             color: blue;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <header>
  31.         <h3>请先注册账号</h3>
  32.     </header>
  33.     <fieldset>
  34.         <legend>请注册一个账号</legend>
  35.     <form action="">
  36.         <div>
  37.             <label for="zhanghao" >账号:</label>
  38.             <input placeholder="请输入账号" type="text" required id="zhanghao" autofocus>
  39.         </div>
  40.         <div>
  41.             <label for="mm">密码:</label>
  42.             <input  type="password" id="mm">
  43.             <button type="button" required onclick="document.querySelector('#mm').type='text'">显示密码</button>
  44.         </div>
  45.         <div>
  46.             <label for="email" class="yyxx">邮箱:</label>
  47.             <input value="请输入邮箱" type="email" required id="email">
  48.         </div>
  49.         <div>
  50.             <label for="shoujihao">手机号:</label>
  51.             <input type="text" id="shoujihao">
  52.         </div>
  53.         <div class="sfzh">
  54.             <label for="shenfenzheng">身份证号:</label>
  55.             <input type="text" id="shenfenzheng">
  56.         </div>
  57.         <div>
  58.             <label for="qq">QQ:</label>
  59.             <input type="text" id="qq">
  60.         </div>
  65.         <div>
  66.             <label for="r">性别:</label>
  67.             <input type="radio" id="n" name="kaichao"><label for="n">男</label>
  68.             <input type="radio" id="j" name="kaichao"><label for="j">女</label>
  69.             <input type="radio" checked id="r" name="kaichao"><label for="r">人妖</label>
  70.         </div>
  72.         <div id="ah">
  73.             <label for="dm">爱好:</label>
  74.             <input type="checkbox" id="ch" name="aihao[]"><label for="ch">吃喝</label>
  75.             <input type="checkbox" id="hj" name="aihao[]"><label for="hj">喝酒</label>
  76.             <input type="checkbox" checked id="dm" name="aihao[]"><label for="dm">写代码</label>
  77.         </div>
  82.         <div>
  83.             <label for="4">选择服务</label>
  84.             <select  name="level" id="" >
  85.                 <option value="1">铜牌会员</option>
  86.                 <option value="2">银牌会员</option>
  87.                 <option value="3" selected>金牌会员</option>
  88.                 <option value="4" id="zs">钻石会员</option>
  89.             </select>
  90.         </div>
  93.         <div>
  94.             <label for="">搜索:</label>
  95.             <input type="search" name="search" list="kai">
  96.             <datalist id="kai">
  97.                 <option value="html"></option>
  98.                 <option value="css"></option>
  99.                 <option value="javascript"></option>
  100.                 <option value="js"></option>
  101.             </datalist>
  102.         </div>
  107.         <div>
  108.             <button>注册</button>
  109.         </div>
  110.     </form>
  111.     </fieldset>
  112. </body>
  113. </html>

老师作业已完成，请求审批，

更多相关文章

  1. html前端常用控件的用法
  2. FROM表单实践以及心得
  3. 表单的制作
  4. 0630作业
  5. 注册表单、基本选择器及上下文选择器
  6. html常用表单及CSS选择器练习
  7. php 登录注册
  8. 情感类短视频怎么样吸粉是最快的？
  9. 快递100集成多家快递公司同城配送账号授权接口案例代码

随机推荐

  1. GIS / Gdal / OSGeos在Windows上的django
  2. yield表达式, 四种形式
  3. 判断变量是否是DataFrame 或者 Series
  4. Python学习之路：函数的非固定参数
  5. python编程从入门到实战1-3章
  6. 简谈-如何将图片下载到本地
  7. [D]用python提取多段字符串该怎么写正则
  8. Python实现快速傅里叶变换（FFT）
  9. Python出现Could not find a version tha
  10. python之选课系统详解[功能未完善]