diff options
Diffstat (limited to 'files/zh-cn/web/html/attributes/autocomplete/index.html')
| -rw-r--r-- | files/zh-cn/web/html/attributes/autocomplete/index.html | 259 |
1 files changed, 259 insertions, 0 deletions
diff --git a/files/zh-cn/web/html/attributes/autocomplete/index.html b/files/zh-cn/web/html/attributes/autocomplete/index.html new file mode 100644 index 0000000000..e38b48cc4a --- /dev/null +++ b/files/zh-cn/web/html/attributes/autocomplete/index.html @@ -0,0 +1,259 @@ +--- +title: The HTML 自动完成属性 +slug: Web/HTML/Attributes/autocomplete +tags: + - HTML + - 参考 + - 地址 + - 密码 + - 属性 + - 用户名 + - 电话号码 + - 自动完成 + - 邮件地址 +translation_of: Web/HTML/Attributes/autocomplete +original_slug: Web/HTML/Attributes/自动完成属性 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>HTML <code>autocomplete</code> 属性可用于以文本或数字值作为输入的 {{HTMLElement("input")}} 元素 ， {{HTMLElement("textarea")}} 元素, {{HTMLElement("select")}} 元素, 和{{HTMLElement("form")}} 元素。 <span class="seoSummary"><code>autocomplete</code> </span>允许web开发人员指定，如果有任何权限<span class="seoSummary"> {{Glossary("user agent")}} </span>必须提供填写表单字段值的自动帮助，并为浏览器提供关于字段中所期望的信息类型的指导。</p> + +<p>建议值的来源通常取决于浏览器。 通常，值来自用户输入的过去值，但它们也可能来自预先配置的值。 例如，浏览器可能允许用户保存其姓名，地址，电话号码和电子邮件地址，以实现自动完成目的。 也许浏览器提供了保存加密的信用卡信息的功能，以便在身份验证过程后自动完成。</p> + +<p>如果 {{HTMLElement("input")}}, {{HTMLElement("select")}} 或{{HTMLElement("textarea")}} 元素 没有 <code>autocomplete</code> 属性, t则该浏览器将使用该元素的表单的 <code>autocomplete</code> 属性所有者，它们可是元素的后代 {{HTMLElement("form")}} 元素 也可以是其 <code>id</code> 由元素{{htmlattrxref("form", "input")}} 属性指定的 <code><form></code>。</p> + +<p>有关更多信息，请参见 {{HTMLElement("form")}} 中的{{htmlattrxref("autocomplete", "form")}} 属性。</p> + +<div class="blockIndicator note"> +<p>为了提供自动完成功能，用户代理可能需要<code><input></code>/<code><select></code>/<code><textarea></code> 元素才能:</p> + +<ol> + <li>具有 <code>name</code> 和/或 <code>id</code> 属性</li> + <li>成为 <code><form> </code> 的后代</li> + <li>具有 {{HTMLElement("input/submit", "submit")}} 按钮的表单</li> +</ol> +</div> + +<h2 id="价值">价值</h2> + +<dl> + <dt>"<code>off</code>"</dt> + <dd>浏览器不允许为此字段自动输入或选择一个值。 文档或应用程序可能提供其自己的自动完成功能，或者出于安全方面的考虑，要求不要自动输入该字段的值。 + <div class="note"><strong>注意:</strong> 在大多数现代浏览器中， <code>autocomplete</code> 设置为 "<code>off</code>" 不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。 请参阅 <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>.</div> + </dd> + <dt>"<code>on</code>"</dt> + <dd>允许浏览器自动完成输入。 没有提供有关该字段中期望的数据类型的指导，因此浏览器可以使用自己的判断。</dd> + <dt>"<code>name</code>"</dt> + <dd>该字段期望该值是一个人的全名。 通常首选使用“名称”而不是将名称分解为各个组成部分，因为这样可以避免处理各种各样的人类名称及其结构。 但是，如果需要将名称分解为各个组成部分，则可以使用以下自动完成值： + <dl> + <dt>"<code>honorific-prefix</code>"</dt> + <dd>前缀或标题，例如“ Mrs.”，“ Mr.”，“ Miss”，“ Ms.”，“ Dr.”或“ Mlle.”。</dd> + <dt>"<code>given-name</code>"</dt> + <dd>给定的（或“名字”）名称。</dd> + <dt>"<code>additional-name</code>"</dt> + <dd>中间名。</dd> + <dt>"<code>family-name</code>"</dt> + <dd>姓氏（或“姓氏”）。</dd> + <dt>"<code>honorific-suffix</code>"</dt> + <dd>后缀，例如 "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".</dd> + <dt>"<code>nickname</code>"</dt> + <dd>昵称或名称。</dd> + </dl> + </dd> + <dt>"<code>email</code>"</dt> + <dd>电子邮件地址。</dd> + <dt>"<code>username</code>"</dt> + <dd>用户名或帐户名。</dd> + <dt>"<code>new-password</code>"</dt> + <dd>新密码。 创建新帐户或更改密码时，应将其用于“输入新密码”或“确认新密码”字段，而不是通常出现的“输入当前密码”字段。 浏览器可以使用它来避免意外填写现有密码，并在创建安全密码时提供帮助（另请参见 <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password">Preventing autofilling with autocomplete="new-password"</a>).</dd> + <dt>"<code>current-password</code>"</dt> + <dd>用户的当前密码</dd> + <dt>"<code>one-time-code</code>"</dt> + <dd>用于验证用户身份的一次性代码。</dd> + <dt>"<code>organization-title</code>"</dt> + <dd>职务或组织内某人的职务，例如“高级技术作家”，“总裁”或“助理部队负责人”。</dd> + <dt>"<code>organization</code>"</dt> + <dd>公司或组织名称，例如“ Acme Widget Company”或“ American Girl Scouts of America”。</dd> + <dt>"<code>street-address</code>"</dt> + <dd>街道地址。 它可以是多行文本，应在第二个行政级别（通常是城市或城镇）内完全标识地址的位置，但不应包括城市名称，邮政编码或邮政编码或国家/地区名称。</dd> + <dt>"<code>address-line1</code>", "<code>address-line2</code>", <code>"address-line3"</code></dt> + <dd>街道地址的每一行。 仅在还存在 "<code>street-address</code>" 的情况下，才应提供这些内容。.</dd> + <dt>"<code>address-level4</code>"</dt> + <dd>在具有四个级别的地址中，粒度最细的 {{anch("Administrative levels in addresses", "administrative level")}}。</dd> + <dt>"<code>address-level3</code>"</dt> + <dd>第三个 {{anch("Administrative levels in addresses", "administrative level")}}, 在具有至少三个管理级别的地址中。</dd> + <dt>"<code>address-level2</code>"</dt> + <dd>第二个 {{anch("Administrative levels in addresses", "administrative level")}}, 在地址中至少有两个。 在具有两个行政级别的国家/地区中，通常是地址所在的城市，城镇，村庄或其他地区。</dd> + <dt>"<code>address-level1</code>"</dt> + <dd>地址中的第一个 {{anch("Administrative levels in addresses", "administrative level")}} 。 通常是地址所在的省份。 在美国，这就是州。 在瑞士，行政区。 在英国，小镇。<br> + “国家”</dd> + <dt>"<code>country</code>"</dt> + <dd>国家代码。</dd> + <dt>"<code>country-name</code>"</dt> + <dd>一个国家的名字。</dd> + <dt>"<code>postal-code</code>"</dt> + <dd>邮政编码（在美国，这是邮政编码）。</dd> + <dt>"<code>cc-name</code>"</dt> + <dd>打印在付款工具（例如信用卡）上或与之关联的全名。 通常，使用全名字段比将名称分成多个部分更可取。</dd> + <dt>"<code>cc-given-name</code>"</dt> + <dd>在信用卡之类的付款工具上给出的给定（名字）名称。</dd> + <dt>"<code>cc-additional-name</code>"</dt> + <dd>付款工具或信用卡上的中间名。</dd> + <dt>"<code>cc-family-name</code>"</dt> + <dd>信用卡上的姓氏。</dd> + <dt>"<code>cc-number</code>"</dt> + <dd>信用卡号码或其他标识付款方式的号码，例如帐号。</dd> + <dt>"<code>cc-exp</code>"</dt> + <dd>付款方式的到期日期，通常为“ 月份 / 年份”或“ 月份 / 年份”形式。</dd> + <dt>"<code>cc-exp-month</code>"</dt> + <dd>付款方式到期的月份。</dd> + <dt>"<code>cc-exp-year</code>"</dt> + <dd>付款方式到期的年份。.</dd> + <dt>"<code>cc-csc</code>"</dt> + <dd>付款工具的安全码； 在信用卡上，这是信用卡背面的3位数验证码。</dd> + <dt>"<code>cc-type</code>"</dt> + <dd>付款方式的类型（例如“ Visa”或“ Master Card”）。</dd> + <dt>"<code>transaction-currency</code>"</dt> + <dd>进行交易的货币。</dd> + <dt>"<code>transaction-amount</code>"</dt> + <dd>以 "<code>transaction-currency</code>" 指定的货币表示的金额，用于支付形式。</dd> + <dt>"<code>language</code>"</dt> + <dd>作为有效的 <a href="https://en.wikipedia.org/wiki/IETF_language_tag">BCP 47 语言标记</a>提供的首选语言。</dd> + <dt>"<code>bday</code>"</dt> + <dd>出生日期，作为完整日期。</dd> + <dt>"<code>bday-day</code>"</dt> + <dd>出生日期的月份中的一天。</dd> + <dt>"<code>bday-month</code>"</dt> + <dd>出生日期的月份。</dd> + <dt>"<code>bday-year</code>"</dt> + <dd>出生日期的年份。</dd> + <dt>"<code>sex</code>"</dt> + <dd>性别身份（例如“女性”，“法法芬”，“男性”），不带换行符的自由格式文本。</dd> + <dt>"<code>tel</code>"</dt> + <dd> + <p>完整的电话号码，包括国家/地区代码。 如果您需要将电话号码分为几个部分，则可以将以下值用于这些字段：</p> + + <dl> + <dt>"<code>tel-country-code</code>"</dt> + <dd>国家/地区代码，例如美国，加拿大和北美其他地区以及加勒比海部分地区的“ 1”。</dd> + <dt>"<code>tel-national</code>"</dt> + <dd>不含国家/地区代码部分的完整电话号码，包括国家/地区内部前缀。 对于电话号码“ 1-855-555-6502”，该字段的值为“ 855-555-6502”。</dd> + <dt>"<code>tel-area-code</code>"</dt> + <dd>区号，如果适用，可应用任何国家或地区内部前缀。</dd> + <dt>"<code>tel-local</code>"</dt> + <dd>不带国家或地区代码的电话号码。 这可以进一步分为两部分，分别是具有交换号码的电话号码，然后是交换局中的号码。 对于电话号码“ 555-6502”， 对于“ 555”使用 "<code>tel-local-prefix</code>" ，对于"6502"使用 "<code>tel-local-suffix</code>" 。</dd> + </dl> + </dd> + <dt>"<code>tel-extension</code>"</dt> + <dd>电话号码中的电话分机代码，例如旅馆中的房间或套房号或公司中的办公室分机号。</dd> + <dt>"<code>impp</code>"</dt> + <dd>即时消息协议端点的URL，例如“ xmpp：username@example.net”。</dd> + <dt>"<code>url</code>"</dt> + <dd>URL，例如在给定表单中其他字段的上下文的情况下的主页或公司网站地址等。</dd> + <dt>"<code>photo</code>"</dt> + <dd>代表表单中其他字段中提供的个人，公司或联系信息的图像的URL。</dd> +</dl> + +<p>有关更多详细信息，请参见 <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG 标准。 </a></p> + +<div class="note"> +<p><strong>注意:</strong> 与其他浏览器不同， <code>autocomplete</code> 属性还控制Firefox是否会跨页面加载保持— <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">是否在整个页面加载期间保持</a> <code><input></code> 元素, <code><textarea></code> 元素, 或整个 <code><form></code> 的动态禁用状态和（如果适用）动态检查状态。 持久性功能默认情况下处于启用状态。 将 <code>autocomplete</code> 属性的值设置为<code>off</code> 将禁用此功能。即使<code>autocomplete</code> 属性通常由于其<code>type</code>而不适用，也可以这样做。 参考 {{bug(654072)}}.</p> +</div> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><div> + <label for="cc-number">Enter your credit card number</label> + <input type="number" name="cc-number" id="cc-number" autocomplete="off"> +</div></pre> + +<h2 id="地址的行政级别">地址的行政级别</h2> + +<p>四个行政级别字段 (<code>address-level1</code> 到 <code>address-level4</code>) 以提高地址所在国家内的精确度的方式描述地址。每个国家都有自己的行政级别系统，在写地址时可以按不同的顺序排列。</p> + +<p><code>address-level1</code> 始终代表最广泛的行政区划;它是地址中除国家名之外最不特定的部分。</p> + +<h3 id="表单布局的灵活性">表单布局的灵活性</h3> + +<p>鉴于不同的国家/地区以不同的方式写出地址，每个字段都位于地址内的不同位置，甚至完全是不同的字段集和数量，因此，如果可能的话，您的站点能够切换到预期的布局会很有帮助 由您的用户在提供地址输入表格时给出，并给出地址所在的国家/地区。</p> + +<h3 id="变化">变化</h3> + +<p>每个行政级别的使用方式因国家/地区而异。 以下是一些示例； 这并不是详尽的清单。</p> + +<h4 id="美国">美国</h4> + +<p>美国境内的典型家庭住址如下所示：</p> + +<p>大街432号<br> + Exampleville CA 95555</p> + +<p>在美国，地址中最不明确的部分是州，在这种情况下为“ CA”（美国邮政服务的正式缩写为“ California”）。 因此，<code>address-level1</code> 是状态，在这种情况下为“ CA”。</p> + +<p>地址的倒数第二个特定部分是城市或城镇名称，因此在此示例地址中， <code>address-level2</code> 为“ Exampleville”。</p> + +<p>美国地址不使用3级及更高级别。</p> + +<h4 id="英国">英国</h4> + +<p>在英国，地址输入表单通常包含两个地址级别以及一个，两个或三个地址行，具体取决于地址。 完整的地址如下所示：</p> + +<p>Frogmarch街103号<br> + 上层包装<br> + 苏塞克斯<br> + TN99 8ZZ</p> + +<p>地址级别为：</p> + +<ul> + <li><code>address-level1</code>: 在这种情况下，该县为“苏塞克斯”。</li> + <li><code>address-level2</code>: 在这种情况下，城镇为“上层包装”。.</li> + <li><code>address-line1</code>: 房屋/街道详情-“ Frogmarch 街道103号”</li> +</ul> + +<p>邮政编码是分开的。 请注意，您实际上可以仅使用邮政编码和 <code>address-line1</code> 在英国成功发送邮件, 因此它们应该是唯一的必填项，但通常人们会提供更多详细信息。</p> + +<h4 id="中国">中国</h4> + +<p>中国可以使用多达三个行政级别：省，市和区。</p> + +<h2 id="技术指标">技术指标</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规格</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">本页中的兼容性表是由结构化数据生成的。如果您想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送拉请求</div> + +<p>{{Compat("html.global_attributes.autocomplete")}}</p> + +<h2 id="另请详见">另请详见</h2> + +<ul> + <li>The {{htmlelement("input")}} 元素。</li> + <li>The {{htmlelement("select")}} 元素。</li> + <li>The {{htmlelement("textarea")}} 元素。</li> + <li>The {{htmlelement("form")}} 元素。</li> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML 表单</a></li> + <li><a href="/en-US/docs/Web/HTML/Global_attributes">全球属性</a>。</li> +</ul> |