【HTML】<input> 要素 autocomplete 属性に指定できる値まとめ
Sara
autocomplete 属性
この記事では <input>要素、textarea要素、select要素の autocomplete 属性に指定できる値をまとめています。
autocomplete 属性には、ブラウザによる自動補完機能を使用するかどうかを指定することができますが、文字列や数値を返さない入力型には効果がありません。
実際の動作はブラウザによって異なりますのでご注意ください。
autocomplete 属性を指定できる input 要素
- <input>：フォーム入力欄の作成
- <input type=”color”>：色を選択
- <input type=”date”>：年月日を選択
- <input type=”datetime-local”>：年月日と時刻を選択
- <input type=”email”>：メールアドレス入力欄
- <input type=”hidden”>：隠しデータ
- <input type=”month”>：年月を選択
- <input type=”number”>：数値の入力欄
- <input type=”password”>：パスワード入力欄
- <input type=”range”>：スライダーで数値を選択
- <input type=”search”>：検索キーワードの入力欄
- <input type=”tel”>：電話番号の入力欄
- <input type=”text”>：テキスト入力欄
- <input type=”time”>：時刻を選択
- <input type=”url”>：URLの入力欄
- <input type=”week”>：年と週を選択
- <select>：セレクトメニューの作成
- <textarea>：複数行のテキスト入力欄を作成
autocomplete 属性に指定できる値
| 値 | ||
|---|---|---|
| on | 自動補完を使用する。 | |
| off | 自動補完を使用しない。 | |
| 名前 | name | 名前 |
| honorific-predix | 敬称・肩書など（Mr, Mrs, Dr など） | |
| given-name | 名（ファーストネーム） | |
| additional-name | ミドルネーム | |
| family-name | 苗字（ラストネーム） | |
| honorific-suffix | 名前の後ろに敬称（様, Ⅱ, Jr など） | |
| nickname | ニックネーム | |
| username | ユーザーネーム | |
| メールアドレス | メールアドレス | |
| パスワード | new-password | 新しいパスワード |
| current-password | 現在のパスワード | |
| one-time-code | ユーザー確認に使用されるワンタイムコード | |
| 組織 | organization | 企業・団体・組織名 |
| organization-title | 組織内での肩書・役職（社長、専務など） | |
| 住所 | street-address | 住所の番地など |
| address-line1 | 住所の番地などを３つに分けたもので、street-address がある場合に使用できます。 | |
| address-line2 | ||
| address-line3 | ||
| address-level4 | address-level3 よりも後ろにつく住所の末尾 | |
| address-level3 | 市区町村名の後ろにつく町名など | |
| address-level2 | 市区町村名 | |
| address-level1 | 都道府県名 | |
| 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 | クレジットカードのセキュリティコード | |
| cc-type | クレジットカードの種類（Visa, JCB, Master Card など） | |
| 決済 | transaction-currency | 支払い通貨 |
| transaction-amount | 支払額 | |
| language | 言語 | |
| 生年月日 | bday | 生年月日 |
| bday-day | 生年月日の日の部分 | |
| bday-month | 生年月日の月の部分 | |
| bd-year | 生年月日の年の部分 | |
| sex | 性別 | |
| 電話番号 | tel | 電話番号 |
| tel-country-code | 電話番号の国コード | |
| tel-national | 国番号を含まない電話番号 | |
| tel-area-code | 市外局番 | |
| tel-local | 国番号や市外局番を含まない電話番号 | |
| tel-extension | 内線番号 | |
| impp | IMPP（Instant Message and Presence Protocol・インスタントメッセージプロトコル）の URL | |
| url | ホームページやウェブサイトなどの URL | |
| photo | 画像の URL | |
参考：HTML の autocomplete 属性 – MDN web docs
Subscribe
0 Comments
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
