<form>: The Form element
<form>
HTML 元素表示包含用于提交信息的交互式控件的文档部分。
¥The <form>
HTML element represents a document section containing interactive controls for submitting information.
Try it
可以使用 :valid
和 :invalid
CSS pseudo-classes 根据表单内的 elements
是否有效来设置 <form>
元素的样式。
¥It is possible to use the :valid
and :invalid
CSS pseudo-classes to style a <form>
element based on whether the elements
inside the form are valid.
属性
¥Attributes
该元素包括 全局属性。
¥This element includes the global attributes.
accept
Deprecated-
服务器接受以逗号分隔的 内容类型。
注意:该属性已被弃用,不应使用。相反,请在
<input type=file>
元素上使用accept
属性。¥Note: This attribute has been deprecated and should not be used. Instead, use the
accept
attribute on<input type=file>
elements. accept-charset
-
服务器接受以空格分隔的 character encodings。浏览器按照它们列出的顺序使用它们。默认值表示 与页面相同的编码。(在以前版本的 HTML 中,字符编码也可以用逗号分隔。)
autocapitalize
-
控制输入的文本是否自动大写,如果是,则以何种方式自动大写。有关详细信息,请参阅
autocapitalize
全局属性页面。 autocomplete
-
指示输入元素默认情况下是否可以由浏览器自动补齐其值。表单元素上的
autocomplete
属性会覆盖<form>
上的属性。可能的值:off
:浏览器可能不会自动补齐输入。(对于可疑的登录表单,浏览器往往会忽略这一点;请参阅 管理登录字段的自动填充。)on
:浏览器可能会自动补齐输入。
name
-
表单的名称。该值不能是空字符串,并且在其所在的表单集合中的
form
元素(如果有)中必须是唯一的。 rel
-
控制注释以及表单创建的链接类型。注释包括
external
、nofollow
、opener
、noopener
和noreferrer
。链路类型包括help
、prev
、next
、search
和license
。rel
值是这些枚举值的空格分隔列表。
表单提交的属性
¥Attributes for form submission
以下属性控制表单提交期间的行为。
¥The following attributes control behavior during form submission.
action
-
处理表单提交的 URL。该值可以被
<button>
、<input type="submit">
或<input type="image">
元素上的formaction
属性覆盖。当设置method="dialog"
时,该属性将被忽略。 enctype
-
如果
method
属性的值为post
,则enctype
就是表单提交的 MIME 类型。可能的值:application/x-www-form-urlencoded
:默认值。multipart/form-data
:如果表单包含<input>
元素和type=file
,请使用此选项。text/plain
:对于调试目的很有用。
该值可以被
<button>
、<input type="submit">
或<input type="image">
元素上的formenctype
属性覆盖。 method
-
用于提交表单的 HTTP 方法。唯一允许的方法/值是(不区分大小写):
post
:POST
方法;作为 请求正文 发送的表单数据。get
(默认):GET
;使用?
分隔符附加到action
URL 的表单数据。当表格 没有副作用.1 时使用此方法。dialog
:当表单位于<dialog>
内时,关闭对话框并导致在提交时触发submit
事件,而不提交数据或清除表单。
该值被
<button>
、<input type="submit">
或<input type="image">
元素上的formmethod
属性覆盖。 novalidate
-
此布尔属性指示表单在提交时不应进行验证。如果未设置此属性(因此表单已验证),则它可以被属于表单的
<button>
、<input type="submit">
或<input type="image">
元素上的formnovalidate
属性覆盖。 target
-
指示提交表单后在何处显示响应。它是浏览上下文(例如选项卡、窗口或 iframe)的名称/关键字。以下关键字具有特殊含义:
_self
(默认):加载到与当前浏览上下文相同的浏览上下文中。_blank
:加载到新的未命名浏览上下文中。这提供了与设置rel="noopener"
但不设置window.opener
相同的行为。_parent
:加载到当前浏览上下文的父浏览上下文中。如果没有父级,则行为与_self
相同。_top
:加载到顶层浏览上下文(即,作为当前浏览上下文的祖级且没有父级的浏览上下文)。如果没有父级,则行为与_self
相同。_unfencedTop
:将嵌入 围栏框架 内的表单的响应加载到顶层框架中(即,遍历到受隔离框架的根之外,与其他保留的目的地不同)。仅在围栏框架内可用。
该值可以被
<button>
、<input type="submit">
或<input type="image">
元素上的formtarget
属性覆盖。
示例
¥Examples
<!-- Form which will send a GET request to the current URL -->
<form method="get">
<label>
Name:
<input name="submitted-name" autocomplete="name" />
</label>
<button>Save</button>
</form>
<!-- Form which will send a POST request to the current URL -->
<form method="post">
<label>
Name:
<input name="submitted-name" autocomplete="name" />
</label>
<button>Save</button>
</form>
<!-- Form with fieldset, legend, and label -->
<form method="post">
<fieldset>
<legend>Do you agree to the terms?</legend>
<label><input type="radio" name="radio" value="yes" /> Yes</label>
<label><input type="radio" name="radio" value="no" /> No</label>
</fieldset>
</form>
结果
技术总结
¥Technical summary
内容类别 | 流量内容, 可触知的内容 |
---|---|
允许的内容 | 流量内容,但不包含 <form> 元素 |
标签遗漏 | 无,开始和结束标记都是强制性的。 |
允许的父级 | 任何接受 流动内容 的元素 |
隐式 ARIA 角色 | form |
允许的 ARIA 角色 |
search 、
none 或 presentation
|
DOM 接口 | HTMLFormElement |
规范
Specification |
---|
HTML Standard # the-form-element |
浏览器兼容性
BCD tables only load in the browser
也可以看看
¥See also
- HTML 表单指南
- 创建表单时使用的其他元素:
<button>
,<datalist>
,<fieldset>
,<input>
,<label>
,<legend>
,<meter>
,<optgroup>
,<option>
,<output>
,<progress>
,<select>
,<textarea>
. - 获取表单中的元素列表:
HTMLFormElement.elements
- ARIA:表单角色
- ARIA:搜索角色