[TOC] >[info]HTML 表单用于搜集不同类型的用户输入,是Web浏览器和Web服务器进行通信的最常用的手段，即通 过表单，浏览器不仅能从Web服务器中获得信息，而且还能向Web 服务器反馈信息。HTML为此提供了表单(Form)元素来设计和实现这种交互界面。 ## 常用表单元素 >[info] 表单形成的交互界面上有许多元素，负责收集用户输入 的各种信息，这些元素一般称为控件。 * 单行/多行文本框 * 复选框 * 单选按钮 * 文件域 * 隐藏域 * 下拉菜单 * 提交按钮 * 重置按钮 ~~~ <form method="post" action=""> <!--单行文本--> <input type="text" /> <!--密码--> <input type="password" /> <!--单选框--> <input type="radio" /> <!--多选框--> <input type="checkbox" /> <!--隐藏域--> <input type="hidden" /> <!--提交按钮--> <input type="submit" /> <!--文件域--> <input type="file" /> <!--重置按钮--> <input type="reset" /> <!--按钮--> <input type="button"/> <!--文本区域--> <textarea></textarea> <!--下拉框--> <select> <option>下拉1</option> <option>下拉2</option> </select> </form> ~~~ **效果如下：** <form method="post" action=""> <!--单行文本--> <input type="text" /> <!--密码--> <input type="password" /> <!--单选框--> <input type="radio" /> <!--多选框--> <input type="checkbox" /> <!--隐藏域--> <input type="hidden" /> <!--提交按钮--> <input type="submit" /> <!--文件域--> <input type="file" /> <!--重置按钮--> <input type="reset" /> <!--按钮--> <input type="button" value="按钮"> <!--文本区域--> <textarea></textarea> <!--下拉框--> <select> <option>下拉1</option> <option>下拉2</option> </select> </form> * * * * * ### `input`标签共有的一些属性 * type 控件的类型 * value 指定默认值 * name 用于服务器获取数据 ### `radio`单选和`checkbox`多选 * checked 默认的选中项 * value 该选项被选中后提交到服务器的值 * name 用于服务器获取数据 ### ` select`元素（下拉列表） >[info] HTML是通过`<select>`和`<option>`标记来定义输入列表框的。列表框标记`<select>`是成对出现标记，首标记`<select>`和尾标记`</select>` 之间的内容就是一个列表框的内容。和`<option>`标记用于定义列表框中的各个选项 ~~~ <select name="" id="" size="" multiple=""> <option value="">下拉1</option> <option value="">下拉2</option> <option value="" selected="">...</option> <option value="">下拉n</option> </select> ~~~ **例子解析** * `name`用于服务器获取数据 * `sizesize`属性是可选的，用于定义列表框的长度。size属性的 参数值是数字，表示显示在列表框中的选项数目。当size属性的参数 值小于列表框中的列表项数目时，浏览器会为该列表框添加滚动条， 用户可以使用滚动条来查看所有的选项。size属性的缺省值为1。 *` multiple`表示可以多选，如果不设置本属性，那么只能单选；按 Ctrl可以多选. 用法：multiple="multiple" * `value`当该项被选中并提交后，web浏览器 传送给服务器的数据。缺省时，浏览器将传送选项的内容 * `selected`用来指定选项的初始状态，表示该选项在初始时 是被选中的。 ## label标签 >[info] 用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上 ~~~ <p>请点击文本标记之一，就可以触发相关控件：</p> <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> ~~~ 效果如下： <p>请点击文本标记之一，就可以触发相关控件：</p> <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> **例子解析** * `for`规定` label` 绑定到哪个表单元素。 * `id`需要绑定的元素加个标识。 >[danger]**作业：**把所有常用的表单都练习几遍，理清不同类型表单的作用。