このページについて
このページではHTMLで使う事ができるoptionタグの機能と使い方を解説しています。
optionタグ
optionはselectタグ/optgroupタグ/datalistタグの3つで使います。これらのタグは全て「選択可能なリストを定義」するもので、optionはそれらの中で使います。
基本的にはoption単体で使うことはなく、上記の3タグのどれかの内部で使用し、選択可能な項目を定義します。
optionタグの書き方
optionは各リストタグの中で使うだけです。属性も設定可能ですがそれらは後で解説します。
<select>
<option value="A">項目1</option>
<option value="B">項目2</option>
<option value="C">項目3</option>
</select>基本的にはこんな感じでselectタグやdatalistタグなどの下に入れて使います。optgroupタグは選択項目をグループ分けする時に使う物なので、以下のようにさらに入れ子構造にして使います。
<datalist>
<optgroup label="グループA">
<option value="A">項目1</option>
<option value="B">項目2</option>
<option value="C">項目3</option>
</optgroup>
<optgroup label="グループB">
<option value="A">項目1</option>
<option value="B">項目2</option>
<option value="C">項目1</option>
</optgroup>
</datalist>このように入れ子構造にして使います。
optionタグで使える属性
optionで使う事ができる属性一覧です。詳しい解説はそれぞれのページを参照してください。
| disabled | 設定すると選択不可にする |
|---|---|
| label | 選択項目の名前を示すラベル |
| selected | 初期状態で選択済みにする |
| value | データ送信時に送る値を設定する |
optionタグのvalue属性について
optionはデータ送信時にvalue属性の値を送信します。valueは表示している名前と異なる場合でも構いません。そして日本語を設定し、送信することも可能です。valueの時点ではアルファベットにしておいて、PHP側などで扱いやすいように変換するというのも1つの手です。
value属性が未設定の場合、送信される値はoptionタグの表示名(項目名)になります。例えば以下の2つのoptionの場合を見てみます。
<option value="A">項目1</option>
<option>項目2</option>この場合、項目1が送信された場合はvalueが設定されているのでAを受け取ります。ただし項目2が送信された場合、valueは未設定なので項目2がそのまま送信されます。
PHPで受けとる方法
フォームでselectタグの選択結果を受け取る方法はmethod属性でpostを設定し、PHP側で$_POST変数を使って取得します。
その際に配列を文字列にできませんみたいな警告が出ますが、その解決方法を簡単に掲載しておきます。
ポイントとなるのはselectタグにname属性で名前を設定し、そのnameの値を配列から受け取るようにします。
<form method="post" action="./phpファイル"><select name="list1">
<option value="A">項目1</option>
<option value="B">項目2</option>
<option value="C">項目3</option>
</select>
<button type="submit">送信</button>
</form>このように書きます。formタグで全体を囲み、selectタグにはname属性で自分の分かりやすい名前を設定しておきます。以下は受け取るphp側の中身になります。
<?php
echo $_POST['list1'];
?>これはシンプルに受け取ったPOSTの中身を出力するというものになります。ただしname属性を設定しておかないと変換エラーにより表示されません。そこだけ注意しましょう。
ちなみにoptgroupタグで選択リストを複数のグループに分けた場合でも、selectタグのname属性をしっかり指定しておけばどの項目を選択してもvalueを受け取る事ができます。
まとめ
optionタグは単体で使うことはなく、selectタグ/datalistタグ/optgroupタグの中に入れて使うものです。選択項目を受け取るためにvalue属性はしっかりと設定しておきましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。