selectの使い方についてまとめ

selectの概要

select要素はプルダウンの選択式のメニューを実装することができるタグです。

注意点

select要素を使用するには、最低1つ以上のoption要素を入れ子させてあげる必要があります。またクローラーにちゃんと認識させるため(アクセシビリティ)label要素のfor属性とselect要素のid属性の名前は一致させましょう。

selectのカテゴリー

selectに入れられるタグ一覧

タグ早見表

optgroup option

入れられるタグのカテゴリー・モデル

  • コンテンツカテゴリなし
  • コンテンツモデルなし

selectに使える属性

属性とは<select> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード

selectに使える属性

autocomplete 概要 フォーム内のオートコンプリート機能のデフォルト値を指定します。この設定はフォーム関連要素のautocomplete属性で上書きできます。
属性の値 onまたはoff
autofocus 概要 要素に対してautofocus属性が存在が指定されている場合、ページ読み込み時にあらかじめフォームが選択された状態になります。
属性の値 なし
disabled 概要 要素に対してdisabled属性が存在が指定されている場合、要素をクリックすることができなくなります。
属性の値 なし
form 概要 form要素と紐づけるために使用します。form属性はform要素のid属性と同じ名前でなければいけません。
属性の値 form要素のid属性と同名
multiple 概要 multiple属性を付与すると、プルダウンから一覧に変更でき、ShiftまたはCtrlで複数選択することができるようになります。
属性の値 なし
name 概要 属性に名前を付与する際に使用します。JavaScriptから要素に動作を与えたりすることができるようになります。
属性の値 なし
required 概要 その要素に対して選択が必須か否かを判定する属性です。
属性の値 なし
size 概要 ボックスのサイズを指定することができます。
属性の値 表示文字数

スポンサードサーチ

selectの使い方



ブラウザ対応状況

ブラウザの対応(PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応(SP)
Chrome あり
Safari あり
Samsung Internet あり

WORK REQUEST

CONTACT