007第7课：细说表单（重点）+后台框架
程序员文章站
2022-05-01 22:22:01
...
<!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>细说表单（重点）</title></head><br><h2>用户注册</h2><!-- form + input + select +button ... --><!-- <form action="verify.php" method="post"><input type="" name="username" value="admin" /><input type="password" name="password" value="" /><button>提交</button></form> --><!-- http://127.0.0.1:5500/20211222/verify.php?username=admin --><!-- http://127.0.0.1:5500/20211222/verify.php?username=admin&password=12345 --><!-- 文本框 --><form action="verify.php" method="post" style="display: grid;gap:10px"><div><label for="username">用户名：</label><!-- label的for属性和input的id属性必须一致 --><input type="text" name="username" id="username" value="" placeholder="至少8位" required /><!-- placeholder="至少8位" required 提示位数，以及强制填写才能提交 --></div><!-- 密码框 --><div><label for="password">密码：</label><!-- label的for属性和input的id属性必须一致 --><input type="password" name="password" id="password" value="" placeholder="数字+字母，至少6位" required /><!-- placeholder="至少8位" required 提示位数，以及强制填写才能提交 --><button onclick="showPassword(this,this.form.password)" type="button">查看</button></div><!-- 邮箱 --><div><label for="email">密码：</label><!-- label的for属性和input的id属性必须一致 --><input type="email" name="email" id="email" value="" placeholder="类似：xxx@gmail.com" required /><!-- placeholder="至少8位" required 提示位数，以及强制填写才能提交 --></div><!-- 单选按钮 --><!-- div>label+input*2 --><div><label for="">性别</label><input type="radio" name="gender" id="" value="male"><label for="male">男</label><input type="radio" name="gender" id="" value="female"><label for="female">女</label></div><!-- 复选框 --><div><lable>爱好：</lable><input type="checkbox" name="hobby[0]" id="game"><lable for="game">游戏</lable><input type="checkbox" name="hobby[1]" id="trave"><lable for="trave">旅游</lable><input type="checkbox" name="hobby[2]" id="shoot"><lable for="shoot">摄影</lable></div><!-- 默认提交，重置 --><button></button><button></button><button></button><!-- 内联框架和多媒体 --><!-- 内联标签：画中画 --><a href="https://map.baidu.com/search/%E4%B8%9C%E8%8E%9E%E5%B8%82/@12663667,2618456.75,12z?querytype=s&wd=%E4%B8%9C%E8%8E%9E%E5%B8%82&c=119&provider=pc-aladin&pn=0&device_ratio=1&da_src=shareurl" target="map">东莞市</a><iframe src="" frameborder="1" width="500" height="500" name="map"></iframe><!-- 多媒体 --><video width="" height="" controls></video><button>提交</button></form><script>function showPassword(btn, ele) {if (ele.type === "password") {ele.type = "text";btn.textContent = "隐藏";} else {ele.type = "password";btn.textContent = "显示";}}</script></body></html>