[51] セレクトメニューを作ろう(select・option・optgroup要素)

最終更新日:2018年03月28日  (初回投稿日:2013年09月20日)

<select>要素で、ユーザにリストから選択してもらう「セレクトメニュー」を作ります。

メニューのリスト(選択肢)には<option>要素を使うので<select>と<option>は必ずセットで使います。また、<optgroup>要素は、リストをグループ分けしたいときに使います。

この<select>要素のいちばんの特徴は、size属性の値によってカタチが変わること!

size属性の値が「1」なら、プルダウンメニューに

size属性の値が「2以上」で、リストボックス になります。

size属性は、表示する行数を指定する属性で、デフォルトが「1」です。
なので、size属性を指定しなければ <select>は「プルダウンメニュー」になります。

また、multiple属性を使っても「リストボックス」になります。
これは、multiple属性を指定すると自動的にsize属性が「4」になるから
もちろん 4 以外の行数も指定できます。
ただし、multiple属性を指定した場合は、size="1" にしても「リストボックス」になります。
multiple属性は、複数選択を可能にする属性です。
Winでは「ctrlキー」、Macでは「コマンドキー」を押しながら選択すると複数選択できます。

使用する要素 <select> 〜 </select>
<option> 〜 </option>
<optgroup> 〜 </optgroup>
selectの属性
一覧はこちら
name :<select>に固有の名前をつける
size :リストボックスの行数
multiple :リストボックスの複数選択
required :必須項目にする
disabled :リスト全体を使用不可の状態にする
form :親の<form>のID名を呼び出して関連づける
autofocus :ロード後、自動的にフォーカスする
optionの属性
一覧はこちら
value :送信値。<select>のname属性値とセットで送る
selected :特定の選択肢を最初から選ばれた状態にする
disabled :特定の選択肢を使用不可の状態にする
label :選択肢の表示テキスト
optgroupの属性
一覧はこちら
label :選択肢のグループの名前を表示する
disabled :選択肢のグループを使用不可の状態にする

<select>でプルダウンメニューを作ろう

冒頭部分でだいたいの使い方を紹介していますが、サンプルソースを見ていきましょう。

