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/attributes/index.html | 693 +++++++++++++++++++++ .../index.html" | 258 ++++++++ 2 files changed, 951 insertions(+) create mode 100644 files/zh-cn/web/html/attributes/index.html create mode 100644 "files/zh-cn/web/html/attributes/\350\207\252\345\212\250\345\256\214\346\210\220\345\261\236\346\200\247/index.html" (limited to 'files/zh-cn/web/html/attributes') diff --git a/files/zh-cn/web/html/attributes/index.html b/files/zh-cn/web/html/attributes/index.html new file mode 100644 index 0000000000..237ef0c2c9 --- /dev/null +++ b/files/zh-cn/web/html/attributes/index.html @@ -0,0 +1,693 @@ +--- +title: HTML 属性参考 +slug: Web/HTML/Attributes +tags: + - Attribute + - HTML + - IDL + - 元素 + - 元素属性 + - 参考 + - 属性 +translation_of: Web/HTML/Attributes +--- +

HTML中的元素拥有属性（attribute）；这些额外的属性值可以配置元素或者以各种方式来调整元素的行为，进而满足用户所需的标准。

+ +

属性列表

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名元素描述
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}服务器接受内容或文件类型的列表。
accept-charset{{ HTMLElement("form") }}支持的字符集列表。
accesskey全局属性定义键盘快捷键来激活或者聚焦元素
action{{ HTMLElement("form") }}表单信息提交的url地址，指向进行处理的程序。
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}设置元素的水平对齐。
allow{{ HTMLElement("iframe") }}Specifies a feature-policy for the iframe.
alt +

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

+ 		在图片无法呈现时的替代文本。
async{{ HTMLElement("script") }}表示该脚本应该异步执行。
autocapitalize全局属性Sets whether input is automatically capitalized when entered by user
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}表示该表单中是否可以由浏览器自动完成填值。
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}在网页加载后该元素应该自动聚焦。
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }} audio或video应该自动播放
background{{ HTMLElement("body") }}, {{ HTMLElement("table") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}指定图像文件的URL。 +
+

注意：虽然浏览器和电子邮件客户端可能仍然支持此属性，但它已过时。改用css{{Cssxref(“back-image”)}}。

+
+
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

元素的背景颜色。

+ +

NOTE：这是一个遗留属性，请使用css{“background-color":}代替。

+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

边框宽度。

+ +

Note:这是遗留属性，请使用 CSS {{ Cssxref("border") }} 属性代替。

+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}包含已缓存媒体的时间范围。
capture{{ HTMLElement("input") }}From the HTML Media Capture
+ The definition of 'media capture' in that specification.spec, specifies a new file can be captured.
challenge{{ HTMLElement("keygen") }}与公钥一起提交的挑战字符。
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}申明该页面或脚本的字符编码。
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}指出该元素在页面加载后是否处于选中状态。
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}包含一个URI，用来指明引用或修改的源地址。
class全局属性经常和CSS一起配合使用来修饰元素。
code{{ HTMLElement("applet") }}标明被加载和执行的applet类文件的URL。
codebase{{ HTMLElement("applet") }}指出存放applet类文件基本URL地址(绝对或相对)，这些文件由code属性标明。
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

此属性可用于指定颜色, 颜色值一般有两种表示:

+ +

1. 以`#`号开头的RGB十六进制数,如#112233, 其中11表示的是R(红),22表示的是G绿(),33表示的是B(蓝)

+ +

2. 颜色的英文单词名,如`red`表示红色

+
cols{{ HTMLElement("textarea") }}定义一个textarea中包含多少列。
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}该属性一般用在td标签中,用于指定一个单元格占用多少列,例如:<td colspan='2'>表示占用一个单元格占2列.
content{{ HTMLElement("meta") }}A value associated with http-equiv or name depending on the context.
contenteditable全局属性指出该元素的内容是否可以被编辑。
contextmenu全局属性定义将用作元素上下文菜单的{{HTMLElement(“Menu”)}}元素的ID。
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}指出浏览器是否对用户显示播放控制台(前进或回退)
coords{{ HTMLElement("area") }}A set of values specifying the coordinates of the hot-spot region.
crossorigin{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}How the element handles cross-origin requests
csp {{experimental_inline}}{{ HTMLElement("iframe") }}Specifies the Content Security Policy that an embedded document must agree to enforce upon itself.
+

