HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのselect要素におけるrequired属性の使い方を徹底解説

HTMLの<select>要素に指定できるrequired属性は、そのドロップダウンリストが「必須項目」であることをブラウザに伝えるための属性です。required属性が付いた<select>要素では、ユーザーが値を選択しないままフォームを送信しようとしても、送信は実行されず、Webページ上に警告メッセージが表示されます。この属性はHTML5で新たに導入されたもので、JavaScriptを書かずに手軽な入力チェック（バリデーション）を実現できるのが大きな魅力です。

required属性の基本構文

使い方はとてもシンプルで、<select>タグに「required」と記述するだけです。

<select required>

実装例：候補者プロファイルフォーム

それでは、<select>要素のrequired属性を使った具体的なサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Candidate Profile</h1>
<p>Following are the details to be submitted by the candidate:</p>
<h2>Educational Qualification</h2>
<form action="">
<section>
<h3>Graduation</h3>
<select required>
    <option value="">None</option>
    <option value="bca">BCA</option>
    <option value="bcom">B.COM</option>
    <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select>
    <option value="mca">MCA</option>
    <option value="mcom">M.COM</option>
    <option value="mtech">M.TECH</option>
    <option value="msc">M.Sc</option>
</select>
</section><br>
<input type="submit" value="Next">
</form>
</body>
</html>

表示結果

このコードをブラウザで開くと、学歴を選択するフォームが表示されます。「Graduation（学部）」のドロップダウンにはrequired属性が設定されているため、何も選択していない状態で「Next」ボタンをクリックすると、フォームは送信されず、次のような警告メッセージが画面上に表示されます。

HTMLのselect要素におけるrequired属性の使い方を徹底解説

コードのポイント解説

上記の例では、<select>要素を使って2つのドロップダウンリストを作成しています。

<section>
<h3>Graduation</h3>
<select required>
    <option value="">None</option>
    <option value="bca">BCA</option>
    <option value="bcom">B.COM</option>
    <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select>
    <option value="mca">MCA</option>
    <option value="mcom">M.COM</option>
    <option value="mtech">M.TECH</option>
    <option value="msc">M.Sc</option>
</select>
</section>

このうち、「Graduation（学部）」側の<select>要素だけにrequired属性を付与し、ユーザーによる選択を必須にしています。

<section>
<h3>Graduation</h3>
<select required>
    <option value="">None</option>
    <option value="bca">BCA</option>
    <option value="bcom">B.COM</option>
    <option value="btech">B.TECH</option>
</select>
</section>

ここで注目したいのは、先頭の<option>のvalueを空文字列（value=""）にしている点です。こうすることで、「None（未選択）」が選ばれている状態でもrequired属性によるバリデーションが正しく機能し、未選択のままの送信を防げます。一方、「Postgraduation（大学院）」側にはrequired属性がないため選択は任意となり、空のままでもフォームを送信できます。このように、required属性を使えばフォームごとに必須・任意を柔軟に制御できます。

  1. HTMLのoption要素におけるvalue属性とは？基本構文とサンプルコードで解説

    HTMLのvalue属性は、<option>要素に対してサーバーへ送信する値を指定するための属性です。フォーム送信時に、ユーザーが選択した選択肢の値がこの属性の内容として送られます。値そのものは画面上には表示されず、表示されるテキスト（ラベル）とは別に内部的なデータを持たせられるのが特徴です。基本構文value属性の基本的な書き方は以下のとおりです。<option value=テキスト></option>value属性には任意の文字列を指定できます。省略した場合は、<option>要素内のテキストがそのまま送信されます。使用例ここでは、好きな科目

  2. HTMLのrequired属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのrequired属性は、フォームを送信する前に該当要素の入力または選択が必須であることを指定するためのブール型属性です。この属性は、input、select、textarea の各要素に適用できます。required属性が設定されたフィールドが空のままフォームを送信しようとすると、ブラウザが自動的にバリデーションを行い、「このフィールドは必須です」といったエラーメッセージを表示して送信を阻止します。JavaScriptを使わずに簡単な入力チェックを実現できるため、フォーム作成時には非常に便利な属性です。構文（シンタックス）required属性の基本的な構文は以下の通りです。<t