selectタグとは?|プルダウンメニューを作成する

selectタグとは?|プルダウンメニューを作成する
博士
前回に引き続き、HTMLでプルダウンメニューを作る方法を解説してくぞ。
リンゴ
この前は<option>タグでメニューの選択肢を作ったんですよね。
博士
そうじゃ。
今回は、その選択肢の入れ物となるプルダウンメニューを実際に作ってみるぞ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<select>タグとは

 

<select>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素(リスト化された要素、送信可能要素、リセット可能要素、再関連付け可能要素、ラベル付け可能要素) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが期待される場所
内容 option要素、またはoptgroup要素を0個以上


 
 
<select>タグは、プルダウンメニューを作成する際に使用します。
select要素は、選択肢の中から項目を選択するためのコントロールを表す要素です。

個々の選択肢は<option>タグを使って作成します。
 
 

size属性

表示される選択肢の数を指定します。
size属性の初期値は、multiple属性が指定されている場合は「4」、指定されていない場合は「1」になります。

 
 
博士
1以上の整数を指定できるぞ。
 
 

スポンサーリンク

multiple属性

複数の選択が可能であることを指定します。
Windowsの場合は「Ctrl」キー、Macの場合は「command」キーを押しながらクリックすると、複数を選択することができます。

こちらは、以下のいずれかの形式で指定します。

  • multiple
  • multiple=”multiple”
  • multiple=””

 

 
 
この属性が指定されていない場合は、1つしか選択できません。
 
 

value属性

サーバーへ送られる値を指定します。
value属性がない場合は、option要素の内容(選択肢として表示されるテキスト)が送信されます。
 
 

スポンサーリンク

selected属性

selected属性を指定すると、選択肢をあらかじめ選択された状態で表示することができます。
こちらは、以下のいずれかの形式で指定します。

  • selected
  • selected=”selected”
  • selected=””

 
 

 
 

リンゴ
上記の場合、選択肢1・3・5が選択されて表示されるってことですね!
 
 

required属性

そのコントロールへの入力が必須であることを指定します。
こちらは、以下のいずれかの形式で指定します。

  • required
  • required=”required”
  • required=””

 
 
required属性がある場合、コントロールにデータが入力されない限り、送信できないようになります。
 
 

スポンサーリンク

autofocus属性

ページが表示されたら、そのコントロールへ自動的にフォーカスが当たるよう指定します。
autofocus属性は、1つの文書に1つだけ指定することができます。
こちらは、以下のいずれかの形式で指定します。

  • autofocus
  • autofocus=”autofocus”
  • autofocus=””

 
 

disabled属性

そのコントロールを無効にします。
disabled属性を指定すると、入力や選択、クリックなどができなくなり、データも送信されなくなります。
こちらは、以下のいずれかの形式で指定します。

  • disabled
  • disabled=”disabled”
  • disabled=””

 
 

スポンサーリンク

form属性

コントロールを指定のform要素と結び付けます。
結びつけたいform要素のid属性の値をこの属性の値に指定することで、コントロールがform要素の中になくても、そのフォームの部品として機能するようになります。

 
 

name属性

コントロールを識別するための名前を指定します。
フォームのデータが送信されるときには、この名前とデータがセットになって送られ、サーバー側でコントロールを特定するために使われます。

 
 

スポンサーリンク

使用例

 
 

表示例

料理の感想をお選び下さい

料理の感想をお選び下さい
(最初に選択されている項目を指定)

 
 

まとめ

<select>タグは、プルダウンメニューを作成する際に使用するタグです。
<select>タグでメニュー全体を定義して、その中に<option>タグを配置して個々の選択肢リストを作成します。
 
 

博士
次回以降は、メニューの細かい作り込みについて解説していくぞ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








selectタグとは?|プルダウンメニューを作成する