在注册页面中使用常见HTML标签
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h2>用户注册</h2> <form action="verify.php" method="post" style="display: grid; gap: 10px"> <!-- 文本框 --> <div> <label for="username_id">用户名：</label> <!-- label标签的for属性与input的id属性对应，点击label后input得到光标 --> <input type="text" name="username" id="username_id" value="admin" placeholder="至少3位" required /> </div> <!-- 密码框 --> <div> <!-- required表示不能为空 --> <label for="password">密码：</label> <input type="password" name="password" placeholder="至少8位" id="password" required /> <button onclick="showPassword(this,this.form.password)" type="button"> 查看 </button> </div> <!-- 邮箱 --> <div> <label for="email">邮箱：</label> <input type="email" name="email" id="email" /> </div> <!-- 单选按钮 --> <div> <!-- name值要一样才会排他，单选按钮不想input一样由用户输入值，所以要设置value属性; checked是默认选择项--> <label for="secretSex">性别：</label> <input type="radio" name="gender" id="male" value="male" checked /><label for="male">男</label> <input type="radio" name="gender" id="female" value="female" /><label for="female" >女</label > <input type="radio" name="gender" id="secretSex" value="secretSex" /><label for="secretSex">保密</label> </div> <div> <!-- name值需要设置位数组，就是加一对中括号[] --> <label>爱好：</label> <input type="checkbox" name="hobby[]" id="game" value="game" checked /><label for="game">游戏</label> <input type="checkbox" name="hobby[]" id="travel" value="travel" /><label for="travel">旅游</label> <input type="checkbox" name="hobby[]" id="shoot" value="shoot" checked /><label for="shoot">摄影</label> </div> <!-- 下拉列表 --> <div style="width: 300px"> <select name="level" id="" style="width: 100%"> <option value="1">铜牌会员</option> <option value="2">银牌会员</option> <option value="3" selected>金牌会员</option> </select> </div> <button>提交</button> <button type="reset">重置是恢复到默认值</button> <!-- button标签比较新，不要再用<input type="submit" /> --> </form> <h3>复选项做菜单</h3> <div class="forkmenu"> <label for="menu">菜单</label> <input type="checkbox" id="menu" /> <ul> <li><a href="">menu1</a></li> <li><a href="">menu2</a></li> <li><a href="">menu3</a></li> </ul> <p>菜单项一</p> <p>菜单项二</p> <p>菜单项三</p> </div> <style> .forkmenu input[type="checkbox"] { display: none; } .forkmenu input[type="checkbox"]:checked ~ ul ~ p { display: none; } </style> <script> function showPassword(btn, ele) { if (ele.type === "password") { ele.type = "text"; btn.textContent = "隐藏"; } else { ele.type = "password"; btn.textContent = "显示"; } } </script> </body></html>
