## 表单标签

目标：能够使用表单相关标签和属性，实现网页中表单类网页结构搭建

表单域 `

`

语法：

```

各种表单控件

```

提交方式：get/post

轮廓线：outline

给表单添加outline：0；或者outline：none；样式后，就可以去掉默认的蓝色边框；

## input系列标签

场景：在网页中显示 `收集用户信息的表单效果`。如：登陆页面、注册页

标签名：input；`input标签可以通过type属性值的不同，展示不同效果`

Type属性值：

常用属性：`placeholder：占位符`，提示用户输入内容的文本

拓展：Value属性和name属性作用介绍：

* `value：用户输入的内容`，提交之后会发送给后端服务器* `name：当前控件的含义`，提交之后可`以告诉后端发送过去的数据是什么含义`* 后端接收到的数据的格式是：name的属性值=value的属性值

注意点：

1. 有相同name属性值的单选框为一组，一组中只能同时有一个被选中
2. type属性不要拼错或者多加空格，否则相当于设置了默认值状态；text模式
3. `checked：默认选中`，属性值可省略
4. `multiple：多文件选择`，属性值可省略
5. 如果需要实现上述按钮功能，需要配合form标签使用。Form使用方法：`用form标签把表单标签一起包裹起来即可。Form表单标签。`

## button按钮标签

场景：在网页中显示用户点击的按钮

属性值：`reset、submit、button`

注意点：

1. 谷歌浏览器中button默认是提交按钮；
2. 双标签，更便于包裹其他内容：文字、图片等；

## select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

Select标签：下拉菜单的整体Option标签：下拉菜单的每一项

常见属性：Selected：下拉菜单的默认选中

## textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件

常见属性：

Cols：规定了文本域内可见宽度Rows：规定了文本域内可见行数
`防止拖拽文本域：resize：none；`

单行文本溢出文字由省略号代替，需要满足以下三个条件：

1. 强制一行内显示文本。White-space：nowrap；（默认normal自动换行）
2. 超出部分隐藏。Overflow：hidden；
3. . 用省略号代替超出部分。Text-overflow：ellispsis；

多行文本溢出文字由省略号代替：

注意点：

1. 右下角拖拽改变大小
2. 实际开发时针对于样式效果推荐使用CSS设置

## label标签

场景：`常用于绑定内容与表单标签的关系`

使用方法一：

1. 使用label标签把内容包裹起来
2. 在表单标签上添加 id属性
3. 在label标签的for属性中设置对应的id属性值

代码演示：

```HTML

单选

```

使用方法二：

1. 直接使用label标签把内容和表单标签一起包裹起来
2. 需要把label标签的for属性删除即可

代码演示：

```HTML

单选

```

## 新增属性

1. required：required；表单拥有该属性表示其内容不能为空，必填；
2. autofocus：autofocus；自动聚焦属性，页面加载完成自动聚焦到指定表单
3. autocomplete：off/on；当用户在字段开始键入时，浏览器基于之前输入过的值，应该显示出在字段中填写的选项。默认已经打开，需要放在表单内，同时加上name属性，同时成功提交。
4. `multiple：multiple；可以多选文件提交。`

## 语义化标签

学习路径：

1. 没有语义的布局标签
2. 有语义的布局标签

无语义：`div和span`

1. div：一行只显示一个（独占一行）2. span：一行可以显示多个

有语义：

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

标签：

1. header：网页头部
2. nav：网页导航
3. footer：网页底部
4. aside：网页侧边栏
5. section：网页区块
6. article：网页文章

注意点：`以上标签显示特点和div一致，但是比div多了不同的语义`

## 字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

结构：`&英文；`

常见字符实体：在`实体名称前加上英文下的 & 符号（如：  ）`因为解析问题说以表格里没加。

| 显示结果 | 描述 | 实体名称 |
| ---------- | ------------------- | -------------------- |
| | 空格 | nbsp; |
| < | 小于号 | lt； |
| > | 大于号 | gt； |
| & | 和号 | amp； |
| ” | 引号 | quop； |
| ` | 撇号 | apos；（IE不支持） |
| ¢ | 分（cent） | cent； |
| ￡ | 镑（pound） | pound； |
| ￥ | ( Himoto | Himoto; |
| € | 欧元（euro） | euro； |
| § | 小节 | sect； |
| © | 版权（copyright） | copy； |

最后修改：2021 年 09 月 16 日
© 允许规范转载
谢谢老板打赏