HTMLスキル - 第4章 Lesson7

<select>タグでセレクトメニューを作る方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

<select>タグを使って、セレクトメニューから選択できるフォームを作成する方法について解説します。



この動画で学べること

・<select>タグの使い方
・<option>タグ使い方
・<optgroup>タグ使い方



<select>タグを使って、セレクトメニューを作成しよう

<select>タグを使うと、メニューを表示させて、ユーザーに選択肢を与えることができます。
前回作った<legend>タグの後ろに書いていきましょう。
このタグには、<input>タグと同じように、メニューの種類をname属性を使ってしていしましょう。
また、<select>タグの前には<label>タグを入れて、関連させる必要があります。
こちらも<input>タグの時と同様、id名を追加しましょう。



 <label for="category">お問い合わせの種類</label>
<select id="category" name="お問い合わせの種類">



<option>タグを使って選択肢を作ろう

次に、選択肢を作っていきましょう。
ここでは<option>タグを使います。
作りたい選択肢を<option></option>で囲んでいきましょう。
また、一番最初の状態で選択された状態にするのは、selected属性です。
今回は、「DTP制作について」の部分をselectedにしたいと思います。



<option>デザイン業務について</option>
<option>講師業について</option>
<option selected="selected">DTP制作について</option>
<option>プロダクトデザインについて</option>
<option>納期について</option>
<option>価格について</option>
<option>支払い方法について</option>
<option>その他</option>




<optgroup>タグを使って選択肢をグループ化しよう

今度は、この8つの選択肢を「デザイン業務について」から「プロダクトデザインについて」までのグループ、
「納期について」から「その他」までのグループに分けたいと思います。
ここでは、 <optgroup>タグで囲んでグループを作り、label属性でグループの名前を入れていきます。



<optgroup label="業務について">
<option>デザイン業務について</option>
<option>講師業について</option>
<option selected="selected">DTP制作について</option>
<option>プロダクトデザインについて</option>
</optgroup>
<optgroup label="制作について">
<option>納期について</option>
<option>価格について</option>
<option>支払い方法について</option>
<option>その他</option>
</optgroup>



ここまでできたら、保存してブラウザで見てみましょう。
選択肢がわかりやすくグループ化されたことがわかります。