chromeのオートコンプリート(支払い方法)の判断基準について

経緯

自動入力が有効になる場合にautocomplete属性を指定していなくても可能であることにふと気づいて、判断基準について調べてみた。

名前入力フォーム

自動入力対応(名前：Label)

index.html

<label for="">Name on card</label>
<label for="">名前</label>
<label for="">姓名</label>

自動入力対応(名前：name)

index.html

<input type="text" name="ccname" id="" value="">
<input type="text" name="名前" value="">

自動入力対応(名前：id)

index.html

<input type="text" name="" id="ccname" value="">
<input type="text" name="" id="名前" value="">

カード番号

自動入力対応(名前：name)

index.html

<input type="text" name="card" value="" maxlength=""  size="">
<input type="text" name="cardnumber" value="" maxlength=""  size="">

自動入力対応(名前：id)

index.html

<input type="text" name="" value="" id="card">
<input type="text" name="" value="" id="number">
<input type="text" name="" value="" id="cardnumber">

有効期限入力フォーム

自動入力対応(名前：name)

index.html

<input type="number" name="exp-month">
<input type="number" name="exp-year">
<input type="number" name="expiry">　※画面内に２個以上あるとダメ

自動入力対応(名前：id)

index.html

<input type="number" id="exp-month">
<input type="number" id="exp-year">
<input type="text" id="expiry">　※画面内に２個以上あるとダメ

まとめ

• name属性で使用できる値はidでも同様に使えるっぽい
• class属性は全般的に判断基準に用いられないない
• 素直にautocompleteを付けておくのが一番楽
• autocomplete="off"は無効
• 日本語もちゃんと対応してるあたりはすげーなと思った

	label	name	id	class	autocomplete
クレジットネーム	◯	◯	◯	×	cc-name
カード番号	×	◯	◯	×	cc-number
有効期限	×	◯	◯	×	cc-exp

参考サイト

https://developers.google.com/web/fundamentals/design-and-ux/input/forms/
https://greenido.github.io/Product-Site-101/form-cc-example.html