一、表单的作用
收集用户信息 ，与跟用户进行交互，收集用户资料。
二、表单的组成
在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
1.表单域
表单域就是一个包含表单元素的区域。
常用属性：
表单常用属性.png
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>
form标签会把它范围内的表单元素信息提交给服务器.
method选择get在提交后可在浏览器地址栏上看到所有name值，选择post则看不见。
2.表单控件
2.1 input输入表单元素
在表单元素中 <input> 标签用于收集用户信息。
在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本 字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
type属性：
type属性.png
placeholder属性：用于text和password输入框中提示作用。
除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：
表单其他属性.png
<form action="123.php" method="GET" name="name2">
<!-- text属性：定义单行输入字段 -->
用户名：<input type="text" name="name" placeholder="请输入用户名" maxlength="4"><br />
</form>
<!-- password：定义密码，输入字符加密 -->
密码：<input type="password" name="psw" placeholder="请输入密码" maxlength="15"><br />
<!-- radio：单选按钮，小圆圈 -->
<!-- 单选按钮各个选项的name值都要是一样的 -->
性别：男<input type="radio" name="sex" value="nan">女<input type="radio" name="sex" value="nv"><br />
<!-- checkbox：多选按钮，小方框 -->
<!-- 多选按钮各个选项的name值都要是一样的 -->
爱好：唱 <input type="checkbox" name="hobby" value="chang">跳 <input type="checkbox" name="hobby" value="tiao">
RAP <input type="checkbox" name="hobby" value="rap">
篮球<input type="checkbox" name="hobby" value="lanqiu"><br />
<!-- reset：重置按钮，将input里的元素恢复到初始值 -->
<input type="reset" value="重置">
<!-- submit：提交按钮，把数据发送给服务器 -->
<input type="submit" value="立即注册">
<!-- button:普通按钮，不会发送数据给服务器 -->
<input type="button" value="发送短信验证码"><br>
<!-- checked = "checked"：默认勾选 -->
<input type="checkbox" checked="checked" name="xieyi" value="tongyi">同意本协议<br>
<!-- file：上传文件 -->
上传头像：<input type="file" name="file"><br>
<!-- image：以图像的形式提交按钮 -->
<input type="image" src="09-注册.png" name="tijiao">
表单.png
2.2 label标签搭配input
lable标签用于绑定一个表单元素, 当点击<label> 标签包含的内容时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验.。
<!-- lable标签作用是点击标签里的内容就能定位到输入框，提高用户体验lable标签里面的for属性必须和input标签里面的id属性一一对应。 -->
<!-- 点击“用户名”，就可定位到输入框中 -->
<label for="name">用户名：</label>
<input type="text" name="username" placeholder="请输入用户名" maxlength="4" id="name">
2.3 select下拉表单元素
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可以使用<select>标签控件定义下拉列表.。
<!-- 一个select标签中至少要有两个option -->
地址：<select>
<option value="dizhi">天上</option>
<option value="dizhi">地下</option>
<!--selected="selected" 默认显示在第一行 -->
<option value="dizhi" selected="selected">你心里</option>
</select>
下拉.png
注意:
- select中至少包含一对option。
- 在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项
2.4 textarea文本域表单元素
用于定义多行文本输入的控件，常见于留言板，评论。
<textarea cols="20" rows="10">你好</textarea>
cols是显示的列数，rows是显示的行数。一般在css里设置。
