![[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
<button>
| 属性 | 说明 |
|---|---|
| type | 表明按钮的功能：submit提交，reset重置，button按钮 |
| name | 按钮名称 |
| value | 按钮初始值，通过 js 修改 |
| form | 值填写表单名，所属表单 |
| formaction | 该按钮提交表单到指定脚本 |
| form* | 动态设置 form 的属性值 |
<select>（下拉列表）+ <optgroup>（分组） + <option>（选项）组合实现
| 属性 | 说明 |
|---|---|
| name | 参数名字/对应脚本的变量名 |
| multiple | 多选（布尔） |
| size | 允许同时显示的列表项目数量 |
| 事件 | 说明 |
|---|---|
| onchange | 下拉列表选项值发生变化触发 |
| onclick | 点击就会触发 |
| 属性 | 说明 |
|---|---|
| label | 列表分组名称 |
| 属性 | 说明 |
|---|---|
| value | 参数值 |
| label | 选项文本值 |
| selected | 被选中（布尔） |
<textarea>
| 属性 | 说明 |
|---|---|
| cols | 可视宽度 |
| rows | 可输入行数 |
| name | 参数名称 |
| form | 所属表单 |
| minlength | 最小字符长度 |
| maxlength | 最大字符长度 |
| palceholder | 提示信息占位符 |
| wrap | 换行方式：hard 或者 soft |
| autofocus | 自动获取焦点（布尔） |
| autocomplete | 自动完成（布尔） |
| 事件 | 说明 |
|---|---|
| onclick | 点击触发 |
| onchange | 文本被修改触发 |
| onselect | 文本被选中触发 |
<fieldset>
只有一个表单分组管理<legend>用来设置分组标题
| 属性 | 说明 |
|---|---|
| name | 分组名称 |
| form | 所属表单 |
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>html标签应用练习</title><style type="text/css">.main {display: flex;}.left {width: 100px;background-color: rgb(211, 241, 101);}.right {width：700px;background-color: lightyellow;}</style></head><body><!-- 标题 --><h3>HTML标签运用</h3><header><nav id="nav"><a href="" class="">首页</a><a href="" class="">关于我们</a><a href="" class="">联系我们</a><a href="" class="">需求提交</a></nav></header><main class=" main"><div class="left"><a href="tel:+86 18800888800">客服热线</a><br><a href="mailto:112233@qq.com">发送邮件</a></div><div class="right"><form id="need"></form><fieldset form="need"><legend>用户访问信息</legend><section><input type="text" name="user" placeholder="访问用户" form="need" /><input type="password" name="psw" placeholder="访问密码" form="need" /><input type="radio" name="sf" id="ask" value="ask" form="need" /><label for="ask">询价</label><input type="radio" name="sf" id="answer" value="answer" form="need" /><label for="answer">报价</label></section></fieldset><fieldset form="need"><legend>产品信息</legend><section><div class=""><label>产品类型：</label><input type="checkbox" name="hobby[]" id="cc01" form="need" /><label for="cc01">儿童玩具</label><input type="checkbox" name="hobby[]" id="cc02" form="need" /><label for="cc02">塑料收纳</label><input type="checkbox" name="hobby[]" id="cc03" form="need" /><label for="cc03">食品储存</label></div><div class=""><p>发货仓库:<select name="ck" id="" onchange="alert(this.value)" form="need"><optgroup label="亚洲"><option value="k001" form="need">中国上海(默认）</option><option value="k002" form="need">日本大阪</option><option value="k003" form="need">菲律宾</option></optgroup><optgroup label="非洲"><option value="k004" form="need">南苏丹</option><option value="k005" form="need">北非</option><option value="k006" form="need">刚果金</option></optgroup></select></p></div></section><section><label for="">上传订货表</label><input type="file" form="need"><a href="dd.xls" target="_blank">下载订货表样本</a></section></fieldset><fieldset form="need"><legend>其他需求说明</legend><textarea name="other" id="" cols="60" rows="10" maxlength="300" wrap="soft" placeholder="不超过300字符"form="need"></textarea></fieldset></div><div class=""> <button type="submit" form="need" formaction="dd.php" formmethod="POST"formtarget="_BLANK">提交</button></div></main><footer><section><div class=""><a href="">关于我们</a><a href="">联系我们</a></div><div class="">本站版权归 作者 所有</div></section></footer><main></main></body></html>