08.表单标签

一、表单的作用

收集用户信息 ，与跟用户进行交互，收集用户资料。

二、表单的组成

在 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

注意:

1. select中至少包含一对option。
2. 在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项

2.4 textarea文本域表单元素

用于定义多行文本输入的控件，常见于留言板，评论。

<textarea cols="20" rows="10">你好</textarea>

cols是显示的列数，rows是显示的行数。一般在css里设置。