●サンプル1
まずは、<section>要素に name属性だけを指定したサンプル。
name属性の値は<option>要素の value属性の値ととセットで送信されるので、必ず指定しましょう。無いと意味不明になるよ。
(しかし、value属性のほうは無くてもOKなんです。↓ サンプル6で詳細

HTMLはこちら ↓

<select name="sample1">
  <option value="">選択してください</option>
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
  <option value="4">選択肢4</option>
  <option value="5">選択肢5</option>
</select>

<select>に size属性は指定せず、デフォルトが「1」なので「プルダウンメニュー」になっています。
<option>要素で選択肢を作っているのがわかりますね。
<option>の1行目ですが、value属性に何も指定していません。
これは、最初にユーザの目に触れる行なので、ユーザへのメッセージ用に使っています。そのため送信する必要がないので value属性の値を設定していないのです。

●サンプル2
次に、<optgroup>要素を使って、リストをグループ分けしてみましょう。

HTMLはこちら ↓

<select name="sample2">
  <option value="">選択してください</option>
  <optgroup label="北海道・東北">
  <option value="北海道">北海道</option>
   〜略〜
  </optgroup>
  <optgroup label="関東">
  <option value="茨城県">茨城県</option> 
  〜略〜
  </optgroup>
</select>

グループを<optgroup>〜</optgroup>で囲んで分けているのがわかりますね。
グループ名を label属性でつけています。
<optgroup>要素には label属性が必須です。
label属性が無ければ何も起こりません。
必ず「<optgroup label="グループ名のテキスト">〜</optgroup>」のカタチで使いましょう。

<select>でリストボックスを作ろう

●サンプル3
<select>要素で size属性を「2」以上に指定すると「リストボックス」になります。

HTMLはこちら ↓  size属性を加えただけです。

<select name="sample3" size="3">
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
  <option value="4">選択肢4</option>
  <option value="5">選択肢5</option>
</select>

●サンプル4
<select>要素で multiple属性を加えただけでも「リストボックス」になります。

HTMLはこちら ↓  multiple属性を加えただけです。

<select name="sample4" multiple>
  <option value="">ctrl(Win), command(Mac)で複数選択</option>
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
  <option value="4">選択肢4</option>
  <option value="5">選択肢5</option>
</select>

multiple属性を加えると、自動的に「size="4"」になるので、リストボックスになります。
multiple属性を使うと複数選択ができるようになります。Winでは「ctrlキー」、Macでは「コマンドキー」を押しながら選択すると複数選択できます。
これはユーザにわかるように表示する必要がありますね。

<option>要素の selected・value・label属性

<option>要素(各選択肢)で使う属性のうち、特徴のあるものをピックアップしました。

●サンプル5
まずは、selected属性。これは最初から選ばれた選択肢を表示する属性です。
サンプルでは3番目のリスト項目(選択肢3)に selected属性を指定しています。

HTMLはこちら ↓

<select name="sample5">
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3" selected>選択肢3</option>
  <option value="4">選択肢4</option>
  <option value="5">選択肢5</option>
</select>

multiple属性を加えた場合は、最初から選ばれた選択肢を複数指定できます。

HTMLはこちら ↓

<select name="sample5-2" multiple>
  <option value="1" selected>選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3" selected>選択肢3</option>
  <option value="4">選択肢4</option>
  <option value="5">選択肢5</option>
</select>

●サンプル6
次は、value属性。これ、無くてもOKなんですよ。
value属性がない場合は、<option>〜</option>内のテキストがnameとセットで送られるんです。

例えば下のサンプルで「ボンゴレビアンコ」を選んで「送信」した場合、サンプルの name属性の値「sample6」と結びついて「sample6=ボンゴレビアンコ」といったカタチで送信されます。

HTMLはこちら ↓ value属性を使っていません。

<select name="sample6">
  <option selected>本日のおすすめパスタ</option>
  <option>ペスカトーレ</option>
  <option>ボンゴレビアンコ</option>
  <option>ボンゴレロッソ</option>
  <option>カルボナーラ</option>
</select>

<option>の1行目をユーザへのメッセージに使う場合(上のサンプルだと「本日のおすすめパスタ」)は、value属性が無いと、ユーザーが何も選ばずに送信ボタンを押すと、この文言「本日のおすすめパスタ」が送信されちゃいます。
リストの中にはメッセージ的な文言を入れず、選択肢だけにしたほうがイイね。

●サンプル7
続いて、label属性。label属性って<optgroup>だけかと思ったら、<option>要素にも使えるのだそうです。(★ただし、Firefoxなど対応していないブラウザもあります)
label属性で指定したテキストが表示されます。Chrome、Opera で見てください。

HTMLはこちら ↓

<select name="sample7">
  <option label="Internet Explorer 7">IE7</option>
  <option label="Internet Explorer 8">IE8</option>
  <option label="Internet Explorer 9">IE9</option>
  <option label="Internet Explorer 10">IE10</option>
</select>

対応ブラウザでは、label属性のテキストがメニューで表示され、送信には<option></option>で囲まれたテキストが使われます。
未対応ブラウザもあるし、あんまり使わないかも。ま、豆知識として。

disabled属性は選択不可にします

disabled属性は、選択不可にする属性で、、<select><option><optgroup>全部に使えます。
<select>に使えばセレクトメニュー全体が、<option>に使えば特定の選択肢が、<optgroup>に使えば選択肢のグループが、選択不可になります。

●サンプル8
サンプルは左から、<select><option><optgroup>にdisabled属性を使った例です。

HTMLはこちら ↓

<select name="sample8-1" disabled>
  <option>選択肢1</option>
  <option>選択肢2</option>
  <option>選択肢3</option>
  <option>選択肢4</option>
</select>
<select name="sample8-2">
  <option>選択肢1</option>
  <option disabled>選択肢2</option>
  <option>選択肢3</option>
  <option>選択肢4</option>
</select>
<select name="sample8-3">
  <optgroup label="グループ1">
  <option>選択肢1</option>
  <option>選択肢2</option>
  </optgroup>
  <optgroup label="グループ2" disabled>
  <option>選択肢3</option>
  <option>選択肢4</option>
  </optgroup>
</select>

<select><option><optgroup>の属性一覧

<select><option><optgroup>で使える属性をまとめました。

name="セレクトメニューの名前(任意のテキスト)"
● <select>要素のみで使います。
送信先プログラムが部品を見分けるための名前なので、必ずつけておきましょう。
「セレクトメニューの名前=選択肢の名前(またはvalue属性の値)」というカタチで、セットで送信されます。
<select name="sample">
<option value="choice1">選択1</option>
</select>
value="初期値(任意のテキスト)"
● <option>要素のみで使います。
<option>要素で選択された選択肢の初期値。name属性の値とセットで送信されます。
これが指定されてない場合は、<option>要素の内容テキストが送信されます。
<select name="sample">
<option value="choice1">選択1</option>
</select>
<!-- この ↑ 場合は「sample=choice1」で送信されます -->
<select name="sample">
<option>選択1</option>
</select>
<!-- このように ↑ value属性が無ければ「sample=選択1」で送信されます -->
size="表示する選択肢の行数(数字)"
● <select>要素のみで使います。
size属性で、セレクトメニューの表示される行数を指定します。
size属性はデフォルトが「1」。「1」の場合は<select>はプルダウンメニューになります。(size属性を指定しなければ、デフォなのでプルダウンメニューってこと。)
「2」以上の数値を指定すると、<select>はリストボックスになり、指定した行数より選択肢が多い場合はスクロールバーを表示します。
<select name="sample" size="5">
〜省略〜
</select>
また、<select>に multiple属性 を指定した場合は、size属性のデフォルト値は「4」になります。(→「2」以上なので、自動的にリストボックスになるんです)
selected(または「selected=""」「selected="selected"」 ) 
● <option>要素のみで使います。
selected属性で、選択肢の1つを最初から選択された状態で表示します 。
<select name="sample">
<option>選択1</option>
<option>選択2</option>
<option selected>選択3</option>     <!-- ←この「選択3」が選択されて表示されます -->
</select>
label="任意のテキスト"
● <option>要素、<optgroup>要素で使います。
<option>要素の場合は、選択肢として表示するテキストになります。
<select name="sample">
<option label="選択1">choice1</option>
    <!-- 表示は「選択1」、送信は「sample=choice1」となります -->
</select>
<optgroup>要素の場合は「選択肢のグループ名」を表示する属性です。
<optgroup>要素は、必ずこの label属性と一緒に使います。
<select name="sample">
<optgroup label="選択グループ1">
<option>選択1</option>
<option>選択2</option>
<option>選択3</option>
</optgroup>
</select>
disabled(または「disabled=""」「disabled="disabled"」 ) 
選択不可能になります。選択できない状態にしたいときに使います。
<select>要素の場合は、セレクトメニュー全体が、選択不可能になります。
<option>要素の場合は、選択肢を個別に選択不可能にできます。
<optgroup>要素の場合は、グループごと選択不可能にできます。
multiple(または「multiple=""」「multiple="multiple"」 ) 
● <select>要素のみで使います。
複数の選択肢を選択できるようになります。
Winは「ctrlキー」Macは「コマンドキー」 を押しながら複数選択します。
この属性を指定すると、自動的に size属性 が「4」になり(size属性を指定してなくても)、<select>はリストボックスになります。
表示行数を4行以外にしたければ、size属性で指定します。
<select name="sample" multiple> 〜省略〜 </select>
<!-- この ↑ 場合は「size属性」は「4」になり、4行を表示するリストボックス -->
<select name="sample" multiple size="6"> 〜省略〜 </select>
<!-- この ↑ 場合は、6行を表示するリストボックス -->
●これ以降は、HTML5からの新しい属性です。
required(または「required=""」「required="required"」 )  new
● <select>要素のみで使います。
「選択必須」になります。何も選択せずに送信ボタンを押すとアラートが出ます。
<select required> 〜省略〜 </select>
autofocus(または「autofocus=""」「autofocus="autofocus"」 )  new
● <select>要素のみで使います。
● autofocus属性は、1つのHTML文書に1つだけ。(そりゃそうだ!)

HTML文書のロード後すぐに、この属性のある要素が自動的にフォーカスされます。
<select autofocus> 〜省略〜 </select>
form="<form>要素のID"  new
● <select>要素のみで使います。
form属性で<form>要素につけたIDを呼び出して関連づけます。
これによって<select>要素が<form>要素の外に出ていても、選択された値を送信できます。
<select form="ex1">
<form action="sample.cgi" id="ex1">
<input type="submit" value="送信する">
</form>

「form属性」については、
「[47] form要素でデータ送信可能なフォームである事を示そう」の「HTML5からの変更点」もご覧ください。

このほかグローバル属性も使います
当然ながら、id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は <datalist>要素です。
<datalist>要素は、単独でフォームの部品になるんじゃなくて、他の部品の補助的な働きをします。
<input>要素で作ったテキスト入力ができる部品の 入力候補をリストで出す 役割です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.