HTML `
<option> 要素の disabled 属性は、選択肢のリストから特定のオプションを無効化するために使用します。無効化されたオプションはクリックできなくなり、ユーザーは選択できなくなります。
構文
基本的な構文は以下の通りです。
<option disabled>値を持たせる場合は以下のように記述します。
<option value="value" disabled>表示テキスト</option>使用例
以下は、<optgroup> でグループ分けされたセレクトボックス内で、特定のオプションを無効化する例です。
<!DOCTYPE html>
<html>
<body>
<h2>水質の不純物レベル</h2>
<p>不純物レベル <meter min="0" low="50" high="95" max="100" value="85"></meter></p>
<select>
<optgroup label="比率">
<option value="one">3:2</option>
<option value="two" disabled>5:3</option>
</optgroup>
<optgroup label="水量">
<option value="low">2L</option>
<option value="medium">5L</option>
<option value="high">10L</option>
<option value="veryhigh">20L</option>
</optgroup>
</select>
</body>
</html>実行結果
上記のコードでは、「比率」グループ内の「5:3」というオプションが無効化されています。
<option value="two" disabled>5:3</option>このオプションはグレーアウト表示され、ユーザーは選択できません。フォーム送信時もこの値は送信されません。
補足情報
disabledは論理属性です。値を指定する必要はなく、属性を記述するだけで有効になります。- 親要素の
<optgroup>にdisabledを指定すると、グループ内のすべてのオプションが無効化されます。 - CSS の
:disabled疑似クラスでスタイルをカスタマイズ可能です。
-
HTMLのsize属性とは？使い方とサンプルコードをわかりやすく解説
HTMLのsize属性は、select要素やinput要素において、画面に表示される選択肢の数（または入力欄の文字数）を指定するための属性です。この属性を使うことで、ドロップダウンリストを複数行表示のリストボックスに変更したり、テキスト入力欄の横幅を調整したりすることができます。 size属性の構文 size属性の基本的な記述方法は以下のとおりです。 <tagname size="数値"></tagname> size属性には、表示したい選択肢の数や文字数を整数で指定します。 HTML size属性の使用例 それでは、実際にsize属性を使用した具体
-
HTMLのoption要素におけるvalue属性とは？基本構文とサンプルコードで解説
HTMLのvalue属性は、<option>要素に対してサーバーへ送信する値を指定するための属性です。フォーム送信時に、ユーザーが選択した選択肢の値がこの属性の内容として送られます。値そのものは画面上には表示されず、表示されるテキスト（ラベル）とは別に内部的なデータを持たせられるのが特徴です。基本構文value属性の基本的な書き方は以下のとおりです。<option value=テキスト></option>value属性には任意の文字列を指定できます。省略した場合は、<option>要素内のテキストがそのまま送信されます。使用例ここでは、好きな科目