![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>表单，文本框，单选按钮，复选框按钮，下拉列表，隐藏域，文件域，占位符</title></head><body><h3 class="title">用户注册</h3><!-- action: 处理表单的程序 --><!-- method: 表单提交类型默认是GET：数据直接放在url地址中(适合少量和不敏感数据发送)POST: 表单数据放在请求体中（大量和敏感数据发送） --><form action="" method="POST" class="register"><!-- ---------- 1. --------- 单行文本框 --><!-- 账号加label标签是为了"账号"和文本框的焦点绑定提高体验控件的绑定是通过 for 和 id 属性值绑定 --><label for="username">账号：</label><!-- type:控件类型 --><!-- name:控件中的name是程序读取的变量名。而class是css用来做读取的变量名 --><!-- value: 数据的值 --><!-- 控件的三个基本属性：type,name,value --><!-- required: 必选属性 --><!-- placeholder: 提示信息 --><!-- 通用文本框 --><input type="text" id="username" name="username" value="" placeholder="用户名" required> </input><label for="email">邮箱:</label><!-- 邮箱文本框 --><input type="text" id="email" name="email" value="" placeholder="demo@email.com" required> </input><label for="password">密码:</label><!-- 密明/非明文文本框 --><input type="password" id="password" name="password" value="" placeholder="不少于6个字符" required> </input><!-- ---------- 2. --------- 单选按钮与复选框按钮--><!-- 单选按钮 --><!-- label for="female" 表示点击性别会选中female 却焦点绑定 --><label for="female">性别:</label><div><!-- 一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性也就是可能变成多组单选按钮了 --><!-- checked: 默选中 --><input type="radio" name="gender" value="male" id="male" /> <label for="male">男</label><input type="radio" name="gender" value="female" id="female" /> <label for="female">女</label><input type="radio" name="gender" value="secret" id="secret" checked/> <label for="secret">保密</label></div><!-- 复选框按钮 --><label for="#">兴趣:</label><div><!-- 复选框的name属性值应该写成数组的格式名称，这样才确保服务器可以接收到一组值 --><!-- checked: 默选中 --><input type="checkbox" name="hobby[]" value="game" id="game" /> <label for="game">游戏</label><input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label><input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label><input type="checkbox" name="hobby[]" value="program" id="program" checked/> <label for="program">编程</label></div><!-- ---------- 3. --------- 下拉列表/下拉框--><!-- select 和 option 组合成 下拉列表 --><!-- selected 是默选中 --><label for="edu">学历:</label><!-- <select name="edu" id="edu" multiple size="2"> </select> --><select name="edu" id="edu"><option value="1">初中</option><option value="2">高中</option><option value="3" selected>本科</option><option value="4">研究生</option><!-- label 属性的优先级大于option内部的文本 --><!-- <option value="5" label="老司机">自学成材</option> --></select><!-- ---------- 4. --------- 隐藏域--><!-- 隐藏域 --><!-- 上传文件要注意二点：1.请求类型必须是: POST2.将表单数据编码设置为：multipart/form-data 却二进制编码 --><label for="user-pic">头像:</label><!-- 隐藏域，在前端页面看不到的，它的值供后端处理用 --><input type="hidden" name="MAX_FILE_SIZE" value="10240"><input type="file" name="user_pic" id="user-pic" /><!-- 头像占位符 --><div class="user-pic" style="grid-column: span 2"></div><label for="user-resume">简历:</label><!-- 隐藏域，在前端页面看不到的，它的值供后端处理用 --><input type="hidden" name="MAX_FILE_SIZE" value="102400"><input type="file" name="user_resume" id="user-resume" /><!-- 简历占位符 --><div class="user-resume" style="grid-column: span 2"></div><!-- ---------- 5. --------- 文件域--><label for="comment">备注:</label><textarea name="comment" id="comment" cols="30" rows="5"></textarea><!-- --------------------------------- --><!-- 提交按钮 --><button>提交</button></form></body></html>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>表单控件的form属性</title><style>.box {width: 18em;display: grid;grid-template-columns: 60px 180px;place-content: center;gap: 1em;border: 1px solid #000000;padding: 1em;margin: auto;}.title{text-align: center;}.box button {grid-column: span 2;}</style></head><body><h3 class="title">用户注册</h3><form action="check.php" method="GET" id="register"><div class="box"><!-- 使用form属性，将控件与它所属的表单进行关联/绑定 --><label for="username">账号：</label><input type="text" form="register" name="username" id="username" placeholder="不能为空" /><label for="email">邮件：</label><input type="text" form="register" name="email" id="email" placeholder="demo@email.com" form="register"/><label for="password">账号：</label><input type="password" form="register" name="password" id="password" placeholder="至少8位" form="register"/><button>提交</button></div></form><!-- 尽管form属性可以实现将控件写到任何地方，仍然能够获取到值，但不要这样做第一影布局，第二代码混乱，第三有的浏览器不支持但是，用在js中，获取数据将会变得非常的方便（所以一般是绑定form属性并放在 form标签里面） --></body></html>
