欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

用HTML标签写常见的注册页面

程序员文章站 2022-04-21 10:50:39
...

在注册页面中使用常见HTML标签

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <h2>用户注册</h2>
    11. 

    12. 

  12.     <form action="verify.php" method="post" style="display: grid; gap: 10px">
    13. 

  13.       <!-- 文本框 -->
    14. 

  14.       <div>
    15. 

  15.         <label for="username_id">用户名：</label>
    16. 

  16.         <!-- label标签的for属性与input的id属性对应，点击label后input得到光标 -->
    17. 

  17.         <input
    18. 

  18.           type="text"
    19. 

  19.           name="username"
    20. 

  20.           id="username_id"
    21. 

  21.           value="admin"
    22. 

  22.           placeholder="至少3位"
    23. 

  23.           required
    24. 

  24.         />
    25. 

  25.       </div>
    26. 

    27. 

  27.       <!-- 密码框 -->
    28. 

  28.       <div>
    29. 

  29.         <!-- required表示不能为空 -->
    30. 

  30.         <label for="password">密码：</label>
    31. 

  31.         <input
    32. 

  32.           type="password"
    33. 

  33.           name="password"
    34. 

  34.           placeholder="至少8位"
    35. 

  35.           id="password"
    36. 

  36.           required
    37. 

  37.         />
    38. 

  38.         <button onclick="showPassword(this,this.form.password)" type="button">
    39. 

  39.           查看
    40. 

  40.         </button>
    41. 

  41.       </div>
    42. 

    43. 

  43.       <!-- 邮箱 -->
    44. 

  44.       <div>
    45. 

  45.         <label for="email">邮箱：</label>
    46. 

  46.         <input type="email" name="email" id="email" />
    47. 

  47.       </div>
    48. 

    49. 

  49.       <!-- 单选按钮 -->
    50. 

  50.       <div>
    51. 

  51.         <!-- name值要一样才会排他，单选按钮不想input一样由用户输入值，所以要设置value属性; checked是默认选择项-->
    52. 

  52.         <label for="secretSex">性别：</label>
    53. 

  53.         <input
    54. 

  54.           type="radio"
    55. 

  55.           name="gender"
    56. 

  56.           id="male"
    57. 

  57.           value="male"
    58. 

  58.           checked
    59. 

  59.         /><label for="male">男</label>
    60. 

  60.         <input type="radio" name="gender" id="female" value="female" /><label
    61. 

  61.           for="female"
    62. 

  62.           >女</label
    63. 

  63.         >
    64. 

  64.         <input
    65. 

  65.           type="radio"
    66. 

  66.           name="gender"
    67. 

  67.           id="secretSex"
    68. 

  68.           value="secretSex"
    69. 

  69.         /><label for="secretSex">保密</label>
    70. 

  70.       </div>
    71. 

    72. 

  72.       <div>
    73. 

  73.         <!-- name值需要设置位数组，就是加一对中括号[] -->
    74. 

  74.         <label>爱好：</label>
    75. 

  75.         <input
    76. 

  76.           type="checkbox"
    77. 

  77.           name="hobby[]"
    78. 

  78.           id="game"
    79. 

  79.           value="game"
    80. 

  80.           checked
    81. 

  81.         /><label for="game">游戏</label>
    82. 

  82.         <input
    83. 

  83.           type="checkbox"
    84. 

  84.           name="hobby[]"
    85. 

  85.           id="travel"
    86. 

  86.           value="travel"
    87. 

  87.         /><label for="travel">旅游</label>
    88. 

  88.         <input
    89. 

  89.           type="checkbox"
    90. 

  90.           name="hobby[]"
    91. 

  91.           id="shoot"
    92. 

  92.           value="shoot"
    93. 

  93.           checked
    94. 

  94.         /><label for="shoot">摄影</label>
    95. 

  95.       </div>
    96. 

    97. 

  97.       <!-- 下拉列表 -->
    98. 

  98.       <div style="width: 300px">
    99. 

  99.         <select name="level" id="" style="width: 100%">
    100. 

  100.           <option value="1">铜牌会员</option>
    101. 

  101.           <option value="2">银牌会员</option>
    102. 

  102.           <option value="3" selected>金牌会员</option>
    103. 

  103.         </select>
    104. 

  104.       </div>
    105. 

    106. 

  106.       <button>提交</button>
    107. 

  107.       <button type="reset">重置是恢复到默认值</button>
    108. 

  108.       <!-- button标签比较新，不要再用<input type="submit" /> -->
    109. 

  109.     </form>
    110. 

    111. 

  111.     <h3>复选项做菜单</h3>
    112. 

  112.     <div class="forkmenu">
    113. 

  113.       <label for="menu">菜单</label>
    114. 

  114.       <input type="checkbox" id="menu" />
    115. 

  115.       <ul>
    116. 

  116.         <li><a href="">menu1</a></li>
    117. 

  117.         <li><a href="">menu2</a></li>
    118. 

  118.         <li><a href="">menu3</a></li>
    119. 

  119.       </ul>
    120. 

  120.       <p>菜单项一</p>
    121. 

  121.       <p>菜单项二</p>
    122. 

  122.       <p>菜单项三</p>
    123. 

  123.     </div>
    124. 

  124.     <style>
    125. 

  125.       .forkmenu input[type="checkbox"] {
    126. 

  126.         display: none;
    127. 

  127.       }
    128. 

  128.       .forkmenu input[type="checkbox"]:checked ~ ul ~ p {
    129. 

  129.         display: none;
    130. 

  130.       }
    131. 

  131.     </style>
    132. 

    133. 

  133.     <script>
    134. 

  134.       function showPassword(btn, ele) {
    135. 

  135.         if (ele.type === "password") {
    136. 

  136.           ele.type = "text";
    137. 

  137.           btn.textContent = "隐藏";
    138. 

  138.         } else {
    139. 

  139.           ele.type = "password";
    140. 

  140.           btn.textContent = "显示";
    141. 

  141.         }
    142. 

  142.       }
    143. 

  143.     </script>
    144. 

  144.   </body>
    145. 

  145. </html>
    146.

用HTML标签写常见的注册页面

上一篇： javascript字母大小写转换的4个函数详解_javascript技巧

下一篇： 怎么画好人体动态？漫画人体结构绘画入门

推荐阅读