data

+ 		+

{{ HTMLElement("object") }}

+ 		+

资源URL地址

+
+

data-*

+ 		+

全局属性

+ 		+

允许你对于一个HTML元素绑定自定义的属性。

+
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Indicates the date and time associated with the element.
decoding{{ HTMLElement("img") }}Indicates the preferred method to decode the image.
default{{ HTMLElement("track") }}Indicates that the track should be enabled unless the user's preferences indicate something different.
defer{{ HTMLElement("script") }}Indicates that the script should be executed after the page has been parsed.
dir全局属性Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether the user can interact with the element.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indicates that the hyperlink is to be used for downloading a resource.
draggable全局属性Defines whether the element can be dragged.
dropzone全局属性Indicates that the element accept the dropping of content on it.
enctype{{ HTMLElement("form") }}Defines the content type of the form date when the method is POST.
enterkeyhint {{experimental_inline}}{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}, contenteditableThe enterkeyhint specifies what action label (or icon) to present for the enter key on virtual keyboards. The attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute).
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}描述与当前元素绑定的元素。
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates the form that is the owner of the element.
formaction<input>, <button>Indicates the action of the element, overriding the action defined in the <form>.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}IDs of the <th> elements which applies to this element.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}注意：在某些情况下，例如<div>，这是一个遗留属性，在这种情况下应该使用CSS height属性。 在其他情况下，例如<canvas>，必须使用此属性指定高度。
hidden全局属性Indicates the relevance of an element.
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}关联资源的URL。
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifies the language of the linked resource.
http-equiv{{ HTMLElement("meta") }}
icon{{ HTMLElement("command") }}Specifies a picture which represents the command.
id全局属性Often used with CSS to style a specific element. The value of this attribute must be unique.
ismap{{ HTMLElement("img") }}Indicatesthat the image is part of a server-side image map.
itemprop全局属性
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
kind{{ HTMLElement("track") }}Specifies the kind of text track.
label{{ HTMLElement("track") }}Specifies a user-readable title of the text track.
lang全局属性Defines the language used in the element.
language{{ HTMLElement("script") }}Defines the script language used in the element.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indicates whether the media should start playing from the start when it's finished.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
manifest{{ HTMLElement("html") }}Specifies the URL of the document's cache manifest.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indicates the maximum value allowed.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defines the maximum number of characters allowed in the element.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Specifies a hint of the media for which the linked resource was designed.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indicates the minimum value allowed.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Name of the element. For example used by the server to identify the fields in form submits.
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
open{{ HTMLElement("details") }}Indicates whether the details will be shown on page load.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }}
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
poster{{ HTMLElement("video") }}A URL indicating a poster frame to show until the user plays or seeks.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indicates whether the whole resource, parts of it or nothing should be preloaded.
pubdate{{ HTMLElement("time") }}Indicates whether this date and time is the date of the nearest {{ HTMLElement("article") }} ancestor element.
radiogroup{{ HTMLElement("command") }}
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifies the relationship of the target object to the link object.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
reversed{{ HTMLElement("ol") }}Indicates whether the list should be displayed in a descending order instead of a ascending.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Defines the number of rows a table cell should span over.
sandbox{{ HTMLElement("iframe") }}
spellcheck全局属性Indicates whether spell checking is allowed for the element.
scope{{ HTMLElement("th") }}
scoped{{ HTMLElement("style") }}
seamless{{ HTMLElement("iframe") }}
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }}
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
sizes{{ HTMLElement("link") }}
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}The URL of the embeddable content.
srcdoc{{ HTMLElement("iframe") }}
srclang{{ HTMLElement("track") }}
start{{ HTMLElement("ol") }}Defines the first number if other than 1.
step{{ HTMLElement("input") }}
style全局属性定义CSS样式，这些样式会覆盖之前设置的样式。
summary{{ HTMLElement("table") }}
tabindex全局属性Overrides the browser's default tab order and follows the one specified instead.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}
title全局属性当鼠标悬停在元素上面时，提示框显示的文本。
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}定义元素的类型。
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }}
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}定义页面加载时，在元素内显示的默认值。
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Note: In some instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in which case the CSS {{ Cssxref("width") }} property should be used instead. In other cases, such as {{ HTMLElement("canvas") }}, the width must be specified with this attribute.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
+ +

