今回はHTMLの初心者向けにselectタグoptionタグを使ってセレクトボックス、プルダウンメニューの作り方をどのサイトよりも分かりやすく解説していきたいと思います！

Select Language 日本語 English 中文

よく見かけるのは、何かのサービスに登録する時に地域選択や性別の選択をする際によく見かけますね！その他様々なwebサイトでもよく使われています！

HTML初心者の方はこれからWebサイト制作をする際に、selectタグoptionタグはとても頻繁に使う事になるのでしっかりと学んでおきましょう！

selectタグでできる事

selectタグはwebサイト上でユーザーの利便性を高めるためにとても重要になってきます。

Select Language 日本語 English 中文

言語を選択すると違う言語のサイトに飛ぶようにすることができる！

性別 男性 女性 その他

性別をユーザーに選択させてformタグを使ってユーザーが選択した情報を送信することも可能です!

webサイト上では主にサイトの切り替え、フォームの送信この2つの目的でselectタグが用いられています。

selectタグの基本的な書き方

Select Language 日本語 English 中文

このようなセレクトボックスを作るには<select>タグと<option>タグこの2つを使う必要があります。

<select name="language" class="language">
      <option> Select Language </option>
      <option value="jp">日本語</option>
      <option value="en">English</option>
      <option value="ch">中文</option>
    </select>

基本的なselectタグの書き方は選択する文字を<option>タグで囲み、それをさらに<select>タグで囲みます！

また、これだけでは何も起こらないセレクトボックスなのでformタグを使ってユーザーが選択した情報を送信させる必要があります。

送信させたい値をvalue属性に書いてあげると、選択した文字列に対応するvalue属性の値が送信されます。

formタグを使って選択した値を送信させる方法

通常selectタグはformタグと一緒に使われることが多く、ユーザーが選択した値をformタグを通してphpで処理しデーターベースに値を格納するのが一般的な使われ方です。

このようにwebサービスなどの新規画面でよく使われ、ユーザーが選択した値をformを通じて渡すのによく使われます。

<form action="send.php" method="post">
<select name="todoufuken">
      <option> --- 都道府県を選択 ---</option>
      <option value="tokyo">東京都</option>
      <option value="osaka">大阪府</option>
      <option value="aichi">愛知県</option>
    </select>
<select name="sex">
      <option> --- 性別 ---</option>
      <option value="men">男性</option>
      <option value="women">女性</option>
      <option value="other">その他</option>
    </select>
<input type="submit" value="送信">
</form>

このように<form>タグを使って全て丸々囲めばユーザーが選択した値を指定のファイルに送信することが可能です。

この際にinputタグで送信ボタンを作ることと、value属性を忘れないようにしましょう！

セレクトボックスを複数選択する

セレクトボックスを使ってユーザーに複数選択を促したい時にselectタグに属性をつけると可能になります。

— 話せる言語を選択して下さい(複数選択可)—- 日本語 English 中文 Thailand

<select name="language" multiple >
      <option value="jp"> --- 話せる言語を選択して下さい(複数選択可)---- </option>
      <option value="jp">日本語</option>
      <option value="en">English</option>
      <option value="ch">中文</option>
      <option value="ch">Thailand</option>
</select>

このように selectタグの中に <select multiple>と属性を加えると複数選択できるようになります。

セレクトボックスの行数を指定する

selectタグを使うとデフォルトで初めのoptionタグの文字列が表示されますが、属性を指定すると複数行表示することができます。

— 都道府県を選択 — 東京都 大阪府 愛知県 北海道 沖縄

←3行表示された！

<select name="todoufuken" size="3">
      <option> --- 都道府県を選択 ---</option>
      <option value="tokyo">東京都</option>
      <option value="osaka">大阪府</option>
      <option value="aichi">愛知県</option>
      <option value="hokkaido">北海道</option>
      <option value="okinawa">沖縄</option>
</select>

selectタグの中に size属性を追加する事によって表示するoptionタグの数を変更することができます！

size=”3″ → ３行表示

size=”1″ → １行表示（デフォルト）

セレクトボックスをCSSでカスタマイズ

See the Pen KLOqEK by Shinichi Hikosaka (@shinichi-hikosaka) on CodePen.

「セレクトボックス CSS」などでググると沢山おしゃれなカスタマイズがあるので、ぜひ試してみて下さい！

selectタグを使ってセレクトボックスを作る方法まとめ

webサイトやお問い合わせフォームでよく使われるので、いつでも使えるように沢山練習しましょう！

最後までご覧いただきありがとうございました！