バナー画像

HTMLフォームでよく見かけるプルダウン式の選択メニューには<select>タグが使われています。

この記事では、<select>タグについて初心者の方を対象にわかりやすく解説していきたいと思います。

セレクトボックスはHTMLフォームでは非常によく使う部品となっていますので、記述方法などについて理解しておきましょう。

<select>タグとは

<select>タグはセレクトボックスを作成するために使用するタグです。

HTMLフォームではお馴染みのプルダウン式選択メニューなどで使われています。

また<select>タグに限った話ではありませんが、JavaScriptとの組み合わせも実際のサイトではよく見かけます。

タグの分類はインライン要素で、属性には”name”、”size”、”multiple”、”desabled”があります。

また、<select>タグは単体で使われることはなく、<select>タグ内に<option>タグをネストして使います。

<select>の基本的な使い方

<select>タグは以下のコードのように記述します。

<select>内にネストした開始タグの<option>と終了タグの</option>でテキストを挟むことでプルダウン式メニューを作成できます。

<select id="fruit" name="fruit">
	<option value="イチゴ">イチゴ</option>	
	<option value="みかん">みかん</option>	
	<option value="りんご">りんご</option>	
	<option value="メロン">メロン</option>	
	<option value="バナナ">バナナ</option>	
</select>

グループ項目を作る

<optgroup></optgroup>は<select>と一緒に組み合わせることで選択項目群として表示させることが出来ます。

<optgroup>タグで作成した項目は選択することは出来ませんが、セレクト内の項目をカテゴリー毎に分類することでユーザビリティの向上に繋がります。

使い方

<optgroup>は<select>タグ内に<optgroup>タグをネストし、更に<optgroup>タグ内に<option>タグをネストすることで使用できます。

<optgroup>タグの具体的な使い方については以下のコードを参照してください。

<select id="name" name="name">
	<optgroup label="fruit">
		<option value="イチゴ">イチゴ</option>
		<option value="みかん">みかん</option>
		<option value="りんご">りんご</option>
		<option value="メロン">メロン</option>
		<option value="バナナ">バナナ</option>
	</optgroup>
	<optgroup label="vegetable">
		<option value="ダイコン">ダイコン</option>
		<option value="はくさい">はくさい</option>
		<option value="きゅうり">きゅうり</option>
		<option value="レタス">レタス</option>
		<option value="キャベツ">キャベツ</option>
	</optgroup>
</select>

複数選択可能にする

<select>タグはデフォルトでは単一選択となっていますが、サイトで使う場合には複数選択が必要となる事もあるでしょう。

セレクトボックスを複数選択式にするには、<select>タグの属性に”multiple”を指定することで可能です。

詳しい記述は以下のコードを参照してください。

<select id="name" name="name" multiple>
	<optgroup label="fruit">
		<option value="イチゴ">イチゴ</option>
		<option value="みかん">みかん</option>
		<option value="りんご">りんご</option>
		<option value="メロン">メロン</option>
		<option value="バナナ">バナナ</option>
	</optgroup>
	<optgroup label="vegetable">
		<option value="ダイコン">ダイコン</option>
		<option value="はくさい">はくさい</option>
		<option value="きゅうり">きゅうり</option>
		<option value="レタス">レタス</option>
		<option value="キャベツ">キャベツ</option>
	</optgroup>
</select>

複数選択式のセレクトボックスで複数の項目を選択する場合には、「Shift+左クリック」若しくは「Ctrl+左クリック」を使用します。

Shift+左クリックは複数項目を一度に選択でき、Ctrl+左クリックは項目を一つずつ選択することが出来ます。

初期状態での選択

プルダウンメニューの選択肢の中で特定の項目を予め選択状態にしておきたい場合があるかもしれません。

そういった場合には”selected”を使用することで可能となります。

“selected”は<select>タグの属性ではないため、注意してください。

<option>に属性追加することで該当する項目を予め選択状態に変更できます。

詳しい記述は以下のコードを参照してください。

<select id="name" name="name" multiple>
	<optgroup label="fruit">
		<option value="イチゴ">イチゴ</option>
		<option value="みかん">みかん</option>
		<option value="りんご">りんご</option>
		<option value="メロン" selected>メロン</option>
		<option value="バナナ">バナナ</option>
	</optgroup>
	<optgroup label="vegetable">
		<option value="ダイコン">ダイコン</option>
		<option value="はくさい">はくさい</option>
		<option value="きゅうり">きゅうり</option>
		<option value="レタス">レタス</option>
		<option value="キャベツ">キャベツ</option>
	</optgroup>
</select>

まとめ

いかがでしたか?

今回はHTMLフォームでよく使われる<select>タグについて解説してみました。

<select>タグはJavaScriptなどとの組み合わせで使われることが多いタグですが、使い方自体は基本的な使い方がほとんどです。

この記事を読んで基本的な使い方をしっかりとマスターし、サイトを作成する際に戸惑わないようにしておきましょう。

またCSSと組み合わせることで表示もガラリと変えることが出来るため、色々と試してみましょう。

 

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。