内容属性和 IDL属性

+ +

在 HTML 中，大多数属性都有两副面孔：内容属性和 IDL（接口描述语言）属性。

+ +

内容属性需要你在内容（HTML 代码）中设置，而且可以通过 {{domxref("element.setAttribute()")}} 或 {{domxref("element.getAttribute()")}}来设置。内容属性常常是一个字符串，即使里面的值是一个证书。例如，要将 {{HTMLElement("input")}} 元素的 maxlength 设置为 42，你需要在元素中调用 setAttribute("maxlength", "42") 。

+ +

IDL 属性（attribute）也就是一个 JavaScript 属性（property）。你可以使用 JavaScript 属性如 element.foo 来设置这些属性。当你需要获取 IDL 属性的值时，IDL 属性总会使用隐含的内容属性的值（可能先经过转换）来返回一个值。同样地，当你设置这个值时，这个值会保存在内容属性中。换句话说，IDL 属性本质上反映了内容属性。

+ +

大多数时候，IDL 属性会返回元素确实在用的值。例如，{{HTMLElement("input")}} 的默认 type 是 "text"，所以如果你设置 input.type="foobar"，<input> 元素仍然会是文本类型（在外观上和表现上），但 "type" 内容属性的值是 "foobar"。然而，type IDL 属性依旧会返回字符串 "text"。

+ +

IDL attributes 并不总是字符串；例如 input.maxlength 是一个数字（一个有符号的 long 类型）。使用 IDL 属性时，你读取或设置值的类型都是要求的类型。所以 input.maxlength 总会返回一个数字，而如果你要设置 input.maxlength，也需要使用数字。如果你传入了别的类型，则会根据标准 JavaScript 的类型转换规则被转换为数字。

+ +

IDL 属性可以 反映其他类型，如 unsigned long, URLs, booleans 等。不幸的是，并没有清晰的规则规定一个属性的 IDL 属性与相关的内容属性如何关联。大多数时候，这会遵守 规范中列出的规则，但有时并不遵守。HTML 规范尝试将这件事尽可能变得对开发者友好，但由于很多原因（大多是历史原因），一些属性表现得很奇怪（例如 select.size），你就需要阅读规范以理解它们实际上到底如何表现。

+ +

布尔值属性

+ +

一些内容属性（例如 required, readonly, disabled）是布尔值属性。如果一个布尔值属性存在，则其值是 true，如果不存在，其值是  false。

+ +

HTML5 定义了布尔值属性允许的取值：如果属性存在，其值必须是一个空字符串（即该属性的值未分配），或者是一个大小写无关的 ASCII 字符串，该字符串与属性名严格相同，前后都没有空格。下述例子是为一个布尔值属性取值的几个有效方式。

+ +
<div itemscope> This is valid HTML but invalid XML. </div>
+<div itemscope=itemscope> This is also valid HTML but invalid XML. </div>
+<div itemscope=""> This is valid HTML and also valid XML. </div>
+<div itemscope="itemscope"> This is also valid HTML and XML, but perhaps a bit verbose. </div>
+ +

再明确一点，布尔值属性不能取值为 "true" 和 "false"。如果需要表示 false 值，布尔值属性需要整个忽略不写。这个限制澄清了一些常见误会：比如在元素中设置 checked="false" ，元素的 checked 属性会被解读为 true，因为这个属性出现了。

