フォームのオートコンプリートで性と名が分かれている時の対応【autocomplete属性】

お問い合わせフォームなどで、性と名が分かれていることがあります。

こんな時に、autocomplite属性をどう指定していますか？

特に意識していないと、オートコンプリートで以下のように、姓の段階でフルネームが入力されてしまいます。

入力フォーム最適化(EFO)を進める上で、性と名が自動で分かれて入力されるようにしたいですが、どう実装すればいいのかを解説します。

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

family-nameとgiven-name

結論、これを解決するためには、姓と名のinputタグに

姓：autocomplete=”family-name”

名：autocomplete=”given-name”

を書いてやればいいです。

<form>
  <label for="first-name">名:</label>
  <input type="text" id="first-name" name="first-name" autocomplete="given-name">

  <label for="last-name">姓:</label>
  <input type="text" id="last-name" name="last-name" autocomplete="family-name">
</form>

これによって、オートコンプリート発火時に適切に性と名が”基本的には”入力されます。

姓と名を分けるべきかは相談すべき事項

理由があって姓と名を分けているのかは重要な確認事項です。

MDNには以下の記載があります。

一般的には、氏名を各部分に分割すると、多様な人の氏名を扱ったり構成したりしにくくなるため、 “name” を使用したほうが推奨されます。

HTML 属性: autocomplete

姓と名を分けるメリットとデメリットをまとめてみました。

データベースの仕様上姓と名を分ける必要があるのであれば、分ける合理性があると思います。

ただ注意点として、全ての端末とブラウザでautocomplete=”given-name”とautocomplete=”family-name”が動くとは限りません。

また今回はMacOSとiOSで機能することを確認しましたが、WindowsとAndroidでは未検証になります。

主要なautocomplete属性の値の一覧

autocomplete属性は様々ありますが、適切に使用することで、フォーム入力の自動補完がスムーズに行えます。