目? ? 录
一、什么是表单？
什么是表单？像下面这种就叫做表单，有点问卷的那种：
表单的目的就是为了收集信息。最常见与注册界面。
一个完整的表单有三部分，分别为表单域、表单控件和提示信息。?
二、表单域
表单域就是包含表单的区域。
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
会把它范围内的表单元素信息提交给服务器。
2.1 表单域语法
<form action=“url地址”? method=“提交方式”? name = “表单域的名称”>
? ? ? ? 各种表单元的元素控件
</form>常用属性：
| 属性 | 属性值 | 作用 |
| action | url地址 | 用于指定接受并处理表单数据的服务器的url地址 |
| method | get/post | 用于设置表单数据的提交方式，取值为get或者post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
目前并不需要用表单服务器提交数据，只需写上form标签即可，学习服务器编程阶段会用到。
三、表单控件
主要有三个方面：
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
3.1? input元素
<input>?元素是最重要的表单元素。
<input? type="属性值" />
<input />标签为单标签
<input> 元素有很多形态，根据不同的?type?属性：
除了type属性，还有许多其他属性，常用属性如下：
3.1.1??input之type属性文本框和密码框
代码：
效果：
3.1.2?input之type属性单选框和复选框
单选框：只能选一个，选项之间互斥，type="radio"
复选框：可以同时选很多，type="checkbox"
注意：单选框或者复选框如果是同一组，则必须拥有相同的名字。
3.1.3? input之name和value属性
name属性：
为了实现单选的互斥性，需要用到name这个属性，这里性别按钮必须拥有相同的名字，才可以实现多选一：
<!-- radio 单选按钮，可以实现多选一 -->
<!-- 为了实现单选的互斥性，需要用到name这个属性，这里性别按钮必须拥有相同的名字，才可以实现多选一 -->
性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex"> 人妖<input type="radio" name="sex"> <br>
<!-- checkbox 复选框 复选框也应该有相同的name -->
爱好：吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby">打豆豆<input type="checkbox" name="hobby">
value属性：
除了name之外，还可以增加?value
value才是真的“值”，后台人员可以接受到，而上面写的那些只是前端显示的而已，并不是真正意义的选项结果。因而，对于每个元素有必要的话都需要写上value。
checked属性：?checked="checked"
规定input元素首次加载时默认选的值。
例如默认选择男：?
maxlength属性：
一般用于文本框，用于设置用户最多可以输入多少字符
3.1.4??input之type属性提交和重置按钮
提交按钮： type = “submit”
点击提交按钮，可以把表单域form里的表单元素 里面的值 提交给后台服务器， 可以设置一个value来更改显示的文字。
?
重置按钮： type="reset"
点击重置按钮，可以把表单域form里的表单元素 里面的值 恢复初始化，可以设置value来更显显示的文字。
3.1.5??input之type属性普通按钮和文件域
普通按钮，定义可点击按钮，多数情况下，用于通过Javascripts启动脚本。例如获取验证码。
type = "button"
?
type = "file"
上传文件，例如上传头像
?
3.1.6 label标签
<label>标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将光标转到或者选择对应的表单元素上，简单来说，就是增大可以点击的面积。
label里的for? 与? input里的id结合?，for里的值和id里的值必须一模一样。
?
3.2 select下拉菜单
像下图这样的就是下拉菜单：
基本语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option selected="selected">选项4</option>
.........
</select>
?
注意点：
- <select>中至少包含一对<option>
- 在<option>中定义select="selected"时，即默认选项?
3.3 textarea 文本域元素
使用场景：输入内容较多，涉及多行文本输入。如下图所示：
基本语法：
<textarea rows="行数" cols="列数">默认文本内容</textarea>
?