path: root/files/ja/web/html/attributes/autocomplete/index.html

---
title: HTML の autocomplete 属性
slug: Web/HTML/Attributes/autocomplete
tags:
  - Addresses
  - Attribute
  - Email addresses
  - Forms
  - HTML
  - Input
  - Phone Numbers
  - Reference
  - Select
  - Text
  - Usernames
  - autocomplete
  - form
  - passwords
  - textarea
  - パスワード
  - メールアドレス
  - ユーザー名
  - 住所
  - 電話番号
translation_of: Web/HTML/Attributes/autocomplete
---
<div>{{HTMLSidebar("Global_attributes")}}</div>

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

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

<p>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素に <code>autocomplete</code> 属性がない場合、ブラウザーはその要素のフォームオーナー、つまりその要素を子孫に持つ {{HTMLElement("form")}} 要素、または <code>&lt;form&gt;</code> 要素で <code>id</code> がその要素の {{htmlattrxref("form", "input")}} 属性で指定されているものの <code>autocomplete</code> 属性の値を使用します。</p>

<p>詳しくは、 {{HTMLElement("form")}} 要素の {{htmlattrxref("autocomplete", "form")}} 属性をご覧ください。</p>

<div class="blockIndicator note">
<p>自動補完を提供するために、ユーザーエージェントは <code>&lt;input&gt;</code>/<code>&lt;select&gt;</code>/<code>&lt;textarea&gt;</code> 要素に次のことを要求することがあります。</p>

<ol>
 <li><code>name</code> や <code>id</code> 属性を持つこと</li>
 <li><code>&lt;form&gt;</code> 要素の子孫であること</li>
 <li>フォームが {{HTMLElement("input/submit", "submit")}} ボタンを持つこと</li>
</ol>
</div>

<h2 id="Values" name="Values">値</h2>

