iPhone用サイトのフォームにはHTML5の属性を使おう

ガラケーからiPhone4に乗り換えました。おサイフケータイ等のガラパゴス機能は使っていなかったのでiPhoneになって不便を感じることもなく、iPhoneの便利さだけを享受しています。東京にいる限りはソフトバンクの電波で困ることもないですしね。

ところでiPhone4のSafariHTML5で追加されたinputの新しいtype属性値に対応しています。キーボードのレイアウトが属性にあった形に変更され、入力しやすくなります。また属性に合わない値の入力が制限されます。

https://nullpon.moe/dev/sample/form.html

type="email"では @ と . のキーが追加されます。


type="url"では . と / と .com が追加されます。


type="number"では数字キーボードになります。ただし数字以外も入力可能でした。


type="tel"ではテンキーになります。


type="search"にすると、右下のgo(送信ボタン)がsearchに変わりますが機能は同じです。


type="range"では数字以外が拒否されます。min、max、stepといった属性にも対応しているようです。

HTML5には他にもdateやcolorといった属性もありますが、text属性と同じようです。