[HTML&CSS]お問い合わせフォームに自動変換機能をつける方法

今回は、以下の画像のように、お問い合わせフォームに自動変換機能をつける方法について解説したいと思います。

お問い合わせフォームでの離脱率が高いと言われているため、ユーザーが途中でサイトから離脱しないようにするためにも、自動変換機能を実装することは大事なことです。

それでは、実装方法を見ていきましょう!

お問い合わせフォームに自動変換機能をつける方法

結論から言うと、お問い合わせフォームに自動変換機能をつけるには、input要素の属性に『autocomplete』を追加するだけです!

HTML


<input type="text" placeholder="氏名" autocomplete="name">

ブラウザでの表示

このように、autocompleteを追加するだけで、自動変換機能を実装することが出来ます。

他にも、メールアドレスやパスワードなどの自動変換機能も実装できるため、項目に合った値を入れましょう!

主要なautocompleteの値

off自動的に変換しないように指定
nameフルネーム
given-name名(ファーストネーム)
family-name苗字(ファミリーネーム)
emailメールアドレス
current-password現在のパスワード
organization企業、団体の名前
street-address住所
country-name国名
bday生年月日
sex性別
tel電話番号

今回、紹介した値は、一部の主要な値のため、詳しく知りたいという方は、『MDN web docs』をご覧ください。

まとめ


・自動変換機能の実装には、input要素の属性にautocompleteを追加する。

それでは、最後まで読んでいただきありがとうございました。