<dl>
 <dt>"<code>off</code>"</dt>
 <dd>ブラウザーはこのフィールドの値を自動的に入力または選択することが許可されていません。文書やアプリケーションが独自の自動補完機能を提供していたり、セキュリティ上の理由でフィールドの値を自動的に入力しないよう要求していたりする可能性はあります。
 <div class="note"><strong>メモ:</strong> ほとんどの現行ブラウザーでは <code>autocomplete</code> 属性を "<code>off</code>" に設定しても、ブラウザーのパスワードマネージャーがユーザー名やパスワードを保存したいかをユーザーに問い合わせたり、ログインフォームにそれらを自動入力したりすることを抑制できません。 <a href="/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">autocomplete 属性とログインフィールド</a>をご覧ください。</div>
 </dd>
 <dt>"<code>on</code>"</dt>
 <dd>ブラウザーが自動的に入力を補完することが許可されています。フィールドに求められているデータ型としてのガイダンスが提供されていないので、ブラウザーは独自の判断を行うかもしれません。</dd>
 <dt>"<code>name</code>"</dt>
 <dd>このフィールドは人の氏名の値が期待されています。一般的には、氏名を各部分に分割すると、多様な人の氏名を扱ったり構成したりしにくくなるため、 "<code>name</code>" を使用したほうが推奨されます。しかし、氏名をそれぞれの部分に分割する必要があるのであれば、以下の <code>autocomplete</code> の値を使用することができます。
 <dl>
  <dt>"<code>honorific-prefix</code>"</dt>
  <dd>接頭辞や敬称 (例: "Mr.", "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.", "MBASW", "II")</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="/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password">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" や "Girl Scouts of America" など。</dd>
 <dt>"<code>street-address</code>"</dt>
 <dd>住所。複数行のテキストが使用でき、第2行政レベル (普通は市町村) の中で完全に住所を識別できるものですが、市町村名、郵便番号、国名は含めるべきではありません。</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>住所が4段階まである場合のもっとも細かい{{anch("Administrative levels in addresses", "行政レベル")}}です。</dd>
 <dt>"<code>address-level3</code>"</dt>
 <dd>少なくとも3段階の行政レベルがある住所において、3番目の{{anch("Administrative levels in addresses", "行政レベル")}}です。</dd>
 <dt>"<code>address-level2</code>"</dt>
 <dd>少なくとも2段階の行政レベルがある住所において、2番目の{{anch("Administrative levels in addresses", "行政レベル")}}です。2つの行政レベルがある国では、これはふつう市町村や、住所のあるその他の地域を表します。</dd>
 <dt>"<code>address-level1</code>"</dt>
 <dd>住所の一番上{{anch("Administrative levels in addresses", "行政レベル")}}です。これはふつう、住所がある都道府県です。合衆国では州になります。スイスでは、カートンになります。イギリスでは、ポストタウンになります。</dd>
 <dt>"<code>country</code>"</dt>
 <dd>国コードです。</dd>
 <dt>"<code>country-name</code>"</dt>
 <dd>国名です。</dd>
 <dt>"<code>postal-code</code>"</dt>
 <dd>郵便番号です (アメリカでは ZIP コードです)。</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>支払手段の有効期限で、ふつうは "MM/YY" または "MM/YYYY" の形です。</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://ja.wikipedia.org/wiki/IETF%E8%A8%80%E8%AA%9E%E3%82%BF%E3%82%B0">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>性別で ("Female", "Fa'afafine", "Male" など)、改行のない自由な形式のテキストです。</dd>
 <dt>"<code>tel</code>"</dt>
 <dd>国番号を含む、完全な電話番号です。電話番号を書く部分に分割する必要がある場合は、各フィールドに以下の値を使用することができます。
 <dl>
  <dt>"<code>tel-country-code</code>"</dt>
  <dd>国コードで、例えば "1" はアメリカ、カナダ、その他の北アメリカとカリブ海の一部です。</dd>
  <dt>"<code>tel-national</code>"</dt>
  <dd>国番号以外の部分の電話番号全体で、市外局番の接頭辞 (日本では 0) を含みます。 "1-855-555-6502" という電話番号については、このフィールドの値は "855-555-6502" となります。</dd>
  <dt>"<code>tel-area-code</code>"</dt>
  <dd>市外局番で、必要に応じて市外局番の接頭辞 (日本では 0) を含みます。</dd>
  <dt>"<code>tel-local</code>"</dt>
  <dd>国番号や市外局番を含まない電話番号です。これはさらに、市内局番と加入者番号の2つに分割することができます。 "555-6502" という電話番号では、 "<code>tel-local-prefix</code>" は "555"、 "<code>tel-local-suffix</code>" は "6502" となります。</dd>
 </dl>
 </dd>
 <dt>"<code>tel-extension</code>"</dt>
 <dd>電話番号の下の内線番号です。ホテルの部屋番号や企業オフィスの内線番号などです。</dd>
 <dt>"<code>impp</code>"</dt>
 <dd>インスタントメッセージングプロトコルの端点、たとえば "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> Firefox は他のブラウザーとは異なり、 <code>autocomplete</code> 属性で、ページを再読み込みしても <code>&lt;input&gt;</code> を <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態や (該当する場合は) 動的に変更したチェック状態を維持するか</a> を制御します。この維持機能は、既定で有効です。 <code>autocomplete</code> 属性の値に <code>off</code> を設定すると、この機能を無効化できます。またこの設定は、<code>type</code> 属性が通常 <code>autocomplete</code> を適用しない値である <code>&lt;input&gt;</code> 要素でも有効です。 {{bug(654072)}} をご覧ください。</p>
</div>

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush: html notranslate">&lt;div&gt;
  &lt;label for="cc-number"&gt;Enter your credit card number&lt;/label&gt;
  &lt;input name="cc-number" id="cc-number" autocomplete="off"&gt;
&lt;/div&gt;</pre>

<h2 id="Administrative_levels_in_addresses" name="Administrative_levels_in_addresses">住所における行政レベル</h2>

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

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

<h3 id="Form_layout_flexibility" name="Form_layout_flexibility">フォームのレイアウトの自由度</h3>

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

<h3 id="Variations" name="Variations">変化形</h3>

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

<h4 id="United_States" name="United_States">アメリカ</h4>

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

<p>432 Anywhere St<br>
 Exampleville CA 95555</p>

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

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

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

<h4 id="United_Kingdom" name="United_Kingdom">イギリス</h4>

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

<p>103 Frogmarch Street<br>
 Upper-Wapping<br>
 Winchelsea<br>
 TN99 8ZZ</p>

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

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

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

<h4 id="China" name="China">中国</h4>

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

<h4 id="Japan" name="Japan">日本</h4>

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

<p>〒381-0000<br>
 長野県長野市某町123</p>

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

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

<h2 id="Specifications" name="Specifications">仕様書</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('HTML WHATWG', "#autofill")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.global_attributes.autocomplete")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{htmlelement("input")}} 要素</li>
 <li>{{htmlelement("select")}} 要素</li>
 <li>{{htmlelement("textarea")}} 要素</li>
 <li>{{htmlelement("form")}} 要素</li>
 <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
 <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li>
</ul>