フォームで姓と名が分かれてる場合のautocomplete属性

結論

結論から言うと

姓はautocomplete="family-name"

名はautocomplete="given-name"です｡

ただし､iOSやMacのSafariでしか補完されません｡

AndroidやChromeは諦めましょう｡

詳しく説明していきます｡

autocompleteで提案される値

そもそも､autocomplete属性で提案される値は

iOSやMacの「Safari」の場合は連絡帳の値が

Androidの場合はブラウザに設定した値が提案されるのですが

iOSとAndroidとで､名前の欄が異なります｡

これでは､iOSのSafariでは「姓」「名」分かれてても補完できますが
Chromeでは補完できないのは明白ですね｡

実機での挙動

実際に､iOSのSafariで試してみると､完璧に補完されますが

AndroidのChromeでは､候補こそ表示されるものの「姓」に1文字目が入り「山」「田太郎」となってしまいます｡

これはWindowsのChromeなどでも同様です｡

ちなみに､Chromeの設定欄で「姓」「名」の間に半角スペースを入れてもダメでした｡

まとめ

という訳で「姓」と「名」が分かれてる (分けなければならない) フォームでは

autocomplete属性は

姓はautocomplete="family-name"

名はautocomplete="given-name"

ソースコードとしてはこんな感じ｡

<form>
	<label>姓 <input type="text" autocomplete="family-name"></label>
	<label>名 <input type="text" autocomplete="given-name"></label>
</form>

ただし､iOSやMacのSafariでは正しく補完できますが､AndroidやWindowsのChromeでは補完できないと思われます｡

「私の環境では違った！」「もっといい方法がある！」などあればコメントで教えてください｡

コメント