前提条件
- ユーザー名とパスワードのオートコンプリートではありません
- 用語として、オートコンプリートを自動入力／自動補完／オートフィルと同じ意味で使っています
- 2019/1/16時点の内容です
- 検証したOSやブラウザのバージョンは一部です（IEやFirefoxは見ていない）
オートコンプリートで頭に叩き込んでおくこと
- iOSのSafariはautocomplete属性に"nope"を指定しても自動入力は無効にできない
- iOSのSafariはname属性で住所と推測できる項目があると連続して自動入力する
- autocomplete属性を指定してもname属性の値によって挙動が変わる場合がある
- autocomplete属性の指定がなければname属性に含まれる文字列で判定される
- 自動入力を無効にしたい場合はname属性をブラウザに推測されないようユニークな値にする
- 特に都道府県と市区以降の住所は判定が複雑になっている
成功パターン例
| 項目 | input type | autocomplete | autocorrect | autocapitalize | name | 誤判定を避けるポイント |
|---|---|---|---|---|---|---|
| 名前 | text | name | full_name | |||
| 施設名 | text | shop | ※nameにnameを含む文字列を入れないこと |
|||
| メールアドレス | ||||||
| 電話番号 | tel | tel | tel | ※nameにnumberを含む文字列を入れないこと |
||
| 郵便番号 | number | postal-code | ||||
| 町名・番地 | text | address-line1 | off | none | home_address1 |
home_が必要だった |
| 建物名・部屋番号 | text | off | none | home_address2 |
home_が必要だった |
|
| URL | url | url | web_site_url | ※nameにaddressを含む文字列を入れないこと |
※都道府県と市区は試していません
※住所は並び順も影響します
iOSのSafariで起きた不思議な出来事と仕様
・autocomplete属性に無効な値（"nope"など）を指定しても無視された
・建物名・部屋番号のautocomplete属性に"address-line2"を指定してもaddress-line1が入った
・住所のname属性をhome_address1とhome_address2から、address1とaddress2にすると建物名・部屋番号が空欄になった
・URLの項目のname属性をweb_site_addressにするとstreetaddressが自動入力された
Chromeで起きた不思議な出来事と仕様
・電話番号の項目のnameにnumberを含めると先頭の0や国番号が消える（数値形式になるのかも）
・氏名の項目のnameにcontactを含めると先頭の文字が消える（理由は推測できなかった）
・AndroidのChromeで電話番号の保存時に国番号が自動的に補完される場合がある
・iOSのChromeは市区町村を保存できるが、AndroidのChromeは市区町村を保存できない
まとめ
・name属性はSafariが大きな制約条件になるため、まずはSafariに合わせる
・name属性の値によってはChromeで先頭の文字列が消えるので注意する
・autocomplete属性は必須ではない
その他
・Safariにおいてinput typeに"search"を指定しても、formのaction属性を設定していない場合は「改行」が「検索」にならない