点击此处可以看到作业呈现效果，在页面的最后也有本链接！
按钮
<button>
| 属性 |
说明 |
| type |
表明按钮的功能：submit提交，reset重置，button按钮 |
| name |
按钮名称 |
| value |
按钮初始值，通过 js 修改 |
| form |
值填写表单名，所属表单 |
| formaction |
该按钮提交表单到指定脚本 |
| form* |
动态设置 form 的属性值 |
下拉列表
<select>（下拉列表）+ <optgroup>（分组） + <option>（选项）组合实现
| 属性 |
说明 |
| name |
参数名字/对应脚本的变量名 |
| multiple |
多选（布尔） |
| size |
允许同时显示的列表项目数量 |
| 事件 |
说明 |
| onchange |
下拉列表选项值发生变化触发 |
| onclick |
点击就会触发 |
| 属性 |
说明 |
| 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>
呈现效果链接，辛苦老师了
