零弐壱蜂

[HTML] メールアドレス・電話番号などの入力フォームのUXを考える

4 min read
hiroweb developer

背景

会員情報などの入力フォームを実装後、コンサルサイドから EFO 対策（Entry Form Optimization）を求めらたことがあった。
EFO 対策のスクリプトの導入を勧められたものの他のスクリプトとの干渉が大きく標準の機能で綺麗にやっていけないか再考してみる。

システムの制約上、フォームを分割したり「ハイフンを入力させない」など、UX を欠く仕様になっているケースも多い。ただ、各情報の仕様と照らし合わせると UX を下げない作りにすることは可能であるので、各仕様と機能を調べてみる。

各項目の仕様

メールアドレス

ドメインの長さの最大値は 253 文字、メールアドレス全体の長さの最大値は 254 文字である。
https://ja.wikipedia.org/wiki/メールアドレス

最短の文字数は、たとえば a@a.mw の 6 文字。

電話番号

電話番号の桁数は 10 か 11 桁。9 桁はもはや無い
https://qiita.com/tukiyo3/items/b994ffafb7f01e79fe34

氏名

日本では、名前は「常用平易な文字」を用いることは求められていますが、名前の字数制限についてはありません(戸籍法 50 条参照)。したがって、理論上は寿限無に出てくるような長い名前も拒否されないことになります。
https://legalus.jp/family/family_register/ed-36

氏名をフォームで縛るのは厳しそう。

フォームの機能

メールアドレス

<input type="email" maxlength="254" minlength="6" autocomplete="email" />
  • type: email
  • maxlength: 254
  • minlength: 6
  • autocomplete: email

type: email指定でバリデーションをしてくれるので、あえてpattern属性を指定せずとも良さそう。むしろ指定することで対応できないケースも出てきかねない。
また、スマホ端末ではフォーカス時に US キーボードが開く。

input 要素にautocomplete属性を設定することで自動入力が有効になる（メールアドレスは補完が効くようだが電話番号はなさそうである）

補足:

属性説明
maxlength入力欄が受け付ける最大文字数
minlength入力欄が取りうる、妥当と判断される最小文字列長

電話番号

<input
  type="tel"
  pattern="\d{2,4}-?\d{2,4}-?\d{3,4}"
  maxlength="11"
  minlength="9"
/>
  • type: tel
  • pattern: \d{2,4}-?\d{2,4}-?\d{3,4}
  • maxlength: 11〜14（ハイフン分考慮）
  • minlength: 9

type: telを指定することでスマホ端末では、キーボードを切り替えなくても数字入力のキーボードを表示してくれるようになる。emailのようにバリデーション機能はないが、UX の向上につながる。

※ 国番号から始まる電話番号を入力させたい場合は別に考慮する必要がある

補足:

属性説明
maxlength妥当な入力として受け入れるための、 UTF-16 文字単位の最大長
minlengthフィールドの内容が妥当と判断される最小文字列長
pattern制約の検証に通るために入力された値が一致する必要がある正規表現

参考