• HOME > 
  • HTML > 
  • HTMLのselectタグの使い方【multiple属性で複...

HTMLのselectタグの使い方【multiple属性で複数選択を可能にする方法も解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

selectタグとは?

HTMLのselectはフォームなどにセレクトボックスを設置することができるタグです。あらかじめ用意した選択肢をプルダウンの形で表示させます。

属性値を設定することで複数選択を可能にしたり、表示する行数を変更したりできます。

inputとselectの違い

selectの使い方

selectは開始タグと終了タグからなるタグです。(終了タグを持たないinputと混同しないように注意してください)

selectの書き方

フォームを送信してデータを受け渡すためにはname属性を設定します。

選択肢はoptionタグを用いて作成します。(必要な選択肢の分だけoptionを使って作ります。)

実際に受け渡される値はoptionのvalueに設定した値になります。

HTML

<select name="sample">
    <option value="tokyo">東京都</option>
    <option value="kanagawa">神奈川県</option>
    <option value="saitama">埼玉県</option>
    <option value="chiba">千葉県</option>
    <option value="ibaraki">茨城県</option>
    <option value="tochigi">栃木県</option>
    <option value="gunma">群馬県</option>
</select>

プレビュー

セレクトボックスのスタイルなどは使用するブラウザやデバイスによって異なります。

表示する行数を変更する【size属性】

selectタグのsize属性を設定するとセレクトボックスに一度に表示する行数を変更できます。

省略した場合は「1」になります。「2」以上を設定するとプルダウンではなく、スクロールして選択肢を選ぶ形式になります。

selectのsize属性の書き方

HTML

<select size="3" name="sample">
    <option value="tokyo">東京都</option>
    <option value="kanagawa">神奈川県</option>
    <option value="saitama">埼玉県</option>
    <option value="chiba">千葉県</option>
    <option value="ibaraki">茨城県</option>
    <option value="tochigi">栃木県</option>
    <option value="gunma">群馬県</option>
</select>

プレビュー

複数選択を可能にする【multiple属性】

2つ以上の選択肢を選択できるようにしたい場合はmultiple属性を設定します。

属性値は不要で、multipleとだけ追記すればOKです。

ユーザーはCtrlもしくはShiftを押しながら選択すれば複数の選択肢を選ぶことが可能です。

selectのmultiple属性の書き方

HTML

<select multiple name="sample">
    <option value="tokyo">東京都</option>
    <option value="kanagawa">神奈川県</option>
    <option value="saitama">埼玉県</option>
    <option value="chiba">千葉県</option>
    <option value="ibaraki">茨城県</option>
    <option value="tochigi">栃木県</option>
    <option value="gunma">群馬県</option>
</select>

プレビュー

初期値を設定する【selected属性】

selected属性を記述した選択肢(optionタグ)は、初期値としてはじめに選択された状態になります。

HTML

<select name="sample">
    <option value="tokyo">東京都</option>
    <option value="kanagawa" selected>神奈川県</option>
    <option value="saitama">埼玉県</option>
    <option value="chiba">千葉県</option>
    <option value="ibaraki">茨城県</option>
    <option value="tochigi">栃木県</option>
    <option value="gunma">群馬県</option>
</select>

プレビュー

無効化する【disabled属性】

disabled属性を設定すると、そのセレクトボックスを無効化することが出来ます。

グレーの状態になり、プルダウンすることも出来なくなります。

selectのdisabled属性の書き方

HTML

<select disabled name="sample">
    <option value="tokyo">東京都</option>
    <option value="kanagawa">神奈川県</option>
    <option value="saitama">埼玉県</option>
    <option value="chiba">千葉県</option>
    <option value="ibaraki">茨城県</option>
    <option value="tochigi">栃木県</option>
    <option value="gunma">群馬県</option>
</select>

プレビュー

まとめ

以上がHTMLのselectの使い方です。

問い合わせフォームなどを作成するときに欠かせないパーツですので属性による設定の方法をしっかり理解しておきましょう。

広告
広告

関連する記事

サムネイル

HTMLのテキストボックスにクリアボタンを実装【inputの……

2024年09月04日
inputのtype属性を「search」にすれば自動的にクリアボタンが表示されます。簡単ですがデザインはブラウザに依存しておりカスタマイズはできません。JSを使って処理を自作する方法は、HTML・CSS・JSに関するある程度の知識が必要ですが、自由にカスタマイズできます。
サムネイル

HTMLのinputのdateで日付の入力欄を作る【初期値や……

2023年10月01日
最終更新日:2023年09月28日
HTMLのinputタグのtype属性にdateを指定すると、フォームなどに日付の入力欄を設置することができます。
サムネイル

ブラウザキャッシュを回避するCache Bustingの方法……

2023年09月01日
Cache Busting(キャッシュバスティング)とはキャッシュを利用せずに読み込みするように指定することです。
サムネイル

HTMLのdatalistタグの使い方【文字入力とプルダウン……

2023年08月08日
HTMLのdatalistは、テキストボックスとセレクトボックスを組み合わせたような入力欄を作ることができるタグです。一見普通のテキストボックスですが、クリックすると用意した入力候補が表示されます。
サムネイル

HTMLでラジオボタンを作成する方法【初期値の設定・チェック……

2023年08月08日
HTMLのinputタグのtype属性にradioを指定すると、フォームなどにラジオボタンを設置することができます。複数の選択肢の中からどれかひとつをユーザーに選んでもらいたい時に使用します。
サムネイル

HTMLのtextareaタグの使い方【inputとの違いや……

2023年07月10日
HTMLのtextareaはフォームなどに改行可能な入力ボックスを作成することができるタグです。属性値を設定することで幅や行数などを変更することが可能です。