LoginSignup
2

More than 3 years have passed since last update.

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

Posted at

経緯

自動入力が有効になる場合に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"> ※画面内に2個以上あるとダメ

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

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

まとめ

  • 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

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
  3. You can use dark theme
What you can do with signing up
2