HTML入門:optionを使ってセレクトボックスを表示させてみよう

    • このページをはてなブックマークに追加

    公開日:2016年08月17日 最終更新日:2019年10月16日

    フォームにプルダウン形式とリスト形式のセレクトボックスを追加してみましょう。複数の選択肢の中から選べるコントロールです。<form>タグの部品として作成します。<select>要素に選択肢の数だけ<option>タグを追加することで、セレクトボックスの作成ができます。

    1. プルダウン形式

    ●プルダウンメニューの基本書式:<select><option>

    <form action="#" method="post">
    	<select name="プルダウンメニュー名">
    		<option value="">項目名1</option>
    		<option value="">項目名2</option>
    	</select>
    <form>
    

    <select> name属性:

    <select>要素にはname属性をつけて、プルダウンメニューを特定する名前を半角英数で指定します。プログラムに渡す値なので分かりやすい名前をつけましょう。
    <select id="area_l" name="area">

    <option> value属性:

    <option>要素には、value属性を記述しプルダウン一覧の項目名を記述します。select要素のname属性と共に、プログラムで利用する値になります。
    <option value="Hokkaido">北海道</option>

    項目名:

    プルダウンメニューの選択項目につける名前でブラウザーに表示されます。項目名を<option>タグで挟みます。 項目の数だけ<option>タグを作成します。
    <option value="Hokkaido">北海道</option>

    ●pull-down.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>HTML入門-フォームの作成</title>
    </head>
    <body>
    <form action="#" method="post">
    	<p><label for="name_l">お名前(必須):<br>
    	<input type="text" name="name"></p>
    	<p><label for="mail_l">メールアドレス:<br>
    	<input type="text" id="e-mail_l" name="mail"></p>
    	<p>
    		<label for="area_l">行き先</label><br>
    		<select id="area_l" name="area">
    			<option value="">行き先を選択してください</option>
    			<option value="Hokkaido">北海道</option>
    			<option value="Tohoku">東北</option>
    			<option value="Kanto">関東</option>
    			<option value="Chubu">中部</option>
    			<option value="Chugoku">中国・四国</option>
    			<option value="Kyusyu">九州・沖縄</option>
    		</select>
    	</p>
    	<p><input type="button" value="確認する" id="button2"></p>
    </form>
    </body>
    </html>
    

    選択項目ごとにoption タグを作成し、値と項目の名前をつけてゆきます。

    ●ブラウザーの表示

    selectbox1

    ▲ページトップへ戻る

    2. リスト形式

    プルダウンメニューを作成する際の<select>タグにsize属性を追加するとリストボックスの作成ができます。

    2.1 リストボックスの基本書式:<select><option size="">

    <select name="プルダウンメニュー名" size="表示するリストの行数">
    		<option value="">項目名1</option>
    		<option value="">項目名2</option>
    	</select>
    <form>

    ●size属性:

    プルダウンリストと同様に<select>タグと<option>タグを使ってリストボックスを作成します。name属性やvalue属性の使い方はプルダウンリストと同じです。<select>タグの属性にsize属性="2"以上の値を設定すると「リストボックス」を作成することができます。属性値として"1"を指定すると「プルダウンリスト」になり、size="3"の場合は3行分の「リストボックス」が表示されます。

    <select id="area_l" name="area" size="3">
    	<option value="">行き先を選択してください</option>
    	<option value="Hokkaido">北海道</option>
    	<option value="Tohoku">東北</option>
    	<option value="Kanto">関東</option>
    	<option value="Chubu">中部</option>
    	<option value="Chugoku">中国・四国</option>
    	<option value="Kyusyu">九州・沖縄</option>
    </select>

    ●ブラウザーの表示

    selectbox2

    ▲ページトップへ戻る

    2.2 複数の値を選択できるリストの作成

    ●multiple属性:

    リストボックス内の選択項目を複数選択するには、selectタグに「multiple属性」を追加します。

    <select id="area_l" name="area" size="3" multiple>
    

    ●ブラウザーの表示

    selectbox3

    複数値の選択をする場合は「Ctrl」キーを押したまま、マウスで項目を選択すると複数の項目を選択することができます。操作を知らないユーザーもいるので案内を表示するとユーザビリティがあがります。

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【HTML】Webデザイナー|デザイン提案などのアートディレクション業務

    年収 :300万円〜700万円

    受託の開発・制作から自社開発まで幅広い案件を持ちます。 制作の視点から「こうしたら効果が上がるの...

    株式会社クオリアシステムズ

    正社員

    【Javascript】WEBデザイナー|広告/カタログの企画・デザイン・制作

    年収 :250万円〜400万円

    広告、カタログ、Web等の企画・デザイン・制作をご担当いただきます

    ワイズマトリックス株式会社

    正社員

    【Javascript】WEBデザイナー|自社Webサイトの企画・制作・運営

    年収 :400万円〜500万円

    自社Webサイトの企画・制作・運営などをご担当いただきます。 <具体的な業務> ・自社コーポレート...

    株式会社ボルテージ

    フリーランス

    【Webデザイナー/コーダー】AdobeExperienceManager(AEM)を用いたWebサイト構築

    大手企業の採用HPから有名アニメの公式HP等のデザイン/ディレクションを行うクリエイティブ企業にて、W...