1 什么是表单？
- 表单就是专门用来收集用户信息的
2 什么是表单元素
2.1 什么是元素
在html 中标签/标记/元素都是指HTML中的标签，例如<a> a 标签/a标记，a元素
表单元素其实还是HTML中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能
2.2 表单的格式
<form>
<表单元素>
</form>
2.3 常见的表单元素
input 标签，有一个type属性，这个属性有很多类型的取值，取值的不同就决定了input标签的功能和外观
格式：
<form>
<!-- 明文输入框-->
账号：<input type="text">
<!-- 暗文输入框-->
密码：<input type="password">
<!--给输入框设置默认值-->
账号：<input type="text" value="123">
密码：<input type="password" value="2222">
<!-- 单选框
1、默认情况下，单选框不会互斥，要向单选框互斥，那么必须给每一个单选框标签都设置一个name 属性，且name属性还必须设置相同的值（可以随便选）
2、想让当选框默认选中某一项，那么可以给input标签添加一个checked属性
3、在HTML中如果属性的取值和属性的名称一样，可以只写一个，但是在XHTML中必须写上取值。-->
性别：<input type="radio" name="gender"> 男
<input type="radio" name="gender">女
<!-- 多选框
-->
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球
<!-- 按钮
定义一个普通按钮，配合js完成一些操作-->
<input type="button" value="button" onclick="alert('inj')">
<!-- 图片按钮：定义一个图片按钮，-->
<input type="image" src="images/register.jpg">
<!-- 定义重置按钮，
作用：清空表单中的数据，
注意点：重置按钮有默认的按钮标题，默认就叫中重置-->
<input type="reset" value="清空">
<!--定义一个提交按钮，
作用:将表单中的数据提交到远程服务器
注意点：要想把表单中的数据提交到远程服务器，必须满足两个条件：
1. 告诉表单需要提交到那个服务器，可以通过form 标签中的action属性来告诉表单；
2. 告诉表单，表单中的那些数据需要提交，需要通过name 属性。-->
<input type="submit">
<!-- 隐藏域：
作用：用于偷偷收集用户数据的，隐藏域是不会出现在界面中的-->
<input type="hidden" name="cc" value="it666">
</form>
2.4 label 标签
- 默认情况下文字和输入框是没有关联关系的，也就是说点击文字输入框不会聚焦，如果想点击文字时让对应的输入框聚焦，那么旧需要让文字输入框进行绑定；
- 要想让输入框和文字绑定在一起，那么我们就可以使用label标签。
- 绑定方法：
- 将文字利用label 标签包裹起来；
- 给输入框添加一个id 属性；
- 在label 标签中通过for 属性和输入框中的id进行绑定即可
<label for="account">账号</label><input type="text" id="account">
2.5 datalist 标签
- 作用：给输入框绑定待选项
- 格式：
<datalist>
<option>待选项内容</option>
</datalist>
- 如何给输入框绑定待选列表
- 写一个输入框<input type="text">
- 写一个datalist列表
- 给datalist 列表标签添加一个id
- 给输入框添加一个list 属性，将datalist 的id 对应的值赋值给list 属性即可。
2.6 select标签
- 作用：用于定义下拉列表
- 格式：
<select>
<optgroup label="广州">
<option>列表数据</option>
</optgroup>
</select>
- 注意点：
- 下拉列表不能输入内容，但是可以直接在列表中选择内容
- 可以通过给option标签添加一个selected属性来指定列表的默认值
- 可以通过给option 标签包裹一层optgroup 标签来给下拉列表中的数据进行分类的。
2.7 textarea 标签
- 作用：定义一个多行输入框
- 格式：
<textarea>
</textarea>
- 注意点：
1.默认情况下输入框可以无限换行；
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows 指定输入框的宽度和高度，但是指定了列数和宽度，但是还是可以无限往下输入的。
4.默认情况下，多行输入框可以手动进行拉伸的。
在单选框和多选框中，所有的name 都必须一致。
在表单标签中，出了按钮标签以外的标签，都可以通过value 指定提交到服务器的数据的值。
