セレクトボックスの使い方！HTMLでselectタグを書く方法【初心者向け】
初心者向けにHTMLでselectタグの書き方について解説しています。selectタグは、フォームの項目によくあるセレクトボックスを作成するタグで、簡単に覚えられるはずです。実際にソースコードを書いて説明しているので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLでselectタグを使う方法について解説しています。
セレクトボックスを作る際に便利なタグなので、ぜひ書き方を覚えておきましょう。
HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
selectタグとは
selectタグとはセレクトボックスを作成するためのタグです。ユーザーにプルダウンメニューの項目から選択させたい時に使います。
フォームの部品としても使うことができますが、JavaScriptを使うことで選択した項目の値を取得することもできます。
selectタグの使い方
selectタグの使い方は、selectタグの間にoptionタグを挟むことでプルダウンメニューを作成します。
<select name="name" id="name"> <option value="太郎">太郎</option> <option value="二郎">二郎</option> <option value="三郎">三郎</option> </select>
複雑なselectタグの使い方
コード例
<label>テックアカデミーで学習する方法を選択:
<select name="program" multiple size="4">
<optgroup label="application">
<option value="wordpress">WordPress</option>
<option value="webapp">Webアプリケーション</option>
<option value="laravel">PHP/Laravel</option>
</optgroup>
<optgroup label="mobile">
<option value="iphone">iPhone</option>
<option value="android">Android</option>
<option value="unity">Unity</option>
</optgroup>
</select>
</label>
解説
multiple属性を指定している場合、複数の選択肢を利用できます。指定していない場合は1つのみの選択肢になります。
size=”4″というようにsize 属性を指定しているので、4行だけ表示可能です。
また、スクロールすることですべての選択肢を表示可能です。
<optgroup>で指定したlabel自体は選択することができませんが、グループ分けをする上でのラベルとして表示可能です。
実際に書いてみよう
それでは実際に書いてみましょう。「select.html」というファイルを作成して、以下を記述します。
------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form action="#" method="GET">
<select name="name" id="name">
<option value="who">--- 誰を選択しますか? ---</option>
<option value="太郎">太郎</option>
<option value="二郎">二郎</option>
<option value="ジョン">ジョン</option>
<option value="ニキータ">ニキータ</option>
<option value="三郎">三郎</option>
</select>
<input type="submit" name="submit" value="送信" />
</form>
</body>
</html>
------------------------------------------------------------------
ブラウザで開いてみます。
まとめ
selectタグはフォームとしてもJavaScriptと組み合わせてもよく使うタグです。使い方はとてもシンプルですので、簡単に覚えられるかと思います。
他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。
TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。
独学に限界を感じている場合はご検討ください。
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
