HTML 元素：form

元素<form>是 html 中非常重要的一部分。它是其他元素集合（如输入、文本区域、复选框等）的主场，这些控件允许用户提交信息。该信息可以发送到服务器进行处理，或以各种其他方式使用。

例子

句法

1    <form action="https://google.com/search" method="get">    
2       <input type="search" name="q" placeholder="Search...">    
3       <input type="submit" value="Search Google...">    
4    </form>

结果

See the Pen  HTML Element: <form> by Envato Tuts+ (@tutsplus)  on CodePen.

属性

该<form>标记支持HTML 中的全局属性。全局属性对于所有 HTML 元素都是通用的，并且可以用于所有元素（尽管它们可能对其中一些元素没有太大影响）。

该<form>元素还支持以下属性：

• action: 用于表单提交的 URL

• method: 用于表单提交的 HTTP 方法 ("GET"; "post")

• enctype: 用于表单提交的表单数据集编码类型("application/x-www-form-urlencoded"; "multipart/form-data"; "text/plain")

• namedocument.forms: api中使用的表单名称

• accept-charset: 用于表单提交的字符编码

• novalidate: 绕过表单提交的表单控件验证

• target: 表单提交的浏览上下文。

• autocomplete：表单中控件的自动填充功能的默认设置

哪种方法？

和GET方法POST用于传输数据。我们可以使用这两种方法来发送表单数据，虽然GET用于请求数据，而用作将数据发送到 Web 服务器的POST方式。两者最明显的区别是将请求参数附加到 URL，如下所示：GET

内容

内<form>，支持流内容和可触内容。

一个<form>元素不能嵌套在另一个<form>元素中！

这是一个带有元素层次结构示例的典型表单结构。您会注意到用于包含单选按钮的<ul>和元素。和元素通常用于包装其他表单控件，并且非常适合包含相关的表单输入组。<li><p><div><section>

1    <form>    
2        <fieldset>    
3            <legend>Preferred use of ketchup</legend>    
4            <ul>    
5                <li>    
6                    <input type="radio" name="ketchup" id="ketchup_1" value="burger" />    
7                    <label for="ketchup_1">Burger</label>    
8                </li>    
9                <li>    
10                    <input type="radio" name="ketchup" id="ketchup_4" value="fries" />    
11                    <label for="ketchup_2">Fries</label>    
12                </li>    
13                <li>    
14                    <input type="radio" name="ketchup" id="ketchup_3" value="cheese sandwich" />    
15                    <label for="ketchup_3">Cheese sandwich</label>    
16                </li>    
17            </ul>    
18        </fieldset>    
19        <p>    
20            <input type="submit" value="Submit answer" />    
21        </p>    
22    </form>

<fieldset>并且<legend>应该只用于对多个表单控件进行分组，作为更高级别的标签。 

可访问性注意事项

• 控件标签：适当地标记所有表单控件。有两种方法可以将标签与表单控件相关联：

1. 通过给控件一个id, 并id在for标签的属性中引用它。

2. 通过将表单控件包装在标签中。

See the Pen  HTML Element: <form> by Envato Tuts+ (@tutsplus)  on CodePen.

• 自动完成：在输入时使用  autocomplete=""常见数据类型（如姓名、地址、生日等）的属性。许多浏览器会建议用户自己的详细信息，以便更快地输入表单。

• Tabbing：要指定交互式元素（如输入）的 Tab 键顺序，您可以使用该tabindex属性。tabindex="0"，例如，当按下键盘上的Tab键时，将是第一个获得焦点的元素。

有趣的事实：的最大值tabindex是 32767