このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

option要素:入力候補

記事Sep.21st, 2020
入力候補を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

カテゴリー なし
利用場所 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でも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<option>
定義あり

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク