Skip to content

Latest commit

 

History

History
328 lines (237 loc) · 22.7 KB

index.md

File metadata and controls

328 lines (237 loc) · 22.7 KB
Raw
title short-title slug l10n
HTML 属性: autocomplete
autocomplete
Web/HTML/Attributes/autocomplete
sourceCommit
06b418a190b8e4a46682ab706d14984e7db34862

{{HTMLSidebar}}

HTML の autocomplete 属性は、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆することができるのに加え、{{Glossary("user agent", "ユーザーエージェント")}}がフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定することができます。

入力値としてテキストまたは数値を取る {{HTMLElement("input")}} 要素、 {{HTMLElement("textarea")}} 要素、 {{HTMLElement("select")}} 要素、 {{HTMLElement("form")}} 要素で利用できます。

{{EmbedInteractiveExample("pages/tabbed/attribute-autocomplete.html", "tabbed-shorter")}}

解説

autocomplete 属性は、フォームコントロールに事前入力を行う方法、あるいは事前入力を行うかどうかを指定するヒントをユーザーエージェントに提供します。この属性の値は、キーワード off または on、あるいは空白で区切られたトークンの順序付きリストです。

<input autocomplete="off" />
<input autocomplete="on" />
<input autocomplete="shipping street-address" />
<input autocomplete="section-user1 billing postal-code" />

