HTML講座 / メール・数値・日付・選択肢に合うinputの型

inputはtypeで入力する情報の種類を指定します。メールにはemail、数量にはnumber、日付にはdateを使い、複数の独立した選択にはcheckbox、一つだけ選ぶ組にはradioを使います。型だけで業務上の条件や安全性が保証されるわけではありません。

値の意味に合う型を選ぶ

次の例をHTML文書のbodyへ入れ、各欄の表示と操作を比較します。数値の範囲はmin・max、刻みはstepなどで指定します。

<form method="get">
  <p><label for="email">Email</label>
     <input id="email" name="email" type="email"></p>
  <p><label for="quantity">Quantity</label>
     <input id="quantity" name="quantity" type="number" min="1"></p>
  <p><label for="visit-date">Visit date</label>
     <input id="visit-date" name="date" type="date"></p>
  <button type="submit">Check</button>
</form>

数値計算をしない郵便番号や識別番号は、先頭のゼロなどを保持するためtextが適切な場合があります。日付の見えるUIや表示順はブラウザーや地域設定で異なっても、dateの値は通常yyyy-mm-dd形式です。emailは基本的な書式の確認で、実在や所有を確認するものではありません。MDNのdate入力で表示と値の違いを確認できます。

チェックボックスとラジオボタン

独立した可否や複数選択にはチェックボックスを使います。ラジオボタンは同じnameを持つものが一組になり、その中から一つを選びます。

<fieldset>
  <legend>Updates</legend>
  <label><input type="checkbox" name="news" value="yes"> Receive news</label>
</fieldset>
<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

valueは選択時に送る値です。未選択のチェックボックスやラジオボタンは通常送信されません。複数のラジオグループに同じnameを付けると、意図せず一つの組になります。まとまりを説明するfieldsetとlegendはフォームのグループ化で扱います。

UIと現在の送信値を比較する

次の完全なコードをvisit-form.htmlとして保存します。各入力を変えた後、開発者ツールのConsoleでフォームデータを確認します。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visit input-types practice</title>
</head>
<body>
  <h1>Practice a visit request</h1>
  <form id="visit-form" method="get">
    <p><label for="visit-email">Email</label>
      <input id="visit-email" name="email" type="email" required></p>
    <p><label for="visit-day">Visit date</label>
      <input id="visit-day" name="date" type="date" required></p>
    <p><label for="visit-quantity">Quantity</label>
      <input id="visit-quantity" name="quantity" type="number" min="1" step="1" value="1"></p>
    <fieldset>
      <legend>Contact method</legend>
      <label><input type="radio" name="contact" value="email" required> Email</label>
      <label><input type="radio" name="contact" value="phone"> Phone</label>
    </fieldset>
    <p><label><input type="checkbox" name="news" value="yes"> News</label></p>
    <button type="submit">Inspect entered values</button>
  </form>
</body>
</html>

Array.from(new FormData(document.getElementById("visit-form")).entries())

日付を選び、画面の表示形式と送信値を比較します。チェックを付けたり外したりし、一覧へ現れる項目を確認します。入力欄に書いた属性の初期値と、利用者が操作した現在値は別です。比較後はフォームを再読み込みして初期状態へ戻せます。実在の連絡先ではなくテスト値を使い、送信先が受信処理を持つかどうかも区別してください。

型以外の条件も確認する

欄の名前、必須かどうか、文字数や数値範囲、エラー時の案内まで合わせて設計します。型によっては特定の属性が適用されないため、一律に付けるだけで済ませません。画面上の検証は回避できるので、サーバー側でも検証が必要です。制約と境界値は入力検証、各型の条件はMDNのinput要素で確認できます。