[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> |
---|
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行を表示するリストボックス -->
- 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>要素で作ったテキスト入力ができる部品の
入力候補をリストで出す 役割です。
- 関連記事
-
- [58] 暗号鍵を作ろう keygen要素(HTML5.2で削除されました)
- [57] プログレスバー(進捗状況)を出そう progress要素
- [56] 数量や割合のゲージを表示しよう meter要素
- [55] 計算結果の出力欄を作ろう output要素
- [54] ラベルを付けて使いやすくしよう label要素
- [53] 文章 (複数行のテキスト) を入力してもらおう textarea要素
- [52] 入力候補のリストを作ろう datalist要素
- [51] セレクトメニューを作ろう(select・option・optgroup要素)
- (ちょっとメモ)整理しよう。フォームのボタン比較
- [50] button要素で送信・リセット・汎用ボタンを自由に作ろう
- [49-11] input要素で画像の送信ボタンを作ろう (image)
- [49-10-2] input要素で作るボタンの見た目を CSSで変えよう
- [49-10] input要素で 送信ボタンなどを作ろう (submit, reset, button)
- [49-9] input要素で非表示のデータを送ろう ( hidden )
- [49-8] input要素でファイルを送ってもらおう (file)
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク