From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/html/element/form/index.html | 215 +++++++++++++++++++++++++++ 1 file changed, 215 insertions(+) create mode 100644 files/zh-cn/web/html/element/form/index.html (limited to 'files/zh-cn/web/html/element/form') diff --git a/files/zh-cn/web/html/element/form/index.html b/files/zh-cn/web/html/element/form/index.html new file mode 100644 index 0000000000..e7c0e43048 --- /dev/null +++ b/files/zh-cn/web/html/element/form/index.html @@ -0,0 +1,215 @@ +--- +title: form +slug: Web/HTML/Element/form +tags: + - Forms + - HTML + - HTML表单 + - Web + - 元素 + - 参考 + - 表单 +translation_of: Web/HTML/Element/form +--- +
{{HTMLRef}}
+ +

HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

+ +
{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}
+ + + +

可以用 {{cssxref(':valid')}} 和 {{cssxref(':invalid')}} CSS 伪类来设置 <form> 元素的样式，此时样式的表现取决于表单中的 {{domxref("HTMLFormElement.elements", "elements")}} 是否有效。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
内容类别Flow content, palpable content
可包含内容Flow content, but not containing <form> elements
标签省略{{no_tag_omission}}
允许的父级元素可以是HTML的任何标签
Implicit ARIA roleform if the form has an accessible name, otherwise no corresponding role
Permitted ARIA rolessearch, {{ARIARole("group")}}, {{ARIARole("presentation")}}
DOM 接口{{domxref("HTMLFormElement")}}
+ +

属性

+ +

此元素拥有 全局属性。

+ +
+
{{htmlattrdef("accept")}}{{obsolete_inline}}
+
一个逗号分隔的列表，包括服务器能接受的内容类型。 +
此属性已在 HTML5 中被移除并且不再被使用。作为替代，可以使用 <input type=file> 元素中的 {{htmlattrxref("accept", "input")}} 属性。
+
+
{{htmlattrdef("accept-charset")}}
+
一个空格分隔或逗号分隔的列表，此列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串 "UNKNOWN"。此字符串指的是，和包含此表单元素的文档相同的编码。
+ 在之前版本的 HTML 中，不同的字符编码可以用空格或逗号分隔。在 HTML5 中，只有空格可以允许作为分隔符。
+
{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}
+
这是一个被 iOS Safari 使用的非标准属性。当用户在一些表单的文本后代控件中，输入/编辑一些文本值时，此属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果 autocapitalize 属性在某个单独的表单后代控件被指定的话，那么此单独的设定会覆盖原来表单范围内的 autocapitalize 设定。默认值为 sentences。可以选择的值如下： +
    +
  • none：完全禁用自动首字母大写。
    • +
  • sentences：自动对每句话首字母大写。
    • +
  • words：自动对每个单词首字母大写。
    • +
  • characters：自动大写所有的字母。
    • +
+
+
{{htmlattrdef("autocomplete")}}
+
用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。 可能的值有： +
    +
  • off：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见 自动填充属性和登录）
    • +
  • on：浏览器可自动补全条目
    • +
+ + +
+
{{htmlattrdef("name")}}
+
表单的名称。HTML 4中不推荐（应使用 id）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。
+
{{htmlattrdef("rel")}}
+
根据 value 创建一个超链接或Creates a hyperlink or annotation depending on the value, see the {{htmlattrdef("rel")}} attribute for details.
+
+ +

关于提交表单的属性

+ +

下列属性控制提交表单时的行为。

+ +
+
{{htmlattrdef("action")}}
+
处理表单提交的 URL。这个值可被 {{HTMLElement("button")}}、<input type="submit"> 或 <input type="image"> 元素上的 {{htmlattrxref("formaction", "button")}} 属性覆盖。
+
+ +
+
{{htmlattrdef("enctype")}}
+
当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有： +
    +
  • application/x-www-form-urlencoded：未指定属性时的默认值。
    • +
  • multipart/form-data：当表单包含 type=file 的 {{HTMLElement("input")}} 元素时使用此值。
    • +
  • text/plain：出现于 HTML5，用于调试。
    • +
+ +

这个值可被 {{HTMLElement("button")}}、<input type="submit"> 或 <input type="image"> 元素上的 {{htmlattrxref("formaction", "button")}} 属性覆盖。

+
+
{{htmlattrdef("method")}}
+
浏览器使用这种 HTTP 方式来提交 表单. 可能的值有： +
    +
  • post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器.
    • +
  • get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 '?' 作为分隔符，没有副作用 时使用这个方法。
    • +
  • dialog：如果表单在 {{HTMLElement("dialog")}} 元素中，提交时关闭对话框。
    • +
+ +

此值可以被 {{HTMLElement("button")}}、<input type="submit"> 或 <input type="image"> 元素中的 {{htmlattrxref("formmethod", "button")}} 属性覆盖。

+
+
{{htmlattrdef("novalidate")}}
+
此布尔值属性表示提交表单时不需要验证表单。 如果没有声明该属性 （因此表单需要通过验证）。该属性可以被表单中的 {{HTMLElement("button")}}、<input type="submit"> 或 <input type="image"> 元素中的 {{htmlattrxref("formnovalidate", "button")}} 属性覆盖。
+
{{htmlattrdef("target")}}
+
表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中, 这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个浏览上下文 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义： +
    +
  • _self：默认值。在相同浏览上下文中加载。
    • +
  • _blank：在新的未命名的浏览上下文中加载。
    • +
  • _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。
    • +
  • _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。
    • +
+ +

此值可以被 {{HTMLElement("button")}}、 <input type="submit"> 或 <input type="image"> 元素中的 {{htmlattrxref("formtarget", "button")}} 属性覆盖。

+
+
+ +

示例

+ +

HTML

+ +
<!-- Form which will send a GET request to the current URL -->
+<form>
+  <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>Title</legend>
+    <label><input type="radio" name="radio"> Select me</label>
+  </fieldset>
+</form>
+ +

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '<form>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-form-element', '<form>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}}{{Spec2('HTML4.01')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("html.elements.form")}}

+ +

+ +

对于自动完成的请求，Google Chrome UI 是不一样的，取决于在 input 元素及其表单上，autocomplete 是否设为 off 。特别是，如果表单的 autocomplete 设为 off ，并且它的输入元素的 autocomplete 字段没有设置，如果用户请求该输入元素的自动填充建议，Chrome 就可能展示一个消息，“自动完成已关闭”。另一方面，如果表单和输入元素的 autocomplete 都设为 off，浏览器就不会展示此消息。出于此原因，你应该将每个拥有自定义自动完成的输入元素的 autocomplete 设为 off 。

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf