
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
ITコラム
2017.02.23
今回は、フォームで使われる部品の中で、セレクトリストの作り方を紹介します。
HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト( 本ページ )
HTML 【フォーム】9 ~ 入力候補(datalist)
HTML 【フォーム】10 ~ テキストエリア(textarea)
HTML 【フォーム】11 ~ ラベル(label)
HTML 【フォーム】12 ~ 出力欄(output)
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える
1.select 要素、option 要素、optgroup 要素
2.プルダウンメニュー
3.リストボックス
セレクトリストは、select 要素で作ります。
そして、セレクトリストで表示される選択肢は、option 要素で設定します。
また、選択肢をグループ分けしたい時に使用する optgroup 要素というものもあります。
select要素は、size属性の値によって表示されるリストの形態が変わります。
size属性の値が 1 の場合は、プルダウンメニューになります。
(下記がソースコードです。)
<select size="1"> <option value="">プルダウンメニュー</option> <option value="1">プルダウン1</option> <option value="2">プルダウン2</option> <option value="3">プルダウン3</option> </select>
size属性の値が 2 以上の場合は、リストボックスになります。
(下記がソースコードです。)
<select size="2"> <option value="">リストボックス</option> <option value="1">リスト1</option> <option value="2">リスト2</option> <option value="3">リスト3</option> </select>
size属性は、表示する行数を指定する属性で、デフォルト値が 1 です。
ですので、size属性を指定しない場合は、セレクトリストはプルダウンメニューがデフォルトとなります。
ただ、multiple 属性を指定すると size 属性値のデフォルト値は 4 となり、セレクトリストの形態はリストボックスとなります。
この場合、size 属性値は変更できますが、複数選択を可能にするという性質から 表示形態はリストボックスのみとなります。
multiple 属性が指定されたセレクトリストで 選択肢を複数選ぶ場合は、ctrl キー( Mac では command キー )を押しながら選択します。
各要素には、それぞれ以下の属性があります。
select 要素の属性
name select 要素に固有の名前を付ける size リストボックスの行数 multiple 複数選択を可能にする required 選択必須項目にする disabled リスト全体を使用不可の状態にする form 親の form 要素の ID 名を呼び出して関連付ける autofocus ロード後 フォーカスを当てる
option 要素の属性
value プログラム側へ渡すデータ値
( select 要素の name 属性値とセットで送信 )selected 最初から選択された状態にする disabled 選択肢を使用不可の状態にする label 選択肢の表示テキスト
optgroup 要素の属性
label 選択肢グループの表示テキスト disabled 選択肢グループを使用不可の状態にする
select 要素に name 属性だけを指定すると、次のようなプルダウンメニューになります。
上のサンプルのソースコードは次の通りです。
<select name="select1"> <option value="">好きなフルーツ</option> <option value="1">いちご</option> <option value="2">もも</option> <option value="3">ぶどう</option> <option value="4">さくらんぼ</option> </select>
option 要素の value 属性の値は、ユーザが画面から選択した値として select 要素の name 属性の値と共にプログラム側へ送られます。
ですので、select 要素の name 属性は 必ず指定します。
select要素にsize属性を指定していませんが、デフォルト値が 1 なのでプルダウンメニューになっています。
option要素で選択肢を作ります。
option要素の1番目は、デフォルト表示されるテキストなので、上記のように選択肢の内容を表示させたり 「選択して下さい」のようなメッセージを表示させたりするために使用することが多いです。
そのような場合は value 属性の値は不要です。
optgroup 要素を使って、選択肢をグループ分けしてみます。
上のサンプルのソースコードは次の通りです。
<select name="select2"> <option value="">カテゴリ</option> <optgroup label="アウター"> <option value="コート">コート</option> <option value="ジャケット">ジャケット</option> <option value="カーディガン">カーディガン</option> </optgroup> <optgroup label="ボトムス"> <option value="ロングパンツ">ロングパンツ</option> <option value="ショートパンツ">ショートパンツ</option> <option value="スカート">スカート</option> </optgroup> </select>
選択肢のグループを<optgroup>~</optgroup>で囲み、label 属性でグループ名を指定しています。
optgroup 要素には label 属性の指定が必須です。
label 属性を指定しないと、上のようなリスト表示になりません。
select要素で、size 属性を2以上に指定するとリストボックスになります。
上のサンプルのソースコードは次の通りです。
<select name="select3" 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>
select 要素で multiple 属性を指定しただけでもリストボックスになります。
上のサンプルのソースコードは次の通りです。
<select name="select4" multiple> <option value="">ctrl キーで複数選択できます</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 属性を指定すると ctrl キー( Mac では command キー )を押しながら複数の選択肢を選ぶことができるようになります。
そして、size 属性のデフォルト値は 4 に変わり、表示の形態はリストボックスとなります。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.