ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

【HTML初心者向け】selectタグを使ってセレクトボックス、プルダウンメニューを作る方法

HTML
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
Adobeの期間限定セール開催中

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

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

Hiko
Hiko

こんな感じに言語選択メニューやユーザーに何かを選択させたい時によく使われるので、しっかり抑えておきましょう!

セレクトボックスがよく使われる場面
  • 言語選択
  • 個数、数量の選択
  • 地域、国の選択
  • 性別の選択

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

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

スポンサーリンク

selectタグでできる事

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

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


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

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

selectタグの基本的な書き方

このようなセレクトボックスを作るには<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>
ネコ君
ネコ君

表示させたい文字を<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タグに属性をつけると可能になります。

<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>と属性を加えると複数選択できるようになります。

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″ → 3行表示

size=”1″ → 1行表示(デフォルト)

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

ネコ君
ネコ君

HTMLだけのセレクトボックスはなんだか、シンプルだなぁ〜

Hiko
Hiko

コピペOKの簡単なカスタマイズをご紹介しますね!

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

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

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

ネコ君
ネコ君

セレクトボックスを作るときは<select>と<option>を使うのを忘れない事だね!

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

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

HikoPro
HikoPro

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
HTML
HikoPro Blog

コメント

タイトルとURLをコピーしました