このページについて
このページではHTMLで使う事ができるselectタグの機能と使い方を解説しています。
selectタグ
selectタグはユーザーが選ぶ事ができるセレクトボックスを定義する事ができます。セレクトボックスとは以下のような物です。
項目1から3までを1つのセレクトボックスに入れています。プルダウンとかも言いますが、このような物を定義する事ができます。
selectタグはインライン要素なので、文章の途中に入れることも可能です。
selectタグの書き方
selectは単体では何も表示しません。表示するにはoptionタグを使用する必要があります。そしてselectはlabelタグも併用しましょう。このlabelタグはその入力エリアやセレクトボックスに対する説明を定義するもので、基本的にはセットで使うことを推奨されています。
基本的なセレクトボックスの書き方は以下のようになります。
<label>セレクトボックス
<select>
<option>項目1</option>
<option>項目2</option>
<option>項目3</option>
</select>
</lable>このようにlabelタグで囲み、その中にselectやoptionタグを入れるとユーザーがラベル名をタップやクリックした場合に、セレクトボックスが選択状態になります。labelタグで囲まなくてもいいんですが、その際はid属性とfor属性を併用して関連づけておくとユーザーからは分かりやすいかなと思います。
選択・送信時に送られる値に関しては、それぞれのoptionタグに設定されているvalue属性が送信されます。未設定だった場合はそのoptionタグの項目名がそのまま送信されます。
selectタグで使える属性
selectタグで使える属性は以下の通りです。詳しい解説はそれぞれのページを参照してください。
| autocomplete | 入力や選択に関してオートコンプリートを有効にする |
|---|---|
| autofocus | ページ読み込み時に自動で選択状態にする |
| disabled | 指定した選択項目を選べないようにする |
| form | 特定のフォームと関連付ける |
| multiple | 複数選択することを許可する |
| name | セレクトボックスの名前を定義 |
| required | 選択必須であることを定義 |
| size | 一度に見えるセレクトボックスの項目数を指定 |
selectタグはグローバル属性とイベント属性をサポートしています。
selectタグで唯一困惑するというか扱いが難しいのがmultiple属性です。これを使う場合、キーボードとの組み合わせでOSの標準機能が動作したりブラウザによってはそもそも動作しなかったりと、なかなか不安定です。
selectタグの例
selectタグの例を簡単に紹介します。まず基本的な選択は以下の通りに出来ます。
<label>ラベル</label>
<select id="select1>
<option value="A">項目1</option>
<option value="B">項目2</option>
</select>これで実行するとシンプルな選択リストが出ます。
optgroupタグで選択リスト内でグループ分けをする事ができます。
<label>ポケモン</label>
<select>
<optgroup label="水ポケ">
<option>カメックス</option>
<option>オーダイル</option>
<option>ラグラージ</option>
<option>エンペルト</option>
<option>ダイケンキ</option>
<option>ゲッコウガ</option>
<option>アシレーヌ</option>
<option>インテレオン</option>
</optgroup>
<optgroup label="氷ポケ">
<option>クマシュン</option>
<option>ツンベアー</option>
<option>ユキワラシ</option>
<option>ユキメノコ</option>
<option>オニゴーリ</option>
</optgroup>
</select>これを実行したものが以下になります。
値の取得
選択結果を受け取る際にはoptionタグのvalue属性を受け取ります。その時に使うのがJavaScriptやPHPなんですが、どちらに関しても簡単に解説します。
PHPで受け取る場合はいつも通り、method属性でPOSTを選択し、PHP側で$_POSTから使いたいデータを取り出します。
JavaScriptではイベント属性を使い、関数を実行させることで中身を読み出す事ができます。中身は簡単に書くと以下の通りです。
let x = document.getElementById('select1').value;Idの中身はその都度変えてく使いましょう。valueプロパティを使うことで、選択された項目のvalue属性を読みとって扱う事ができます。
送信される値は各optionタグのvalue属性で指定されている物ですが、属性未設定の場合はoptionタグの項目のテキストそのものが送信されます。
まとめ
selectタグは選択可能なリストを定義するのみとなり、中身を定義するにはoptionタグを使う必要があります。selectとoptionではそれぞれ使える属性が異なる為両方とも覚えておくに越したことはありません。
値を取得するにはJavaScriptやPHPで取得し、扱う事ができます。クリック時に何かの処理を行いたい場合、クリックイベントを設定する事で実現できます。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。