+ +

参见

+ + diff --git "a/files/zh-cn/web/html/attributes/\350\207\252\345\212\250\345\256\214\346\210\220\345\261\236\346\200\247/index.html" "b/files/zh-cn/web/html/attributes/\350\207\252\345\212\250\345\256\214\346\210\220\345\261\236\346\200\247/index.html" new file mode 100644 index 0000000000..af7452c6f7 --- /dev/null +++ "b/files/zh-cn/web/html/attributes/\350\207\252\345\212\250\345\256\214\346\210\220\345\261\236\346\200\247/index.html" @@ -0,0 +1,258 @@ +--- +title: The HTML 自动完成属性 +slug: Web/HTML/Attributes/自动完成属性 +tags: + - HTML + - 参考 + - 地址 + - 密码 + - 属性 + - 用户名 + - 电话号码 + - 自动完成 + - 邮件地址 +translation_of: Web/HTML/Attributes/autocomplete +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

HTML autocomplete 属性可用于以文本或数字值作为输入的 {{HTMLElement("input")}} 元素 ， {{HTMLElement("textarea")}} 元素, {{HTMLElement("select")}} 元素, 和{{HTMLElement("form")}} 元素。 autocomplete 允许web开发人员指定，如果有任何权限 {{Glossary("user agent")}} 必须提供填写表单字段值的自动帮助，并为浏览器提供关于字段中所期望的信息类型的指导。

+ +

建议值的来源通常取决于浏览器。 通常，值来自用户输入的过去值，但它们也可能来自预先配置的值。 例如，浏览器可能允许用户保存其姓名，地址，电话号码和电子邮件地址，以实现自动完成目的。 也许浏览器提供了保存加密的信用卡信息的功能，以便在身份验证过程后自动完成。

+ +

如果 {{HTMLElement("input")}}, {{HTMLElement("select")}} 或{{HTMLElement("textarea")}} 元素 没有 autocomplete 属性, t则该浏览器将使用该元素的表单的 autocomplete 属性所有者，它们可是元素的后代 {{HTMLElement("form")}} 元素 也可以是其  id  由元素{{htmlattrxref("form", "input")}} 属性指定的  <form>。

+ +

有关更多信息，请参见 {{HTMLElement("form")}} 中的{{htmlattrxref("autocomplete", "form")}}  属性。

+ +
+

为了提供自动完成功能，用户代理可能需要<input>/<select>/<textarea> 元素才能:

+ +
    +
  1. 具有 name 和/或 id 属性
    2. +
  2. 成为 <form>  的后代
    3. +
  3. 具有 {{HTMLElement("input/submit", "submit")}} 按钮的表单
    4. +
+
+ +

价值

+ +
+
"off"
+
浏览器不允许为此字段自动输入或选择一个值。 文档或应用程序可能提供其自己的自动完成功能，或者出于安全方面的考虑，要求不要自动输入该字段的值。 +
注意: 在大多数现代浏览器中， autocomplete 设置为 "off" 不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。 请参阅 the autocomplete attribute and login fields.
+
+
"on"
+
允许浏览器自动完成输入。 没有提供有关该字段中期望的数据类型的指导，因此浏览器可以使用自己的判断。
+
"name"
+
该字段期望该值是一个人的全名。 通常首选使用“名称”而不是将名称分解为各个组成部分，因为这样可以避免处理各种各样的人类名称及其结构。 但是，如果需要将名称分解为各个组成部分，则可以使用以下自动完成值： +
+
"honorific-prefix"
+
前缀或标题，例如“ Mrs.”，“ Mr.”，“ Miss”，“ Ms.”，“ Dr.”或“ Mlle.”。
+
"given-name"
+
给定的（或“名字”）名称。
+
"additional-name"
+
中间名。
+
"family-name"
+
姓氏（或“姓氏”）。
+
"honorific-suffix"
+
后缀，例如 "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".
+
"nickname"
+
昵称或名称。
+
+
+
"email"
+
电子邮件地址。
+
"username"
+
用户名或帐户名。
+
"new-password"
+
新密码。 创建新帐户或更改密码时，应将其用于“输入新密码”或“确认新密码”字段，而不是通常出现的“输入当前密码”字段。 浏览器可以使用它来避免意外填写现有密码，并在创建安全密码时提供帮助（另请参见 Preventing autofilling with autocomplete="new-password").
+
"current-password"
+
用户的当前密码
+
"one-time-code"
+
用于验证用户身份的一次性代码。
+
"organization-title"
+
职务或组织内某人的职务，例如“高级技术作家”，“总裁”或“助理部队负责人”。
+
"organization"
+
公司或组织名称，例如“ Acme Widget Company”或“ American Girl Scouts of America”。
+
"street-address"
+
街道地址。 它可以是多行文本，应在第二个行政级别（通常是城市或城镇）内完全标识地址的位置，但不应包括城市名称，邮政编码或邮政编码或国家/地区名称。
+
"address-line1", "address-line2", "address-line3"
+
街道地址的每一行。 仅在还存在 "street-address" 的情况下，才应提供这些内容。.
+
"address-level4"
+
在具有四个级别的地址中，粒度最细的 {{anch("Administrative levels in addresses", "administrative level")}}。
+
"address-level3"
+
第三个 {{anch("Administrative levels in addresses", "administrative level")}}, 在具有至少三个管理级别的地址中。
+
"address-level2"
+
第二个 {{anch("Administrative levels in addresses", "administrative level")}}, 在地址中至少有两个。 在具有两个行政级别的国家/地区中，通常是地址所在的城市，城镇，村庄或其他地区。
+
"address-level1"
+
地址中的第一个 {{anch("Administrative levels in addresses", "administrative level")}} 。 通常是地址所在的省份。 在美国，这就是州。 在瑞士，行政区。 在英国，小镇。
+ “国家”
+
"country"
+
国家代码。
+
"country-name"
+
一个国家的名字。
+
"postal-code"
+
邮政编码（在美国，这是邮政编码）。
+
"cc-name"
+
打印在付款工具（例如信用卡）上或与之关联的全名。 通常，使用全名字段比将名称分成多个部分更可取。
+
"cc-given-name"
+
在信用卡之类的付款工具上给出的给定（名字）名称。
+
"cc-additional-name"
+
付款工具或信用卡上的中间名。
+
"cc-family-name"
+
信用卡上的姓氏。
+
"cc-number"
+
信用卡号码或其他标识付款方式的号码，例如帐号。
+
"cc-exp"
+
付款方式的到期日期，通常为“ 月份 / 年份”或“ 月份 / 年份”形式。
+
"cc-exp-month"
+
付款方式到期的月份。
+
"cc-exp-year"
+
付款方式到期的年份。.
+
"cc-csc"
+
付款工具的安全码； 在信用卡上，这是信用卡背面的3位数验证码。
+
"cc-type"
+
付款方式的类型（例如“ Visa”或“ Master Card”）。
+
"transaction-currency"
+
进行交易的货币。
+
"transaction-amount"
+
以 "transaction-currency" 指定的货币表示的金额，用于支付形式。
+
"language"
+
作为有效的 BCP 47 语言标记提供的首选语言。
+
"bday"
+
出生日期，作为完整日期。
+
"bday-day"
+
出生日期的月份中的一天。
+
"bday-month"
+
出生日期的月份。
+
"bday-year"
+
出生日期的年份。
+
"sex"
+
性别身份（例如“女性”，“法法芬”，“男性”），不带换行符的自由格式文本。
+
"tel"
+
+

完整的电话号码，包括国家/地区代码。 如果您需要将电话号码分为几个部分，则可以将以下值用于这些字段：

