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

select要素:選択式の入力欄

記事Sep. 23rd,2020
選択式の入力欄を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

select”要素は選択式の入力欄を表す要素です。多くの場合フォームの入力欄として使用されます。

select”要素はmultiple”属性と値が“2”以上のsize”属性がどちらも指定されていない場合は1行の入力欄として表示され、クリックするとプルダウン形式の入力候補のリストが表示されます。

select”要素はmultiple”属性もしくは値が“2”以上のsize”属性を指定されているとスクロール形式のリストボックスとして表示されます。

一つ一つの入力候補は子要素となるoption”要素で表されます。入力候補はoptgroup”要素でグループ化することができます。

select”要素は多くの場合form”要素の中に配置されますが、form”属性を指定することでform”要素の外に配置することもできます。

type”属性の値がradiocheckboxであるinput”要素でも選択式の入力欄を表すことができます。

サンプルコード

プルダウン形式の入力欄

<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-selecttag1.php" target="_blank">
<fieldset>
<p>
<label>
好きな魚:
<select name="fish" size="4">
<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>

*送信すると入力内容が表示されます。

属性と値

現行の仕様で定義されている属性

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
autocomplete=""HTML5.2で追加 ブラウザーによるオートコンプリートの可否 トークン オートコンプリートで表示されるべき入力候補の種類
on オートコンプリートを行う
off オートコンプリートを行わない
disabled="" 入力欄を無効化 disabled 入力欄を無効化
form=""HTML5で追加 関連付けるフォーム ID名 関連づけるform”要素id”属性の値
multiple="" 複数の値を入力を可能にする multiple 複数の値を入力を可能にする
name="" 入力欄の名前 文字列 入力欄の名前
required=""HTML5で追加 入力を必須にする required 入力を必須にする
size="" 入力欄の高さ 正の整数 入力欄が表示できる入力候補の数

過去に定義された属性

属性
属性 説明 説明
tabindex="" フォーカスの可否とフォーカスの移動順序を指定する 正の整数 順次ナビゲーションに加わり、フォーカスの順番を指定(tabindex”属性の値が小さい順番にフォーカスする)
0 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする)
負の整数 フォーカス可能だが順次ナビゲーションには加わらない
onfocus="" フォーカスされた時に実行されるスクリプト スクリプト フォーカスされた時に実行されるスクリプト
onblur="" フォーカスを失った時に実行されるスクリプト スクリプト フォーカスを失った時に実行されるスクリプト
onchange="" 要素の入力内容に変化があった時に実行されるスクリプト スクリプト 要素の入力内容に変化があった時に実行されるスクリプト
autofocus=""HTML5で追加 要素に自動的にフォーカスする autofocus 要素に自動的にフォーカスする

仕様書

select”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

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

定義あり

定義あり

定義あり

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