HTML の autocomplete 属性

このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!

HTML の autocomplete 属性は、入力値としてテキストまたは数値を取る <input> 要素、 <textarea> 要素、 <select> 要素、 <form> 要素で利用できます。 autocomplete を使用すると、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆するのと同様に、ユーザーエージェントがフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定します。

提案値の元は、一般にブラウザーに依存します。ふつうは、ユーザーが入力した過去の値からとりますが、あらかじめ構成された値から取得することもあります。例えば、ブラウザーはユーザーに名前、住所、電話番号、メールアドレスを自動補完するために保存させることができます。おそらく、ブラウザーは以降の認証手続で自動補完を行うために、クレジットカード情報を暗号化して保存する機能を提供しているでしょう。

<input>, <select>, <textarea> 要素に autocomplete 属性がない場合、ブラウザーはその要素のフォームオーナー、つまりその要素を子孫に持つ <form> 要素、または <form> 要素で id がその要素の form 属性で指定されているものの autocomplete 属性の値を使用します。

詳しくは、 <form> 要素の autocomplete 属性をご覧ください。

自動補完を提供するために、ユーザーエージェントは <input>/<select>/<textarea> 要素に次のことを要求することがあります。

  1. nameid 属性を持つこと
  2. <form> 要素の子孫であること
  3. フォームが submit ボタンを持つこと

"off"
ブラウザーはこのフィールドの値を自動的に入力または選択することが許可されていません。文書やアプリケーションが独自の自動補完機能を提供していたり、セキュリティ上の理由でフィールドの値を自動的に入力しないよう要求していたりする可能性はあります。
メモ: ほとんどの現行ブラウザーでは autocomplete 属性を "off" に設定しても、ブラウザーのパスワードマネージャーがユーザー名やパスワードを保存したいかをユーザーに問い合わせたり、ログインフォームにそれらを自動入力したりすることを抑制できません。 autocomplete 属性とログインフィールドをご覧ください。
"on"
ブラウザーが自動的に入力を補完することが許可されています。フィールドに求められているデータ型としてのガイダンスが提供されていないので、ブラウザーは独自の判断を行うかもしれません。
"name"
このフィールドは人の氏名の値が期待されています。一般的には、氏名を各部分に分割すると、多様な人の氏名を扱ったり構成したりしにくくなるため、 "name" を使用したほうが推奨されます。しかし、氏名をそれぞれの部分に分割する必要があるのであれば、以下の autocomplete の値を使用することができます。
"honorific-prefix"
接頭辞や敬称 (例: "Mr.", "Ms.", "Dr.", "Mlle")
"given-name"
名 (ファーストネーム)
"additional-name"
ミドルネーム
"family-name"
苗字 (ファミリーネーム、「ラスト」ネーム)
"honorific-suffix"
接尾辞や敬称 (例: "Jr.", "B.Sc.", "MBASW", "II")
"nickname"
ペンネームやハンドルネーム
"email"
メールアドレス。
"username"
ユーザー名またはアカウント名。
"new-password"
新しいパスワード。新しいアカウントを作成したりパスワードを変更したりした場合は、一般的な「現在のパスワードを入力してください」ではなく、「新しいパスワードを入力してください」または「パスワードの確認」欄で使用してください。これは意図せずに既存のパスワードが意図せずに入力されるのを防いだり、安全なパスワードを生成するための助けになったりします (autocomplete="new-password" による自動補完の防止も参照してください)。
"current-password"
ユーザーの現在のパスワードです。
"one-time-code"
ユーザー自身を確認するために使われるワンタイムコードです
"organization-title"
職名や組織内の肩書です (例: "上級技術ライター", "社長", "アシスタントリーダー")
"organization"
起業または団体の名前です。 "Acme Widget Company" や "Girl Scouts of America" など。
"street-address"
住所。複数行のテキストが使用でき、第2管理水準 (普通は市町村) の中で完全に住所を識別できるものですが、市町村名、郵便番号、国名は含めるべきではありません。
"address-line1", "address-line2", "address-line3"
住所のそれぞれの行です。これらは "street-address" も存在する場合のみ存在させることができます。
"address-level4"
住所が4段階まである場合のもっとも細かい管理水準です。
"address-level3"
少なくとも3段階の管理水準がある住所における、3番目の管理水準です。
"address-level2"
少なくとも2段階の管理水準がある住所における、2番目の管理水準です。2つの管理水準がある国では、これはふつう市町村名や、住所のあるその他の地域名を表します。
"address-level1"
住所の最初の管理水準です。これはふつう、住所がある都道府県名です。合衆国では州名になります。スイスでは、カートンになります。イギリスでは、ポストタウンになります。
"country"
国コードです。
"country-name"
国名です。
"postal-code"
郵便番号です (アメリカでは ZIP コードです)。
"cc-name"
クレジットカードなどの支払手段に表示、または関連付けられた氏名です。一般に、氏名の各部分に分割するよりも氏名のフィールドを使う方が推奨されます。
"cc-given-name"
クレジットカードなどの支払手段に指定された下の名前 (ファーストネーム) です。
"cc-additional-name"
クレジットカードなどの支払手段に指定された中間名 (ミドルネーム) です。
"cc-family-name"
クレジットカードなどの支払手段に指定された姓です。
"cc-number"
クレジットカードや番号や、口座番号などの支払手段を識別するその他の番号です。
"cc-exp"
支払手段の有効期限で、ふつうは "MM/YY" または "MM/YYYY" の形です。
"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"
性別で ("Female", "Fa'afafine", "Male" など)、改行のない自由な形式のテキストです。
"tel"
国番号を含む、完全な電話番号です。電話番号を書く部分に分割する必要がある場合は、各フィールドに以下の値を使用することができます。
"tel-country-code"
国コードで、例えば "1" はアメリカ、カナダ、その他の北アメリカとカリブ海の一部です。
"tel-national"
国番号以外の部分の電話番号全体で、市外局番の接頭辞 (日本では 0) を含みます。 "1-855-555-6502" という電話番号については、このフィールドの値は "855-555-6502" となります。
"tel-area-code"
市外局番で、必要に応じて市外局番の接頭辞 (日本では 0) を含みます。
"tel-local"
国番号や市外局番を含まない電話番号です。これはさらに、市内局番と加入者番号の2つに分割することができます。 "555-6502" という電話番号では、 "tel-local-prefix" は "555"、 "tel-local-suffix" は "6502" となります。
"tel-extension"
電話番号の下の内線番号です。ホテルの部屋番号や企業オフィスの内線番号などです。
"impp"
インスタントメッセージングプロトコルの端点、たとえば "xmpp:username@example.net" などです。
"url"
URL です。このフォームの他のフィールドの文脈から見て適切な、ホームページのや企業ウェブサイトのアドレスです。
"photo"
このフォームの他のフィールドの文脈における人物、企業、連絡先情報を表す画像の URL です。

