html预习,请老师审批,

  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>
  61. <div>
  62. <label for="r">性别:</label>
  63. <input type="radio" id="n" name="kaichao"><label for="n"></label>
  64. <input type="radio" id="j" name="kaichao"><label for="j"></label>
  65. <input type="radio" checked id="r" name="kaichao"><label for="r">人妖</label>
  66. </div>
  67. <div id="ah">
  68. <label for="dm">爱好:</label>
  69. <input type="checkbox" id="ch" name="aihao[]"><label for="ch">吃喝</label>
  70. <input type="checkbox" id="hj" name="aihao[]"><label for="hj">喝酒</label>
  71. <input type="checkbox" checked id="dm" name="aihao[]"><label for="dm">写代码</label>
  72. </div>
  73. <div>
  74. <label for="4">选择服务</label>
  75. <select name="level" id="" >
  76. <option value="1">铜牌会员</option>
  77. <option value="2">银牌会员</option>
  78. <option value="3" selected>金牌会员</option>
  79. <option value="4" id="zs">钻石会员</option>
  80. </select>
  81. </div>
  82. <div>
  83. <label for="">搜索:</label>
  84. <input type="search" name="search" list="kai">
  85. <datalist id="kai">
  86. <option value="html"></option>
  87. <option value="css"></option>
  88. <option value="javascript"></option>
  89. <option value="js"></option>
  90. </datalist>
  91. </div>
  92. <div>
  93. <button>注册</button>
  94. </div>
  95. </form>
  96. </fieldset>
  97. </body>
  98. </html>

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