Sep.21st, 2020
＃
要素について
| カテゴリー | なし |
| 利用場所 | “select”要素、“datalist”要素、“optgroup”要素の子要素として |
| 内容 | 本文参照 |
| タグの省略 | 開始タグは省略不可 |
| 直後に“option”要素が続く場合、“optgroup”要素が続く場合、もしくは親要素の中で後に続くコンテンツがない場合は終了タグを省略可能 |
“option”要素は親要素となる“select”要素で表される選択式の入力欄、もしくは“datalist”要素で表されるテキスト入力欄への入力候補のリストの入力候補を表す要素です。
祖先要素が“select”要素となる場合は“optgroup”要素で入力候補をグループ化することができます。
サンプルコード
選択式の入力欄
<form method="post" action="sample-selecttag1.php" target="_blank">
<fieldset>
<p>
<label>
好きな魚：
<select name="fish">
<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-inputtag7.php" target="_blank">
<fieldset>
<p><label>好きな果物：<input type="text" name="fruit" list="fruitlist"></label></p>
<datalist id="fruitlist">
<option value="甘蕉">
<option value="林檎">
<option value="甜瓜">
<option value="苺">
<option value="桃">
</datalist>
<p><label>好きな野菜：<input type="text" name="vege" list="vegelist"></label></p>
<datalist id="vegelist">
<option value="南瓜">
<option value="甘藍">
<option value="甘藷">
<option value="西瓜">
<option value="茄子">
</datalist>
</fieldset>
<fieldset>
<legend>猫</legend>
<p><label>このくらい好き：<input type="range" name="cat" min="0" max="100" list="catlist"></label></p>
<datalist id="catlist">
<option value="50">
<option value="75">
<option value="90">
<option value="100">
</datalist>
</fieldset>
<p><input type="submit" value="送信する"></p>
</form>
一般的なブラウザでは入力欄をクリックすると入力候補の一覧が表示されます。
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| なし | |||
| 任意属性 | |||
| グローバル属性 | |||
| disabled="" | 入力候補を無効化 | disabled | 入力候補を無効化 |
| label="" | 選択肢のラベル | テキスト | 選択肢のラベル |
| selected="" | 選択された状態にする | selected | 選択された状態にする |
| value="" | フォームで送信される値 | 文字列 | フォームで送信される値 |
＃
要素の内容
“option”要素の内容は以下のいずれかです。
- “label”属性と“value”属性がいずれも指定されていない場合
- 空
- “label”属性が指定され、“value”属性が指定されていない場合
- テキスト
- “datalist”要素の子要素ではなく、“label”属性が指定されていない場合
- 要素間の空白文字ではないテキスト
- “datalist”要素の子要素であり、“label”属性が指定されていない場合
- テキスト
＃
仕様書
“option”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
DOMインターフェース
[Exposed=Window,
LegacyFactoryFunction=Option(optional DOMString text = "", optional DOMString value, optional boolean defaultSelected = false, optional boolean selected = false)]
]
interface HTMLOptionElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute boolean disabled;
readonly attribute HTMLFormElement? form;
[CEReactions] attribute DOMString label;
[CEReactions] attribute boolean defaultSelected;
attribute boolean selected;
[CEReactions] attribute DOMString value;
[CEReactions] attribute DOMString text;
readonly attribute long index;
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
/* なし */
