概要
ハイフンなしの郵便番号フォームを作成する時に、入力タイプはどれにすれば良いんだっけ?
と思ったので各タイプの挙動をまとめてみました。
試した機器・ブラウザ
- iPhoneXR
- Safari
- MacOS
- Edge, Chrome, Safari
textタイプ
メリット
- pattern属性を使えば、数字のみ許可することは出来る
- telやnumberのデメリットがない
デメリット
- 数字以外が入力できる
- スマートフォンで見ると、入力パッドの初期表示はかな入力が開く
- 入力する際、入力パッドの変更が必要になる
telタイプ
メリット
- スマートフォンで見ると、入力パッドの初期表示は電話番号用が開く
デメリット
- 郵便番号にtelを使うのは意味的におかしい
numberタイプ
メリット
- スマートフォンで見ると、入力パッドの初期表示は数字入力用が開く
デメリット
- MacOSで見ると、スピン表示がある
- 郵便番号はカウントアップ・ダウンするものではない
- cssで消せなくもないが、標準から外れる事はやりたくはない
まとめ
挙動を見た限りでは、
- スマホ向けサイトであればnumberでも良さそう
- PCの利用を考えるとスピン表示があるのは違和感しかないのでtextタイプが良さそう
他サイトを見てみると、textタイプを使ったフォームしか見ないのでtextで統一した方が良さそうです。
(zipcodeタイプがあれば悩む事はないんですけどね...)