HTML & CSS

レシピ

フォーム

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

input要素のrequired属性を使った入力必須項目に設定する方法を解説します。

この記事のポイント

  • フォームで必ず入力してほしい項目を設定する
  • ラジオボタンやチェックボックスを選択必須にする

目次

入力必須の項目を設定する

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

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

エラーメッセージの表示例
エラーメッセージの表示例

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

コード例

<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属性のいずれも選択されない状態のときに未入力としてエラーメッセージが表示されます。

エラーメッセージの表示例
エラーメッセージの表示例

コード例

<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つでも選択したら入力された状態とする、といったことができません。

チェックボックスはグループ単位ではなく、単体でしか必須項目として指定することができません。

そのため、次のような単体のタイプで使用することが多いです。

エラーメッセージの表示例
エラーメッセージの表示例

コード例

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

次のような複数の選択肢がある場合は、どの選択肢が選択されるかが分からないためrequired属性の使用には向きません。

グループ単位でのチェックボックス表示例
グループ単位でのチェックボックス表示例

コード例

<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>

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。