{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素に autocomplete 属性がない場合、ブラウザーはその要素の所有元フォームの autocomplete 属性を使用します。所有元フォームとは、要素の form 属性で指定された id に一致する <form> （存在する場合）か、より一般的には、その要素を内部に含んでいる <form> です。

Note

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

  1. name や id 属性を持つこと
  2. <form> 要素の子孫であること
  3. {{HTMLElement("input/submit", "submit")}} ボタンを持っているフォームが所有元であること

同じトークンのリストが複数のフォームコントロールで使用されている場合、ユーザーエージェントは、同じ autocomplete 値のすべての出現箇所を、同じデータ値で自動入力します。

トークンによっては複数回、異なる期待値で使用される場合があります。例えば zip-code トークンなどは、フォーム内で配送先と請求先の両方の住所に含まれることがあります。複数の異なるトークンを空白区切りリストで指定すると、関連するフォームコントロールに固有の自動入力値が与えられます。この場合、 autocomplete="shipping zip-code" と autocomplete="billing zip-code" のようにします。

自動入力値の中には、複数回再利用する必要がある場合があります。例えば、フォームには複数の配送先住所が含まれている可能性があり、その場合は異なる値が入力されることが期待される複数の "shipping zip-code" の項目が含まれることがあります。 このような場合、自動入力の値を一意にするために、空白で区切ったトークンリストの最初のトークンを section-* というトークンにすることができます。トークンの最初の 8 文字は常に "section-" という文字列で、その後に英数字の文字列が続きます。 section-* トークンと同じ英数字列が割り当てられたすべてのフォームフィールドは、同じ名前付きグループに属します。

autocomplete 属性を {{HTMLElement("input/hidden", "hidden")}} 入力要素 (<input type="hidden">) に含める場合は、その値は空白で区切ったトークンの順序付きリストでなければなりません。 on および off キーワードは許可されていません。

提案値の元となる情報は、通常はブラウザーに委ねられます。通常はユーザーが過去に入力した値が使用されますが、事前に設定された値が使用される場合もあります。例えば、ブラウザーはユーザーの名前、住所、電話番号、メールアドレスを自動入力用に保存することがあります。また、認証手続きを経た上で、暗号化されたクレジットカード情報を保存して自動入力を行う機能を提供することもあります。

Note

Firefox は他のブラウザーと異なり、autocomplete 属性で、 <input> 要素、 <textarea> 要素、 <form> 全体の動的な無効状態や動的なチェック状態を、ページの再読み込み後も保持するかどうかを制御します。この保持機能は既定で有効です。 autocomplete 属性の値を off に設定すると、この機能は無効になります。これは、 autocomplete 属性が通常は適用されない type の場合でも動作します。 Firefox バグ 654072を参照してください。

値

この属性の値は、 off または on のどちらかのキーワード、または自動入力値の意味を記述した空白区切りの <token-list> のいずれかです。

  • off

    • : ブラウザーはこのフィールドの値を自動的に入力または選択することが許可されていません。文書やアプリケーションが独自の自動入力機能を提供していたり、セキュリティ上の理由でフィールドの値を自動的に入力しないよう要求していたりする可能性はあります。

      [!NOTE] ほとんどの現行ブラウザーでは autocomplete 属性を "off" に設定しても、ブラウザーのパスワードマネージャーがユーザー名やパスワードを保存したいかをユーザーに問い合わせたり、ログインフォームにそれらを自動入力したりすることを抑制できません。ログインフィールドの自動入力の管理をご覧ください。

  • on

    • : ブラウザーが自動入力することが許可されています。フィールドに求められているデータ型としてのガイダンスが提供されていないので、ブラウザーは独自の判断を行うかもしれません。

  • <token-list>

    • : 空白区切りのトークンの集合で、自動入力の詳細トークンの前にオプションで、名前付きグループ化と、請求や配送のグループ化トークンが続きます。電話番号、メールアドレス、およびメッセージングプロトコルトークンの前には、受信者の種類を識別するトークンが付きます。

詳細情報は WHATWG Standard を参照してください。

トークンリストのトークン

<token-list> のオプションには、次のオプションをこの順に指定します。

  1. グループ名トークン
  2. グループ化識別子
  3. 詳細トークン
  4. ウェブ認証

名前付きグループ

フォームフィールドの名前付きグループを作成するには、オプションで section-* トークンを使用することができます。指定する場合、このトークンは空白区切りのトークンのリストの最初のトークンでなければなりません。

  • section-*
    • : フォームコントロールのグループの名前を定義します。最初の 8 文字が "section-" という文字列で、大文字と小文字が区別され、その後にさらに文字が続くトークンです。同じトークンで始まるフォームコントロールは、すべてその名前付きグループに属します。

グループ化識別子

オプションで shipping または billing のグループ化識別子です。

  • shipping
    • : 後続のトークンによって識別されるフィールドは、配送先住所または連絡先情報の一部です。
  • billing
    • : 後続のトークンによって識別されるフィールドは、請求先住所または連絡先情報の一部です。

詳細トークン

詳細トークンリストはそれぞれが空白区切りで、連絡先種別とデジタル連絡先情報をこの順で、または空白区切りの他のトークンリストを指定します。

連絡先種別

連絡先種別を識別するトークンには、以下のものがあります。

  • home
    • : 後続のトークンによって識別される連絡先種別は、受信者の居住地に連絡するためのものです。
  • work
    • : 後続のトークンによって識別される連絡先種別は、受信者の職場に連絡するためのものです。
  • mobile
    • : 後続のトークンによって識別される連絡先種別は、場所に関係なく受信者に連絡するためのものです。
  • fax
    • : 後続のトークンによって識別される受信者はファックス用です。
  • page
    • : 後続のトークンによって識別される受信者は、ページャーまたはポケベル用です。
デジタル連絡先トークン

電話番号または番号の構成部分、電話の拡張子、電子メールアドレス、またはインスタントメッセージングプロトコル用のトークンまたはトークンのグループです。

  • 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

    • : 電話番号の下の内線番号です。例えば、ホテルの部屋番号やスイートルーム番号、企業オフィスの内線番号などです。

  • email

    • : メールアドレス。

  • impp

    • : インスタントメッセージングプロトコルの端点、たとえば xmpp:[email protected] などです。
その他のトークン

フォームフィールドが電話番号、メールアドレス、またはインスタントメッセージプロトコルでない場合、トークンの空白区切りリストの前に連絡先種別は示されません。

  • name

    • : このフィールドは人の氏名の値が期待されています。一般的には、氏名を各部分に分割すると、多様な人の氏名を扱ったり構成したりしにくくなるため、 name を使用することが推奨されます。しかし、氏名をそれぞれの部分に分割する必要があるのであれば、以下の autocomplete の値を使用することができます。

      • honorific-prefix
        • : 接頭辞や敬称 (例: "Mr.", "Ms.", "Dr.", "Mlle")
      • given-name
        • : 名 (ファーストネーム)
      • additional-name
        • : ミドルネーム
      • family-name
        • : 苗字 (ファミリーネーム、「ラスト」ネーム)
      • honorific-suffix
        • : 接尾辞や敬称 (例: "Jr.", "B.Sc.", "PhD.", "MBASW", "IV")
      • nickname
        • : ペンネームやハンドルネーム

  • username

    • : ユーザー名またはアカウント名。

  • new-password

    • : 新しいパスワード。新しいアカウントを作成したりパスワードを変更したりした場合は、一般的な「現在のパスワードを入力してください」ではなく、「新しいパスワードを入力してください」または「パスワードの確認」欄で使用してください。これは意図せずに既存のパスワードが意図せずに入力されるのを防いだり、安全なパスワードを生成するための助けになったりします。

  • current-password

    • : ユーザーの現在のパスワードです。

  • one-time-code

    • : ログインフローで追加要素として使用する、ユーザー ID を確認するためのワンタイムパスワード (OTP)。 一般的には、SMS、電子メール、認証アプリケーションなど、チャンネル外のメカニズムを通じて受信されるコードです。

  • 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

  • bday

    • : 生年月日の全体です。
      • bday-day
        • : 生年月日の日の部分です。
      • bday-month
        • : 生年月日の月の部分です。
      • bday-year
        • : 生年月日の年の部分です。

  • sex

    • : 性別で ("女", "男", "Female", "Fa'afafine", "Hijra", "Male", "Nonbinary" など)、改行のない自由な形式のテキストです。

  • url

    • : URL です。このフォームの他のフィールドの文脈から見て適切な、ホームページのや企業ウェブサイトのアドレスです。

  • photo

    • : このフォームの他のフィールドの文脈における人物、企業、連絡先情報を表す画像の URL です。

ウェブ認証トークン

{{htmlelement("input")}} と {{htmlelement("textarea")}} では、 webauthn トークンを最後に含めることで、ユーザーがコントロールとやりとりする際に、ユーザーエージェントが公開鍵認証情報を表示する必要があることを示すことができます。

  • webauthn {{experimental_inline}}
    • : ウェブ認証 API によって、条件付きの {{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} 呼び出し（すなわち、 mediation: 'conditional' を含む呼び出し）によってリクエストされた、生成されたパスキー。詳しくは Sign in with a passkey through form autofill を参照してください。

例

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

住所における行政レベル

行政レベルの 4 つの欄 (address-level1 ～ address-level4) は、住所が存在する国の中で、詳細さのレベルを高めるためのものです。行政レベルの体系は国によって異なり、住所を表記する際に様々な順序でレベルを並べ替えられることがあります。

address-level1 は常に最も広い行政単位を表します。これは住所のもっとも広い部分であり、国名に近い部分です。

フォームのレイアウトの自由度

国が異なれば住所の書き方も異なり、住所内でそれぞれの欄の位置も異なっており、フィールドの組み合わせや数も完全に異なることを考慮すると、可能であれば、サイトが住所入力フォームを表示する際に、住所がある国の指定に応じて、ユーザーが期待するレイアウトに切り替えることができると便利です。

変化形

それぞれの行政レベルの使用方法は国によって異なります。以下にいくつかの例を示しますが、これは網羅的なリストではありません。

アメリカ

アメリカ国内の一般的な住所は次のようになります。

432 Anywhere St Exampleville CA 95555

アメリカでは、住所の中で最も大きな括りの部分は州であり、この場合は "CA" (米国郵政公社の公式な略号で "California" の意味) となります。したがって address-level1 は州、この場合は "CA" となります。

住所で 2 番目に大きな括りの部分は市区町村名なので、 address-level2 はこの例の住所では "Exampleville" となります。

アメリカの住所では、 3 以上の行政単位は使用されません。

イギリス

イギリスの住所入力フォームでは、住所のレベルは 1 つで、住所に応じて 1 ～ 3 行の住所が含まれることがあります。完全な住所は次のようになります。

103 Frogmarch Street Upper-Wapping Winchelsea TN99 8ZZ

住所レベルは次のようになります。

  • address-level1: ポストタウン — この場合は "Winchelsea" です。
  • address-line2: 地区 — この場合は "Upper-Wapping" です。
  • address-line1: 家屋番号や通りの詳細 — "103 Frogmarch Street"

郵便番号は別な行です。イギリスで郵便物をうまく配達するためには、実際には郵便番号と address-line1 だけでよいので、必須項目はこれらのみですが、通常はもっと詳細な情報を提供することが多いので注意してください。

中国

中国では、省、市、区の 3 つの行政レベルを使用することができます。

6 桁の郵便番号は必ずしも必要ではありませんが、提供される場合は、わかりやすくするためにラベルと一緒に別置しています。例えば次のようになります。

北京市东城区建国门北大街 8 号华润大厦 17 层 1708 单元 邮编：100005

日本

日本の住所は一般的に 1 行で、広域的な部分から詳細な部分の順に (アメリカとは逆順に) 書かれます。住所には 2 ～ 3 の行政レベルが含まれます。建物名や部屋番号を表すために、もう 1 行が追加されることもあります。例を示します。

〒 381-0000 長野県長野市某町 123

「〒」と続く 7 桁の番号は郵便番号です。

address-level1 は都道府県に使用されます。この場合は「長野県」です。 address-level2 は普通、市区町村や郡に使われます。この場合は「長野市」です。「某町 123」は address-line1 で、町名と地番からなります。

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報