在注册页面中使用常见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.   </head>
  9.   <body>
  10.     <h2>用户注册</h2>
  12.     <form action="verify.php" method="post" style="display: grid; gap: 10px">
  13.       <!-- 文本框 -->
  14.       <div>
  15.         <label for="username_id">用户名：</label>
  16.         <!-- label标签的for属性与input的id属性对应，点击label后input得到光标 -->
  17.         <input
  18.           type="text"
  19.           name="username"
  20.           id="username_id"
  21.           value="admin"
  22.           placeholder="至少3位"
  23.           required
  24.         />
  25.       </div>
  27.       <!-- 密码框 -->
  28.       <div>
  29.         <!-- required表示不能为空 -->
  30.         <label for="password">密码：</label>
  31.         <input
  32.           type="password"
  33.           name="password"
  34.           placeholder="至少8位"
  35.           id="password"
  36.           required
  37.         />
  38.         <button onclick="showPassword(this,this.form.password)" type="button">
  39.           查看
  40.         </button>
  41.       </div>
  43.       <!-- 邮箱 -->
  44.       <div>
  45.         <label for="email">邮箱：</label>
  46.         <input type="email" name="email" id="email" />
  47.       </div>
  49.       <!-- 单选按钮 -->
  50.       <div>
  51.         <!-- name值要一样才会排他，单选按钮不想input一样由用户输入值，所以要设置value属性; checked是默认选择项-->
  52.         <label for="secretSex">性别：</label>
  53.         <input
  54.           type="radio"
  55.           name="gender"
  56.           id="male"
  57.           value="male"
  58.           checked
  59.         /><label for="male">男</label>
  60.         <input type="radio" name="gender" id="female" value="female" /><label
  61.           for="female"
  62.           >女</label
  63.         >
  64.         <input
  65.           type="radio"
  66.           name="gender"
  67.           id="secretSex"
  68.           value="secretSex"
  69.         /><label for="secretSex">保密</label>
  70.       </div>
  72.       <div>
  73.         <!-- name值需要设置位数组，就是加一对中括号[] -->
  74.         <label>爱好：</label>
  75.         <input
  76.           type="checkbox"
  77.           name="hobby[]"
  78.           id="game"
  79.           value="game"
  80.           checked
  81.         /><label for="game">游戏</label>
  82.         <input
  83.           type="checkbox"
  84.           name="hobby[]"
  85.           id="travel"
  86.           value="travel"
  87.         /><label for="travel">旅游</label>
  88.         <input
  89.           type="checkbox"
  90.           name="hobby[]"
  91.           id="shoot"
  92.           value="shoot"
  93.           checked
  94.         /><label for="shoot">摄影</label>
  95.       </div>
  97.       <!-- 下拉列表 -->
  98.       <div style="width: 300px">
  99.         <select name="level" id="" style="width: 100%">
  100.           <option value="1">铜牌会员</option>
  101.           <option value="2">银牌会员</option>
  102.           <option value="3" selected>金牌会员</option>
  103.         </select>
  104.       </div>
  106.       <button>提交</button>
  107.       <button type="reset">重置是恢复到默认值</button>
  108.       <!-- button标签比较新，不要再用<input type="submit" /> -->
  109.     </form>
  111.     <h3>复选项做菜单</h3>
  112.     <div class="forkmenu">
  113.       <label for="menu">菜单</label>
  114.       <input type="checkbox" id="menu" />
  115.       <ul>
  116.         <li><a href="">menu1</a></li>
  117.         <li><a href="">menu2</a></li>
  118.         <li><a href="">menu3</a></li>
  119.       </ul>
  120.       <p>菜单项一</p>
  121.       <p>菜单项二</p>
  122.       <p>菜单项三</p>
  123.     </div>
  124.     <style>
  125.       .forkmenu input[type="checkbox"] {
  126.         display: none;
  127.       }
  128.       .forkmenu input[type="checkbox"]:checked ~ ul ~ p {
  129.         display: none;
  130.       }
  131.     </style>
  133.     <script>
  134.       function showPassword(btn, ele) {
  135.         if (ele.type === "password") {
  136.           ele.type = "text";
  137.           btn.textContent = "隐藏";
  138.         } else {
  139.           ele.type = "password";
  140.           btn.textContent = "显示";
  141.         }
  142.       }
  143.     </script>
  144.   </body>
  145. </html>

更多相关文章

  1. Android之UI学习篇十：使用TabHost实现微博客户端界面
  2. Android利用SAX解析XML文件
  3. Android(安卓)关于android:foreground设置无效的问题
  4. Android中资源管理机制详细分析
  5. Android(安卓)默认Tab标签大小及间距修改
  6. original-package
  7. 【Android】设置tabhost位于底部的三种方法
  8. 使用android快速开发框架afinal的FinalDb操作android sqlite数据
  9. Android(安卓)属性动画原理与DataBinding

随机推荐

  1. 条码扫描二维码扫描——ZXing android 源
  2. (详解)Eclipse3.6搭建 Android 2.2 开发
  3. 亚马逊面向开发人员推出Android应用商店
  4. Android面试及开发忠告
  5. 2011届 实训总结
  6. Android的三个阶段
  7. [置顶] 【Android】开源　闲暇(Leisure)
  8. ClassLoader解析——Android篇
  9. Android RIL
  10. Android 开发中的日常积累