前端学习笔记一一HTML表单标签（form）

| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 |

H5新标签

值	描述
color	定义拾色器
date	定义 date 控件（包括年、月、日，不包括时间）
datetime	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）
datetime-local	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）
email	定义用于 e-mail 地址的字段
month	定义 month 和 year 控件（不带时区）
number	定义用于输入数字的字段
range	定义用于精确值不重要的输入数字的控件（比如 slider 控件）
search	定义用于输入搜索字符串的文本字段
tel	定义用于输入电话号码的字段
time	定义用于输入时间的控件（不带时区）
url	定义用于输入 URL 的字段
week	定义 week 和 year 控件（不带时区）

七、大量文本和列表

（一）文本域

textarea 标签定义一个多行的文本输入控件

文本域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（Courier）

文本域中的默认值，要放在一对textarea 标签中

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好地·办法是使用CSS的height 和 width属性

（二）列表框

select 元素可以创建单选或是多选菜单。

option标签用于定义列表中的可用选项，即列表项；

optgroup标签 定义列表项分组

1
2
3 Volvo
4 Saab
5
6
7 Mercedes
8 Audi
9
10

（三）multiple 属性

multiple属性定义多选，multiple 属性可以设置或是返回是否可以有多个选项被选中。

multiple 的用法：

设置 multiple属性

返回multiple属性

八、选项框标准打开方式

（一）radio 类型

radio 单选框 ，当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。

男性：
女性：

（二）checkbox 类型

I have a bike
I have a car

（三）checked 属性

checked 属性是一个布尔属性。

checked 属性规定在页面加载时应该被预先选定的 元素。

checked 属性适用于 和 。

九、文件上传

（一）file 类型

file类型 定义输入字段和 "浏览"按钮，供文件上传

（二）enctype 属性

form 标签中定义的enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）

属性值：

application/x-www-form-urlencoded  在发送前编码所有字符（默认）

multipart/form-data  不对字符进行编码。在使用包含文件上传控件的表单时，必须使用该值！

text/plain  空格转换为 “+” 加号，但不对特殊字符编码

（三）accept 属性

accept 规定上传文件的类型，如果多个类型可以使用逗号隔开，例如：accept=“image/png,image/jpg”（这能上传png类型的图片）

accept 属性只能与 配合使用。它规定能够通过文件上传进行提交的文件类型。

注意：请避免使用该属性。应该在服务器端验证文件上传。

（四）multiple 属性

file 文件上传 配合 multiple属性可以上传多个文件；

multiple 属性规定输入字段可选择多个值。

如果使用该属性，则字段可接受多个值。

注意：multiple 属性使用欧冠与以下 类型：email 和 file

十、日期在表单中的使用

（一）date 类型

date 获得日期，包括年月日。

1、使用mix和max定义开始和结束时间 如：min=“2030-02-02”

2、也可使用step属性设置步长（间隔几天才可以选中）

（二）datetime 类型

定义 date 和 time 控件，获得日期和时间，包括年、月、日、时、分、秒、几分之一秒。

（三）time 类型

获得时间，定义用于输入时间的控件（不带时区）。

（四）week 类型

week类型 获得年份和周数

（五）month 类型

month 类型 获得年和月

（六）datetime-local 类型

datetime-local  年月日时分秒

十一、搜索表单和datalist数据列表

（一）search 类型

search类型 可以定义搜索框，但需要input type=search外面包上一层带action属性的form。

（二）datalist 标签

标签规定了 元素可能的选项列表。

为input 元素提供‘自动完成’的特性。用户能看到一个下拉列表，里面是预先定义好的内容。这些内容将作为用户输入的数据。

为 datalist 元素添加 id，其他 input 元素通过 list 属性指向 datalist 的id，从而绑定 datalist 元素

一对 option 标签中的是提示文字，如果不想有提示文字，可以将 option 变成单标签

兼容性不好>

十二、表单历史数据自动提示autocomplete

autocomplete属性

type=search 会有许多默认样式和行为，会默认下拉框显示历史搜索记录，在不同的浏览器或是设备上会有不同显示效果。

autocomplete 属性规定表单是否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。当用户在字段开始输入时，浏览器基于之前输入过的历史记录，显示出字段中填写的选项。

**注意：**除了 Opera，其他主流浏览器都支持 autocomplete 属性

注意：autocomplete “on” 适用于表单，“off” 适用于特定的输入字段，反之亦然。

属性值：

off 输入的时候没有历史提示，规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入

on 输入的时候会有历史提示，默认。规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值

First name:
E-mail:

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】