詳しくは WHATWG 仕様書 をご覧ください。

Note: Firefox は他のブラウザーと異なり、 autocomplete 属性で、ページを再読み込みしても <input>動的に無効化した状態や (該当する場合は) 動的に変更したチェック状態を維持するか を制御します。この維持機能は、既定で有効です。 autocomplete 属性の値に off を設定すると、この機能を無効化できます。またこの設定は、type 属性が通常 autocomplete を適用しない値である <input> 要素でも有効です。 バグ 654072 をご覧ください。

Examples

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

Administrative levels in addresses

The four administrative level fields ("address-level1" through "address-level4") describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.

"address-level1" always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.

Form layout flexibility

Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.

Variations

The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.

United States

A typical home address within the United States looks like this:

432 Anywhere St
Exampleville CA 95555

In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus "address-level1" is the state, or "CA" in this case.

The second-least specific portion of the address is the city or town name, so "address-level2" is "Exampleville" in this example address.

United States addresses do not use levels 3 and up.

United Kingdom

The UK uses one or two address levels, depending on the address. These are the post town and, in some instances, the locality.

China

China can use as many as three administrative levels: the province, the city, and the district.

Specifications

Specification Status Comment
HTML 5.2
autocomplete の定義
勧告
HTML Living Standard
autocomplete の定義
現行の標準

Browser compatibility

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
autocompleteChrome 完全対応 66
補足
完全対応 66
補足
補足 Support added for autocomplete on the <textarea> and <select> elements.
完全対応 あり
補足
補足 Originally only supported on the <input> element.
Edge ? Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 66
補足
完全対応 66
補足
補足 Support added for autocomplete on the <textarea> and <select> elements.
完全対応 あり
補足
補足 Originally only supported on the <input> element.
Chrome Android 完全対応 66
補足
完全対応 66
補足
補足 Support added for autocomplete on the <textarea> and <select> elements.
完全対応 あり
補足
補足 Originally only supported on the <input> element.
Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 9.0
補足
完全対応 9.0
補足
補足 Support added for autocomplete on the <textarea> and <select> elements.
完全対応 あり
補足
補足 Originally only supported on the <input> element.
The new-password value.Chrome 完全対応 ありEdge ? Firefox 完全対応 67IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 67Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

See also