08.表单标签

一、表单的作用

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

二、表单的组成

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。

1.表单域

表单域就是一个包含表单元素的区域。

常用属性：

表单常用属性.png

  
   各种表单元素控件 
 

form标签会把它范围内的表单元素信息提交给服务器.

method选择get在提交后可在浏览器地址栏上看到所有name值，选择post则看不见。

2.表单控件

2.1 input输入表单元素

在表单元素中 标签用于收集用户信息。

在 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本 字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

type属性：

type属性.png

placeholder属性：用于text和password输入框中提示作用。

除 type 属性外，标签还有其他很多属性，其常用属性如下：

表单其他属性.png

    
    用户名：

密码：

性别：男女

爱好：唱 跳 
RAP 
篮球

同意本协议

上传头像：

表单.png

2.2 label标签搭配input

lable标签用于绑定一个表单元素, 当点击 标签包含的内容时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验.。

用户名：

2.3 select下拉表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可以使用标签控件定义下拉列表.。

地址：

天上 地下 你心里

下拉.png

注意:

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

2.4 textarea文本域表单元素

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

你好

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