search
LoginSignup
2

More than 1 year has passed since last update.

posted at

updated at

HTML自動で補完 autocomplete属性

formタグで入力フォームを作るときにオートコンプリート機能があるということなので
まとめておきます。

HTML の autocomplete 属性

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

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

ブラウザに依存するのでユーザーが入力したことがあるメールアドレスだったり、住所などが補完されるということになります。

また自動補完させないようにするには

autocomplete="off"

とするそうなのですが、ブラウザによってはうまくいかない場合もあるようです。

マスターパスワードが用いられない場合でも、ブラウザーのパスワード管理機能は純粋にセキュリティの向上につながります。パスワードをブラウザーが保存すればユーザーは覚えなくてもよいため、覚えなければならない場合よりも強固なパスワードをユーザーが設定できるようになります。

このような理由から、現代的なブラウザーの多くはログイン欄における autocomplete="off" に対応していません。

  • ウェブサイトが autocomplete="off" を に設定しており、かつそのフォーム内にユーザー名とパスワードの入力欄が含まれていた場合、ブラウザーはログイン情報を記憶するか尋ねてきて、ユーザーが同意すれば、次回の訪問時にログイン欄を自動入力します。
  • ウェブサイトが autocomplete="off" をユーザー名とパスワードの 欄に設定していた場合でも、ブラウザーはログイン情報を記憶するか尋ねてきて、ユーザーが同意すれば、次回の訪問時にログイン欄を自動入力します。

autocomplete属性の使い方

HTMLのinputタグやtextareaタグにautocomplete属性を指定することでブラウザに設定した情報を利用したオートコンプリート機能が利用できます。

html
<input type="text" autocomplete="属性値">

メールアドレスの自動補完

html
<input type="email" name="email" autocomplete="email">

See the Pen autocomplete Email by morioka (@rm5912) on CodePen.

クレジットカードの自動補完

See the Pen autocomplete CreditCard by morioka (@rm5912) on CodePen.

autocompleteの値(一例)

値の名前                 補完する内容
off autocompleteを許可しない 
on autocompleteを許可する 
name 氏名           
given-name ファーストネーム      
additional-name ミドルネーム       
family-name ラストネーム        
email メールアドレス        
username ユーザー名またはアカウント名 
new-password 新しいパスワード       
current-password 現在のパスワード       
postal-code 郵便番号          
address-level1 都道府県          
address-level2 市区町村          
address-level3 町域          
address-level4 番地など          
organization 企業・団体・組織名      
bday 生年月日          
bday-year 生年月日の年
bday-mounth 生年月日の月        
bday-day 生年月日の日        
tel 電話番号          
tel-area-code 市外局番          
tel-local 市外局番を除いた電話番号
cc-name クレジットカード登録名     
cc-given-name 登録名のファーストネーム   
cc-additional-name 登録名のミドルネーム     
cc-family-name 登録名のラストネーム     
cc-number カード番号          
cc-exp カードの有効期限       
cc-exp-month カードの有効期限の月     
cc-exp-year カードの有効期限の年     
cc-csc カードのセキュリティコード    

終わりに

フォームで入力する際になぜクリックすると自動補完できるのかわかりませんでしたが
autocompleteを利用することでできるとわかりました。
ブラウザによってもうまく作動しないなど、あるようなので注意は必要です。

参考サイト
お問い合わせフォーム最適化。改善しておきたい16の項目
MDN Web Docs HTML の autocomplete 属性
クロスブラウザに対応したオートコンプリート付き入力フォーム

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2