HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでドロップダウンを作成する方法：select要素とoption要素の基本

HTMLの学習を進めていくと、作成したページがユーザー体験にどのような影響を与えるかを考える必要が出てきます。その中でも重要なのが、Webページの情報整理（レイアウト）がユーザー体験をどう変えるかという点です。ごちゃごちゃと詰め込まれたページは、訪問者がそのサイトに留まり、目的の操作を完了しようとする意欲を大きく損なってしまいます。

フォームを見やすく整理する方法のひとつが、ラジオボタンやチェックボックスとして並べていた選択肢を、ドロップダウンリストにまとめることです。ユーザーはリストをスクロールしながら、目的の選択肢を探すことができます。

この記事では、HTMLを活用してフォーム要素として使える <select> ドロップダウンを作成する方法を解説します。ナビゲーションバー用のドロップダウンメニューの作り方については、「CSS Dropdowns」の記事をご覧ください。

ドロップダウンの基本構造

HTMLのドロップダウンメニューの基本構造は、グループに名前を付けて識別する <select> 要素と、ドロップダウンの内容となる複数の <option> タグで構成されます。

まずはドロップダウンの骨格を作ってみましょう。id属性とname属性に「baseball-teams」を指定した <select> 要素を記述します。idは後からスタイルを調整したいときに役立ちます。一方、name属性は、チームが選択された後にフォームデータをサーバーへ送信するときなど、データを扱う場面で必要になります。

<!DOCTYPE html>
<html>
<body>
 
<h1>The select element</h1>
 
<p>The select element is used to create a drop-down list.</p>
 
<form onsubmit=handleSubmit(event)>
 <label for="baseball-teams">Choose a baseball team:</label>
 <select id="baseball-teams" name="baseball-teams">
         <option selected value="">Select Team</option>
         <option value="Arizona Diamondbacks">Arizona Diamondbacks</option>
         <option value="Atlanta Braves">Atlanta Braves</option>
         <option value="Baltimore Orioles">Baltimore Orioles</option>
         <option value="Boston Red Sox">Boston Red Sox</option>
         <option value="Chicago Cubs">Chicago Cubs</option>
         <option value="Chicago White Sox">Chicago White Sox</option>
         <option value="Cincinnati Reds">Cincinnati Reds</option>
         <option value="Cleveland Indians">Cleveland Indians</option>
         <option value="Colorado Rockies">Colorado Rockies</option>
         <option value="Detroit Tigers">Detroit Tigers</option>   
         <option value="Houston Astros">Houston Astros</option>   
         <option value="Kansas City Royals">Kansas City Royals</option>
         <option value="LA Angels">Los Angeles Angels of Anaheim</option>  
         <option value="LA Dodgers">Los Angeles Dodgers</option>
         <option value="Miami Marlins">Miami Marlins</option>
         <option value="Milwaukee Brewers">Milwaukee Brewers</option>
         <option value="Minnesota Twins">Minnesota Twins</option>
         <option value="NY Mets">New York Mets</option>
         <option value="NY Yankees">New York Yankees</option>
         <option value="Oakland Athletics">Oakland Athletics</option>
         <option value="Philadelphia Phillies">Philadelphia Phillies</option>
         <option value="Pittsburgh Pirates">Pittsburgh Pirates</option>
         <option value="San Diego Padres">San Diego Padres</option>
         <option value="San Francisco Giants">San Francisco Giants</option>
         <option value="Seattle Mariners">Seattle Mariners</option>
         <option value="STL">St. Louis Cardinals</option>
         <option value="Tampa">Tampa Bay Rays</option>
         <option value="TX">Texas Rangers</option>
         <option value="Toronto" value="LA Angels">Toronto Blue Jays</option>
         <option value="Washington">Washington Nationals</option>
       </select>
 <br><br>
 <input type="submit" value="Submit">
</form>
 
<p>Click the "Submit" button and the form's data will be shown below.</p>
<h3></h3>
<script async defer>
 
 const handleSubmit = (event) => {
   event.preventDefault()
   let select = document.getElementById('baseball-teams');
   let option = select.options[select.selectedIndex];
   let result = document.querySelector('h3');
   result.textContent = option.text;
 }
</script>
</body>
</html>

このコードを実行すると、シンプルなドロップダウンが表示されます。最初の選択肢には、このドロップダウンで何を選ぶのかが示されています。ここでは「野球チームを選んでください」という案内です。ドロップダウンをクリックすると、メジャーリーグの全チームが選択肢として表示されます。

値を選択すると、その値が <select> のselectedIndex（選択インデックス）に割り当てられます。これにより、取得したデータに対してどのような処理を行うかを判断するロジックを組み立てやすくなります。選択された項目のname属性とvalue属性の値を把握しておくことは、フォームデータを何かに活用したい場合に非常に重要です。

フォームデータの扱い方については、バックエンドを学ぶ際にさらに詳しく取り上げます。ここでは、ドキュメント下部にあるJavaScriptの動作について気にする必要はありません。まずは、ページ上にドロップダウンを表示させるための <select> 要素と <option> 要素の使い方だけを押さえておきましょう。

なお、ブートキャンプ受講者の81%が「受講後にテック業界でのキャリア展望への自信が高まった」と回答しています。自分に合ったブートキャンプを探してみてはいかがでしょうか。また、ブートキャンプ卒業生の平均的なキャリア移行期間は、受講開始から初めての就職まで6ヶ月未満です。

まとめ

この記事では、フォーム用のドロップダウンメニューの作成方法を学びました。<select> 要素と <option> 要素を使えば、ユーザーが複数の選択肢の中からひとつを選べるUIを簡単に実装できます。基本をマスターしたら、次は <optgroup> を使った選択肢のグループ化にも挑戦してみましょう！

  1. HTMLのsize属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのsize属性は、select要素やinput要素において、画面に表示される選択肢の数（または入力欄の文字数）を指定するための属性です。この属性を使うことで、ドロップダウンリストを複数行表示のリストボックスに変更したり、テキスト入力欄の横幅を調整したりすることができます。 size属性の構文 size属性の基本的な記述方法は以下のとおりです。 <tagname size="数値"></tagname> size属性には、表示したい選択肢の数や文字数を整数で指定します。 HTML size属性の使用例 それでは、実際にsize属性を使用した具体

  2. HTMLのoption要素におけるvalue属性とは？基本構文とサンプルコードで解説

    HTMLのvalue属性は、<option>要素に対してサーバーへ送信する値を指定するための属性です。フォーム送信時に、ユーザーが選択した選択肢の値がこの属性の内容として送られます。値そのものは画面上には表示されず、表示されるテキスト（ラベル）とは別に内部的なデータを持たせられるのが特徴です。基本構文value属性の基本的な書き方は以下のとおりです。<option value=テキスト></option>value属性には任意の文字列を指定できます。省略した場合は、<option>要素内のテキストがそのまま送信されます。使用例ここでは、好きな科目