HTML 表单元素

表单由一个 form 元素作为容器构成，是用户与网页之间信息交互的基础（目的：与用户进行交互，收集用户资料）。
也就是说，需要用户填写的内容放在表单容器中，当用户点击“提交”按钮时，表单会将数据统一发送给服务器。

[ JS 表单 ] 表单应用主要分为以下几个步骤：构建表单、配置表单、验证表单、服务器处理

[ 构建表单 ] 在 HTML 中，一个完整的表单通常由表单域、表单控件和提示信息 3 个部分构成。

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过定义它处理表单数据所用程序的 URL 地址及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

表单控件：包含了具体的表单功能项，不同的表单控件有不同的用途，如文本框、单选框、复选框、按钮等。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域 form

[ form元素 ] 表单域，表单关联控件的集合；禁止表单嵌套。

即，在页面中创建一个表单，以实现用户信息的收集和传递，form 中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

各种表单控件

</form>

[ form 元素属性？↓ ]  name、accept-charset、action、target、enctype、method、autocomplete、novalidate

其中 action 和 name 属性为必需项。

name，用于指定表单的名称，以区分同一个页面中的多个表单。 // 每个表单都应该有自己的表单域

<form method="get" action="form.php" name="test"></form>

1

<form method="get" action="form.php" name="test"></form>

action // 在表单收集到信息后，需要将信息传递给服务器进行处理

该属性用于指定接收并处理表单数据的服务器程序的 URL 地址。

语法：action=“URL” // 若action的值为空，则默认表单提交到本页。一般来说，当用户单击表单上的“提交”按钮后，信息发送到web服务器上，由action属性所指定的程序处理。

1
2

语法：action=“URL”         // 若action的值为空，则默认表单提交到本页。
一般来说，当用户单击表单上的“提交”按钮后，信息发送到web服务器上，由action属性所指定的程序处理。

method，告诉浏览器如何将数据发送给服务器，指定向服务器发送数据的方法（取值为：post | get）

语法：method=“属性值” 区别： post方法提交不会改变地址栏状态，表单数据不会被显示； get方法提交，地址栏状态会发生变化，表单数据会在URL地址中显示。 // post方法提交的数据安全性明显高于get方法，日常开发中，尽量使用post方法提交表单数据。

1
2
3
4

语法：method=“属性值”
区别： post方法提交不会改变地址栏状态，表单数据不会被显示；
      get方法提交，地址栏状态会发生变化，表单数据会在URL地址中显示。
// post方法提交的数据安全性明显高于get方法，日常开发中，尽量使用post方法提交表单数据。

[ fieldset 分组表单控件 + legend ]

fieldset 元素，用于将表单内的相关元素分组、打包，提升可访问性，多数浏览器用一个简单的边框来显示 fieldset。

属性： disabled　　　　禁用fieldset form 　　　　　　规定fieldset所属的一个或多个表单 name 　　　　　规定fieldset的名称

1
2
3
4

属性：
disabled　　　　禁用fieldset
form 　　　　　　规定fieldset所属的一个或多个表单
name  　　　　　规定fieldset的名称

legend 元素用于定义 fieldset 元素的标题。

<fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 体重：<input type="text" /> </fieldset>

1
2
3
4
5

<fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
</fieldset>

表单控件 — input 及其他

[ 输入控件 input ] 数据输入字段，通过 { 其属性？↓ } — type？！控制字段类型，用以接受各种类型的用户输入。

<input /> 标签为单标签，type 为其最基本的属性，其取值有很多种，用于指定不同的控件类型。除了 type 属性之外，input 标签还可以定义很多其他的属性，其中常用的属性有：

[ 其他表单控件？↓ ] input 元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。

// 传统表单控件
   button 　　　　　　 定义一个按钮
   select 　　　　　　 定义一个下拉列表
   option 　　　　　　 定义下拉列表中的一个选项
   optgroup 　　　　  定义选项组，用于组合选项
   textarea 　　　　　 定义多行的文本输入控件
   fieldset 　　　　　 分组表单内的相关元素
   legend 　　　　　　 定义fieldset元素的标题
   label 　　　　　　  定义input元素的标注

// 新增表单控件
   datalist 　　　　定义输入域的选项列表
   keygen   　　　　定义密钥对生成器，用于生成密钥
   output   　　　　用于显示计算的结果
   progress  　　   用于显示进度(前进量)
   meter   　　　　 用于显示度量(剩余量)

// 传统表单控件

button 　　　　　　定义一个按钮

select 　　　　　　定义一个下拉列表

option 　　　　　　定义下拉列表中的一个选项

optgroup 　　　　定义选项组，用于组合选项

textarea 　　　　　定义多行的文本输入控件

fieldset 　　　　　分组表单内的相关元素

legend 　　　　　　定义fieldset元素的标题

label 　　　　　　定义input元素的标注

// 新增表单控件

datalist 　　　　定义输入域的选项列表

keygen 　　　　定义密钥对生成器，用于生成密钥

output 　　　　用于显示计算的结果

progress 　　用于显示进度(前进量)

meter 　　　　用于显示度量(剩余量)

兼容性：https://caniuse.com