＜option要素＞ - 項目

公開日: 2017/02/09

option要素は、セレクトフォームやデータリストの項目を表す要素です。select要素やdatalist要素の子要素として配置すると、それが選択肢になります。

概要

名前

option

カテゴリー

なし。

配置できる場所

select要素、またはdatalist要素、またはoptgroup要素の子要素として配置すること。

コンテンツモデル

label属性、value属性、の両方を持つ場合、中身は空でなければいけない。

label属性を持ち、かつ、value属性を持たない場合、空、またはテキストノード。

label属性を持たず、かつ、datalist要素の子要素でない場合、内容のあるテキストノード。

label属性を持たず、かつ、datalist要素の子要素である場合、空、またはテキストノード。

タグの省略

別のoption要素、または、optgroup要素が後に続く場合、終了タグを省略できる。

または、親要素にこれ以上コンテンツがない場合、終了タグを省略できる。

DOM Interface

HTMLOptionElement

デフォルトのスタイル

option {
	font-weight: normal;
	display: block;
	white-space: pre;
	min-height: 1.2em;
	padding: 0px 2px 1px;
}

仕様書

https://html.spec.whatwg.org/multipage/forms.html#the-option-element

属性

disabled

この属性を付けると、選択不可の状態になる。論理属性。

selected

この属性を付けると、デフォルトで選択状態になる。論理属性。

label

ラベル。select要素においては、選択肢として表示されるテキスト。datalist要素においては、選択肢のオプションとして表示されるテキスト。

value

サーバーサイドに送信される値。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

option要素は、セレクトフォーム(select要素)、または、データリスト(datalist要素)の項目の役割を果たします。説明はそれぞれのページでご確認下さい。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜option要素＞ - 項目</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/option/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>option要素は、セレクトフォームやデータリストの項目を表す要素です。</p>

<h2>セレクトフォーム</h2>
<form action="./form.php">
	<select name="prefecture">
		<option value="1">北海道</option>
		<option value="2">青森県</option>
		<option value="3">岩手県</option>
		<option value="4">宮城県</option>
		<option value="5">秋田県</option>
	</select>

	<button>内容を送信</button>
</form>

<h2>データリスト</h2>
<form action="./form.php">
	<input name="prefecture" type="text" list="syncer">
	<datalist id="syncer">
		<option label="ほっかいどう">北海道</option>
		<option label="あおもりけん">青森県</option>
		<option label="いわてけん">岩手県</option>
		<option label="みやぎけん">宮城県</option>
		<option label="あきたけん">秋田県</option>
	</datalist>

	<button>内容を送信</button>
</form>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/658/"> <meta charset="utf-8"> <title>【デモ】＜option要素＞ - 項目</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/option/"> </head> <body>

<p>option要素は、セレクトフォームやデータリストの項目を表す要素です。</p> <h2>セレクトフォーム</h2> <form action="./form.php"> <select name="prefecture"> <option value="1">北海道</option> <option value="2">青森県</option> <option value="3">岩手県</option> <option value="4">宮城県</option> <option value="5">秋田県</option> </select> <button>内容を送信</button> </form> <h2>データリスト</h2> <form action="./form.php"> <input name="prefecture" type="text" list="syncer"> <datalist id="syncer"> <option label="ほっかいどう">北海道</option> <option label="あおもりけん">青森県</option> <option label="いわてけん">岩手県</option> <option label="みやぎけん">宮城県</option> <option label="あきたけん">秋田県</option> </datalist> <button>内容を送信</button> </form>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>