HTMLで使われるselectタグとselected属性の違いを解説を現役デザイナーが解説【初心者向け】
初心者向けにHTMLで使われるselectタグとselected属性の違いについて解説しています。選択肢を作成するselectタグと、選択肢の特定の要素をあらかじめ選択済みの状態にするoptionタグのselected属性、それぞれの使い方について学びましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
ここでは、HTMLの入力フォームなどでよく使用されるプルダウン式の選択肢リストを作成する<select>タグの使い方と初期値を設定するselected属性について解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
selectタグとselected属性の違いについて詳しく説明していくね！
お願いします！
selectタグとは
<select>タグとは、ユーザーにプルダウン形式で入力値を選択してもらう時に使用するタグです。
<select>タグは、選択した値を設定するための<oprion>タグとセットで以下のように記述します。
HTML
<select name="number"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>
通常は入力フォームなどで使用されるため、<form>タグの中で送信ボタンなどと一緒に使用します。<form>タグは入力や送信などのフォームを作り、選択した情報をサーバーとやりとりする目的で使用されるものです。
また、<option>タグは、タグ内の選択肢を作る際に使用する要素です。
例：決められた値の中からユーザーが任意の数字を選択する
選択肢リストから選択された値は<select>のname属性の値と、選択された<option>タグのvalue属性の値がセットで送信されます。上記の例では、
number＝1 or 2 or 3
という情報を送信することが可能です。
name属性やvalue属性を設定しなかったとしても、ブラウザでの見た目上に変化はありません。しかし、ユーザーが選択した値を送信することができなくなります。
例：value属性やname属性がなくても表示は変わらない。
selected属性とは
<option>タグのselected属性を使用すると、ページを読み込んだタイミングで選択肢の中から最初の選択肢を予め設定することが可能です。
例えば、初期の選択肢を3にしておきたい場合は、以下のように3の<option>タグにselected属性を追加します。
HTML
<select name="number"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected>3</option> </select>
違いを学んでコーディングしてみよう
ここでは<select>を使用して、好きなフルーツと好きな野菜のアンケートフォームを作成してみましょう。好きなフルーツは、「バナナ、りんご、ぶどう、マンゴー、いちご」の中から、好きな野菜は、「ゴーヤ、レタス、玉ねぎ、じゃがいも、にんじん」の中から選択します。
選択の初期値は「りんご」と「じゃがいも」にしてみましょう。
以下、<select>を使用したアンケートフォームのコード例となります。
HTML
<html> <head> <meta charset="utf-8"> <title>セレクトボックス</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <form> <p>好きなフルーツは？</p> <select name="フルーツ"> <option value="バナナ">バナナ</option> <option value="りんご" selected>りんご</option> <option value="ぶどう">ぶどう</option> <option value="マンゴー">マンゴー</option> <option value="いちご">いちご</option> </select> <p>好きな野菜は？</p> <select name="野菜"> <option value="ゴーヤ">ゴーヤ</option> <option value="レタス">レタス</option> <option value="玉ねぎ">玉ねぎ</option> <option value="じゃがいも" selected>じゃがいも</option> <option value="にんじん">にんじん</option> </select> <br> <input type="submit"> </form> </body> </html>
今回は<select>タグの使い方、selected属性の使い方について解説しました。ユーザーに選択肢から値を選んでもらう方法は、今回のプルダウン形式の選択肢リストやチェックボックス、ラジオボタンなどがあります。どれを使用するかは、選択肢の内容や数など、様々な条件から検討しましょう。
また、たくさんの選択肢がある場合、表示エリアがコンパクトに収まるため、数が多い選択肢に対しては<select>タグがよく用いられます。
以下、よく<select>タグで選択肢を作成しているものの例：
- 都道府県名の選択(北海道〜沖縄)
- 月の選択(1月〜12月)
- 日の選択(1日〜31日)
加えて、たくさん選択肢があってもあまり順番に脈略のないリストの場合には、ユーザーが選択肢を見つけづらくなってしまうこともあるので注意が必要です。
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動、TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
selectタグとselected属性の違いが分かりやすく理解できました！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
