<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.
acceptDeprecated-
服务器接受以逗号分隔的 内容类型。
注意:该属性已被弃用,不应使用。相反,请在
<input type=file>元素上使用accept属性。¥Note: This attribute has been deprecated and should not be used. Instead, use the
acceptattribute 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;使用?分隔符附加到actionURL 的表单数据。当表格 没有副作用.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:搜索角色