経緯
自動入力が有効になる場合に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