フォームの必須入力項目を指定する

フォームに必須の入力項目を設定する

フォームの中で必ず入力してほしい項目には、required属性を指定して必須項目にすることができます。

この属性を指定すると、入力しないで送信ボタンを押すと次のようなメッセージが表示されます。
※メッセージはブラウザによって異なります。

required属性は次のように要素の中で指定します。
値はありません。

HTML コード例

<h2>お問い合わせフォーム</h2>
<form action="" method="post">
  <div>
    <label for="i_name">お名前</label>
    <input id="i_name" type="text" name="name" value="" placeholder="山田 太郎" required>
  </div>
  <div>
    <label for="i_furigana">フリガナ</label>
    <input id="i_furigana" type="text" name="furigana" value="" placeholder="ヤマダ タロウ" required>
  </div>
  <div>
    <label for="t_message">お問い合わせ内容</label>
    <textarea id="t_message" name="message" placeholder="こちらにお問い合わせ内容を入力してください。" required></textarea>
  </div>
  <div class="btn_area">
    <input type="submit" name="btn_confirm" value="入力内容を確認する">
  </div>
</form>

input要素と同じように、フォームの入力項目であるselect要素やtextarea要素でも指定できます。

ラジオボタンやチェックボックスも必須の入力項目に設定する

テキストを入力するタイプのinput要素だけでなく、ラジオボタンやチェックボックスでもrequired属性を使うことができます。

ラジオボタンにrequired属性を指定する

ラジオボタンの場合、同じ値を持つname属性が複数ある場合は1つでもrequired属性を指定すれば必須項目になります。
その場合は、同じ値を持つname属性のいずれも選択されない状態のときに未入力としてエラーメッセージが表示されます。

HTML コード例

<div>
  <label>性別</label>
  <label for="r_male">男性 <input id="r_male" type="radio" name="gender" value="男性" required></label>
  <label for="r_female">女性 <input id="r_female" type="radio" name="gender" value="女性"></label>
</div>

こちらのコードではname属性の値が「gender」のinput要素が2つあり、そのうちの1つだけにrequired属性を指定して必須項目にしています。
両方に設定しても、もしくは「女性」のinput要素の方に指定しても同じように必須項目として設定することができます。

チェックボックスにrequired属性を指定する

チェックボックスの場合はラジオボタンとは異なり、同じ値をもつname属性の中から1つでも選択したら入力された状態とするようなことができません。

また、チェックボックスは同じname属性を持つ複数のinput要素に対して設定することはできず、単体でしか必須項目として指定することができません。
そのため、次のような「確認しました」のチェックをつけるような単体のチェックボックスに対して使用するケースが多いです。

HTML コード例

<div>
  <label for="c_agree"><input id="c_agree" type="checkbox" name="agree" value="1" required> 個人情報保護方針に同意します</label>
</div>

複数のチェックボックスによる選択肢があるケースでは、どの選択肢が選択されるかが分からないためrequired属性の使用にはあまり向きません。
以下の例では全てのチェックボックスに対してrequired属性を設定していますが、全ての項目がチェック必須になってしまいます。

HTML コード例

<div>
  <label>関心があるもの</label>
  <label for="c_music">音楽 <input id="c_music" type="checkbox" name="interest[]" value="音楽" required></label>
  <label for="c_movie">映画 <input id="c_movie" type="checkbox" name="interest[]" value="映画" required></label>
  <label for="c_book">本 <input id="c_book" type="checkbox" name="interest[]" value="本" required></label>
  <label for="c_travel">旅行 <input id="c_travel" type="checkbox" name="interest[]" value="旅行" required></label>
</div>

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。