+ +
+
"tel-country-code"
+
国家/地区代码，例如美国，加拿大和北美其他地区以及加勒比海部分地区的“ 1”。
+
"tel-national"
+
不含国家/地区代码部分的完整电话号码，包括国家/地区内部前缀。 对于电话号码“ 1-855-555-6502”，该字段的值为“ 855-555-6502”。
+
"tel-area-code"
+
区号，如果适用，可应用任何国家或地区内部前缀。
+
"tel-local"
+
不带国家或地区代码的电话号码。 这可以进一步分为两部分，分别是具有交换号码的电话号码，然后是交换局中的号码。 对于电话号码“ 555-6502”， 对于“ 555”使用 "tel-local-prefix" ，对于"6502"使用  "tel-local-suffix" 。
+
+
+
"tel-extension"
+
电话号码中的电话分机代码，例如旅馆中的房间或套房号或公司中的办公室分机号。
+
"impp"
+
即时消息协议端点的URL，例如“ xmpp：username@example.net”。
+
"url"
+
URL，例如在给定表单中其他字段的上下文的情况下的主页或公司网站地址等。
+
"photo"
+
代表表单中其他字段中提供的个人，公司或联系信息的图像的URL。
+
+ +

有关更多详细信息，请参见 WHATWG 标准。 

+ +
+

注意: 与其他浏览器不同， autocomplete 属性还控制Firefox是否会跨页面加载保持— 是否在整个页面加载期间保持  <input> 元素, <textarea> 元素, 或整个 <form> 的动态禁用状态和（如果适用）动态检查状态。 持久性功能默认情况下处于启用状态。 将 autocomplete 属性的值设置为off 将禁用此功能。即使autocomplete 属性通常由于其type而不适用，也可以这样做。 参考 {{bug(654072)}}.

+
+ +

例子

+ +
<div>
+  <label for="cc-number">Enter your credit card number</label>
+  <input type="number" name="cc-number" id="cc-number" autocomplete="off">
+</div>
+ +

地址的行政级别

+ +

四个行政级别字段 (address-level1 到 address-level4) 以提高地址所在国家内的精确度的方式描述地址。每个国家都有自己的行政级别系统，在写地址时可以按不同的顺序排列。

+ +

address-level1 始终代表最广泛的行政区划;它是地址中除国家名之外最不特定的部分。

+ +

表单布局的灵活性

+ +

鉴于不同的国家/地区以不同的方式写出地址，每个字段都位于地址内的不同位置，甚至完全是不同的字段集和数量，因此，如果可能的话，您的站点能够切换到预期的布局会很有帮助 由您的用户在提供地址输入表格时给出，并给出地址所在的国家/地区。

+ +

变化

+ +

每个行政级别的使用方式因国家/地区而异。 以下是一些示例； 这并不是详尽的清单。

+ +

美国

+ +

美国境内的典型家庭住址如下所示：

+ +

大街432号
+ Exampleville CA 95555

+ +

在美国，地址中最不明确的部分是州，在这种情况下为“ CA”（美国邮政服务的正式缩写为“ California”）。 因此，address-level1 是状态，在这种情况下为“ CA”。

+ +

地址的倒数第二个特定部分是城市或城镇名称，因此在此示例地址中， address-level2 为“ Exampleville”。

+ +

美国地址不使用3级及更高级别。

+ +

英国

+ +

在英国，地址输入表单通常包含两个地址级别以及一个，两个或三个地址行，具体取决于地址。 完整的地址如下所示：

+ +

Frogmarch街103号
+ 上层包装
+ 苏塞克斯
+ TN99 8ZZ

+ +

地址级别为：

+ + + +

邮政编码是分开的。 请注意，您实际上可以仅使用邮政编码和 address-line1 在英国成功发送邮件, 因此它们应该是唯一的必填项，但通常人们会提供更多详细信息。

+ +

中国

+ +

中国可以使用多达三个行政级别：省，市和区。

+ +

技术指标

+ + + + + + + + + + + + + + + + + + + + + +
规格状态评论
{{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML5.2')}}
{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("html.global_attributes.autocomplete")}}

+ +

另请详见

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