HTML

【図解】HTMLのselectとoptionで選択ボックスを作る

どうも、つよぽんです!

今回はHTMLでselectタグとoptionタグを使って選択ボックスの作り方・使い方について解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • HTMLで選択ボックスを作りたい方
  • HTMLのselectタグとoptionタグの使い方を知りたい方
  • 選択した項目をサーバーに送る方法を知りたい方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
HTMLのselectタグ・optionタグの使い方を覚えるサーバーに入力データを送るための方法としてinputタグを以前解説しました。今回はドロップダウン型の選択メニューからユーザーに値を選択してもらう方法について解説します。...

今回の内容は以下のとおりです。

今回の内容
  • 選択ボックスとはどういうものか
  • selectタグとoptionタグの組み合わせ方
  • name属性とvalue属性でサーバーにデータを送る

 

選択ボックスとはどういうものか

HTMLのselectタグoptionタグを利用することで選択ボックス(ドロップダウン型メニュー)を作ることが出来ます。

そもそも選択ボックスとはどんなものなのでしょうか?

実際に次の画像を見ていただけたら選択ボックスがなにかわかるかと思います。

選択ボックスの説明選択ボックスの説明

このような選択式のメニューをこれまでにも何回か見たことがあるのではないでしょうか?

上の画像内の説明にも書いていますが、この選択ボックスを作るためにはHTMLのselectタグoptionタグを組み合わせて作ることが出来ます。

それでは、selectタグoptionタグをどのように組み合わせて使うのか見ていきましょう。

selectタグとoptionタグの組み合わせ方

HTMLのselectタグoptionタグを組み合わせて選択ボックスを作る説明しました。

下の画像は実際にselectタグoptionタグを組み合わせたコードと出力結果になります。

選択ボックスの作り方(コード付き)選択ボックスの作り方(コード付き)

上の画像のコードが読みづらい場合は以下のリンクから直接コードと出力結果を確認することが出来ます。

上の画像の説明文にも書いていますが、selectタグの中optionタグで囲った選択項目を記述すれば簡単に選択ボックスを作成することが出来ます。

実際に選択した項目をサーバーに送る場合はformタグを使って送ることになります。formタグの使い方を知りたい方は以下の記事を参考にしていただけたらと思います。

あわせて読みたい
HTMLのformタグの使い方【action・method】前回はinputタグを使ってユーザーによって情報を入力して貰う方法を解説しました。今回は入力した情報を実際にサーバーに送るのに使われるformタグの解説をします。データの送り先・送る手段(HTTPメソッド)の指定方法を図を使って解説します。...

しかし、サーバーに選択した項目を送る際にformタグと組み合わせるだけでは不十分です。

実際に何を選択したのかをサーバーに伝えるにはformタグの他に、「selectタグのname属性」と「optionタグのvalue属性」を利用します。

上の画像のサンプルコードの中の赤枠で囲っている部分を見ると、

  • <select name=”pets”>
  • <option value=”dog”>

のように記述されているのがわかるかと思います。

それでは、実際にこのselectタグのname属性optionタグのvalue属性がどのように働くのか次の章で見ていきましょう。

name属性とvalue属性でサーバーにデータを送る

前の章の終わりで、サーバーに選択した項目を送るには「selectタグのname属性」と「optionタグのvalue属性」を使うとお話しました。

selectタグのname属性に関しては、別記事で解説したinputタグでも利用しました。

あわせて読みたい
HTMLのinputタグで出来ることを知る【図解付き】HTMLのinputを使うことでユーザーに「ユーザー名」「パスワード」などの情報を入力してもらうことができます。またtype属性によって様々な機能に切り替わるので、inputを使うことでどんなことが出来るのか解説していきます。...

サーバーにデータを送る際には「name属性の値=value属性の値」という形式でデータが送られます。

そしてサーバーサイドではname属性の値を元にvalue属性の値を取得して、リクエストに応じた処理を行うのです。

バックエンドがやっていることを知りたい方は以下の記事にまとめているのでそちらを参考にしていただけたらと思います。

あわせて読みたい
Webサービスの基本的な仕組み
【図解付き】実例から学ぶ!Webアプリ・サービスの基本的な仕組みWebサービスの裏側がどうなっているか気になりませんか?実を言うとどのWebサービスも基本的には同じ仕組みで動いています。なので、Webの基本的な仕組みを理解すれば、全てのWebサービスの裏側を理解することにもなります。一緒にWebの裏側を学びましょう!...
あわせて読みたい
【図解付き】実例から学ぶ!フロントエンド・バックエンドの違い【Web】Web開発の現場でよく聞く「フロントエンド」と「バックエンド」についてちゃんと理解できていますか?この記事では図を交えて、フロントエンドの担当範囲、バックエンドの担当範囲を解説します。この記事を読むことで曖昧だった部分の理解を補えます。...

inputタグのときは、1つのinputタグの中にname属性とvalue属性を記述していました。

しかし、selectタグの場合name属性のみ記述して、value属性は選択項目であるoptiontタグに記述します。

下の画像は、選択した項目によってvalue属性の値が切り替わる様子を表したものです。(赤枠の中のvalue値が切り替わるのがわかるかと思います。)

selectタグのname属性とoptionタグのvalue属性の値がセットされている様子selectタグのname属性とoptionタグのvalue属性の値がセットされている様子

inputタグでは、type属性の値によって、name属性と一緒にvalue属性もセットします。(例えばtype=”checkbox”やtype=”radio”など)

チェックボックスやラジオボタンなどのinputタグに埋め込まれているname属性とvalue属性の値が実際にサーバーに送られる値となります。

type=”text”に関しては、デフォルトで入力しておきたいテキストがある場合はvalue属性をセットしますが、省略することも可能です。

type=”text”の場合、埋め込まれているname属性と、実際に入力ボックスに入力されているテキストがvalue属性の値となりサーバーに送られます。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • 選択ボックスとはどういうものか知る
  • HTMLのselectタグoptionタグを組み合わせることで選択ボックスを作ることが出来る
  • 選択したデータをサーバーに送りたい場合はformタグの他にselectタグにname属性optionタグにvalue属性をセットする

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
HTMLのselectタグ・optionタグの使い方を覚えるサーバーに入力データを送るための方法としてinputタグを以前解説しました。今回はドロップダウン型の選択メニューからユーザーに値を選択してもらう方法について解説します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です