[51] セレクトメニューを作ろう <select><option><optgroup>

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

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

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

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

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

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

また、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とセットで送られるんです。

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

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

<option>の1行目をユーザへのメッセージに使う場合(「<option value="">選択してください</option>」とかで)は、value属性が無いと、この文言「選択してください」が送信されるので注意。
value値無しでも(選択肢のテキストが送信されて)OKな場合のみ、無しにしよう。

●サンプル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属性は、<select><option><optgroup>全部に使えます

disabled属性は、選択不可にする属性です。
<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>要素で作ったテキスト入力ができる部品の 入力候補をリストで出す 役割です。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.