“select”要素~“required”属性

“required”属性について

“required”属性は“select”要素で表される入力欄の入力を必須にします。

フォームの送信時にブラウザによって妥当性のチェックが行われる場合には“required”属性が指定された入力欄が未選択の場合は送信できなくなります。

“size”属性の値に“1”を指定するか省略し、かつ“multiple”属性も指定しない場合、“select”要素の中にある最初の子要素である“option”要素の“value”属性の値が空であればその“option”要素はプレースホルダーとなります。プレースホルダーを選択した状態では未選択とみなされてフォームは送信できません。なお、プレースホルダーがない場合は既定で選択された入力候補が選択状態となるのでフォームが送信できます。

指定できる値

属性値は省略できます。

サンプルコード

プルダウン形式の入力欄

属性値を省略
<form method="post" action="sample-selecttag1.php" target="_blank">

<fieldset>

<p>

<label>

好きな魚：
<select name="fish" required>

<option value="">--選択--</option>
<option value="鮪">鮪</option>
<option value="鰹">鰹</option>
<option value="鮭">鮭</option>
<option value="鯵">鯵</option>
<option value="鮫">鮫</option>

</select>

</label>

</p>

</fieldset>
<p><input type="submit" value="送信する"></p>

</form>

属性値を省略

好きな魚： --選択-- 鮪 鰹 鮭 鯵 鮫

＊送信すると入力内容が表示されます。

スクロール形式の入力欄

<form method="post" action="sample-selecttag1.php" target="_blank">

<fieldset>

<p>

<label>

好きな魚：
<select name="fish" size="4" required>

<option value="鯉">鯉</option>
<option value="鱒">鱒</option>
<option value="鮒">鮒</option>
<option value="鰻">鰻</option>
<option value="鮎">鮎</option>

</select>

</label>

</p>

</fieldset>
<p><input type="submit" value="送信する"></p>

</form>

好きな魚： 鯉 鱒 鮒 鰻 鮎

＊送信すると入力内容が表示されます。