【HTML】select option(プルダウン)の使い方をまとめてみた

Contents

　プルダウンを作成するには、selectタグでメニューを作成し、optionタグでプルダウンで表示される項目を表示します

<select>test</select>

↓↓表示結果↓↓

optionタグで項目を追加することで、項目を表示できます。

<select>
<option>test</option>
<option>test2</option>
</select>

↓↓表示結果↓↓

　プルダウンでは、name属性やvalue属性で名前や値を設定したり、selected属性であらかじめ選択した状態にすることができます。

　メニューの名前を設定します。データが送信されるときに、メニューの名前とデータがセットで送られます。データはvalue属性が設定している場合は設定値、設定されていない場合はタグ内のテキストが送信されます。

<select name="test">
<option>test</option>
<option>test2</option>
</select>

↓↓表示結果↓↓

表示状態に変化はありません。

name属性の値とともにサーバーへ送られるデータを指定します。データはvalue属性が設定している場合は設定値、設定されていない場合はタグ内のテキストが送信されます。

<select>
<option value="test">test</option>
<option value="test2">test2</option>
</select>

↓↓表示結果↓↓

表示状態に変化はありません。

項目をがあらかじめ選択された状態で表示されます。

<select>
<option>test</option>
<option selected="selected">test2</option>
</select>

↓↓表示結果↓↓

selectedで指定した値のtest2が表示されていることが確認できました。

オススメ記事