余白と文字サイズを調整する
ブラウザ標準のフォーム部品は、全般的に「狭い・小さい」という特徴があり、余白をゆったり取る現在のデザイントレンドの中では見た目を整えずにそのまま使うということはほぼなくなってきている。
最も基本となるテキストボックスについてもデフォルトではpaddingがないので枠とテキストがくっつきすぎて窮屈である。デザインカンプがない場合でも一定のpaddingは必ず入れておくようにする。
フォームの文字サイズに関しては盲目的にデザインカンプ通りとするのではなく、極力16px以上とすることを推奨する。フォームの文字サイズが16px未満だと、iOSなどでは入力フォームをタップした時点で画面が自動的にズームする。入力を終えてもズームしたまま画面が左右にスクロールできる状態になって閲覧に支障が出るため、ユーザーは入力のたびにピンチアウトして元のサイズに戻す必要に迫られ、印象が非常に悪くなってしまう。
type属性と入力モードの切替
現在は入力させたいデータの種類によって様々なtype属性が用意されており、選択したtype属性によって入力モードが変化したり、独自のインターフェースが表示されたり、入力時に簡易書式チェックをしてくれるので、基本的にデータ種類によってtype属性を使い分けておくようにしておく。
- type=”text”：1行テキスト
- type=”url”：http(s)://～で始まる半角英数字の文字列以外は書式エラーが表示される
- type=”email”：メールアドレス。@が含まれてない場合は書式エラーが表示される
- type=”search”：環境によってOS標準の検索窓風なUIになることがある
- type=”tel”：電話番号。仮想キーボードの入力モードが「テンキー」になる
- type=”number”：数値（半角数字）。仮想キーボードの入力モードが「数字優先」になる
- type=”password”：パスワード。入力内容を隠した状態で入力・表示できる
- type=”date”：年月日。カレンダーUIから年月日を選択入力できる
- type=”time”：時刻。時刻UIから時刻を選択入力できる
電話番号の入力
電話番号の入力については基本的にtype=”tel”を使う。type=”tel”を選択することで、モバイル環境では入力モードが自動的にテンキーに切り替わるため、ユーザーはストレスなく数字を入力できる。
ただし、type=”tel”による仮想キーボードはiPhoneの場合数字と「＋」「＊」「＃」しか表示されないため、ハイフン（-）の入力を必須とするような電話番号フォームに対してはtype=”tel”を使用するのはNG。
【OK例】
<input type="tel" name="tel" placeholder="09012345678">
<input type="tel" name="tel1"> - <input type="tel" name="tel2"> - <input type="tel" name="tel3">
【NG例】
<input type="tel" name="tel" placeholder="090-1234-5678">数字の入力
四則演算できる前提の「数値」を入力させる場合にはtype=”number”を選択する。numberが選択されるとPC環境では入力フォームの右端に「スピンボックス」と呼ばれる上下の矢印が表示され、キーボードでの入力の他、上下矢印でも数値を入力することができるようになる。また仮想キーボードでは「数字優先」の状態となり、数値の入力がしやすくなる。
一方、郵便番号やクレジットカード番号など「一定の文字列」を入力させたい場合は、type=”number”はあまり適切ではない。キーボードで「0004」のように数字を入力することはできるが、PC環境で右端のスピンボックスを触ると頭の0が消えて「4」のような数字になってしまう（type=”number”は文字列としての数字の入力は想定していないと考えられる）。
【OK例】
数量：<input type="number" name="num"> 個
【NG例】
郵便番号：
<input type="number" name="zip1" placeholder="001"> -
<input type="number" name="zip2" placeholder="0001">
クレジットカード番号：
<input type="number" name="credit1" placeholder="0000">
<input type="number" name="credit2" placeholder="0000">
<input type="number" name="credit3" placeholder="0000">
<input type="number" name="credit4" placeholder="0000">type=”text” + inputmode
文字列として数字を入力するには、type=”text”にした上でinputmode=”numeric”を指定すること。inputmode属性はモバイル環境などにおける仮想キーボードの種類を指定する。通常はtype属性によってブラウザが適切な仮想キーボードを自動的に切り替えるが、inputmodeを使えばそれを明示的に指定することができる。
【参考】
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/inputmode
郵便番号：
<input type="text" name="zip1" placeholder="001" inputmode="numeric"> -
<input type="text" name="zip2" placeholder="0001" inputmode="numeric">
クレジットカード番号：
<input type="text" name="credit1" placeholder="0000" inputmode="numeric">
<input type="text" name="credit2" placeholder="0000" inputmode="numeric">
<input type="text" name="credit3" placeholder="0000" inputmode="numeric">
<input type="text" name="credit4" placeholder="0000" inputmode="numeric">入力値に何らかの制限がある場合は補助機能を活用する
入力する文字数に制限がある場合や、数値に最大値・最小値、あるいは10刻みのような制限が必要な場合など、補足説明だけではなかなか正しいデータを入力してもらえなさそうな場合は、フォーム側に入力値を制限するための設定を追加して不正な入力を防ぐ方法もある。
また、入力フォーマットが決まっている場合（半角英数字のみなど）にはpattern属性に正規表現でフォーマットを指定しておくと送信前にブラウザ側で簡易な入力チェックを行うこともできる。
【参考】
https://codeclub965.com/?p=2038
- 半角英数字： ^[0-9A-Za-z]+$
- 半角英字8文字： [A-Za-z]{8}
- 半角英数字6文字以上： ^([0-9A-Za-z]{6,})$
- 電話番号（ハイフン必須）： \d{2,4}-\d{2,4}-\d{3,4}
- 郵便番号（ハイフン必須）： \d{3}-\d{4}
- 全角カタカナ： ^[ァ-ンヴー]+$
- 全角ひらがな： ^[ぁ-ん]+$ または ^[ぁ-んー]+$
【文字数制限】
郵便番号：
<input type="text" name="zip1" maxlength="3" placeholder="001" inputmode="numeric"> -
<input type="text" name="zip2" maxlength="4" placeholder="0001" inputmode="numeric">
【最小値・最大値・ステップ入力】
<input type="number" name="num" min="10" max="200" step="10"> 個
<small class="inputNote">※最小10、最大200個まで、10個単位でご注文ください。</small>
【正規表現】
フリガナ： <input type="text" name="kana" pattern="/^[ァ-ンヴー]+$/" placeholder="ヤマダタロウ">
<small class="inputNote">※全角カタカナでご入力ください。</small>入力時の選択肢を提供する
特定の選択肢しかない場合にはselect要素やラジオボタン・チェックボックスなどの選択式の入力フォーム部品を用意すれば良いが、一定の選択肢は用意しつつ、自由入力も可能としたい場合はdatalist要素を使ってテキスト入力ボックスに入力候補を付与しておくという方法もある。
<p>一番好きな猫の品種はなんですか？（自由入力可）</p>
<input type="text" name="cat" list="catList">
<datalist id="catList">
<option>スコティッシュ・フォールド</option>
<option>マンチカン</option>
<option>アメリカンショートヘア</option>
<option>ロシアンブルー</option>
<option>ラグドール</option>
<option>メイン・クーン</option>
<option>ベンガル</option>
<option>シンガプーラ</option>
<option>ペルシャ</option>
<option>混血種（MIX）</option>
</datalist>