select option要素の使い方

select optionタグのアイキャッチ
Pocket

selectとoptionはセットで使用し、フォームやアンケートなどホームページの部品を作る際に使います。formタグと一緒に使いサーバーへデータを送信する際に使用します。selectはあらかじめ設定した項目の選択に使用します。optionはselectの選択肢の設定に使用します。下記掲載のHTML使用例を確認するれば理解が早いでしょう。

カテゴリ タグ 機能 属性
フォーム <select> 選択リストを定義します。 name
sizeなど
<option> ドロップダウンリストなどを作ります。 valueなど
使用例
<select name="名前" size="縦幅"><option></option></select>

section optionの説明

optionとセットで使用します。ドロップダウン型のセレクトボックスを作ります。selectedを入れた場合は選択された状態で表示されます。

属性

name

selectの名前です。サーバーへのデータ転送時やJavaScriptによる走査などの際に利用します。

size

optionの表示がサイズの縦幅を変更できます。デフォルトで0が適用されています。指定方法はsize=”5″のように書きます。5つ分表示された状態になります。

multiple

複数の項目が選択可能になります。shiftキーやコマンドキーを押しながらクリックすることができるようになります。これを指定していない場合は1つしか選択できません。

form

HTML5で追加されました。いままではformの子要素としてformタグないに書く必要がありましたが、form属性を指定することで、formタグの外でも使えるようになりました。

selectとoptionの使用例

プレビュー

*基本形です。

*size=3を指定することで全ての項目が表示された状態になります。
*selectedを指定することで”グリーン”が選択された状態になります。
*multipleを指定することでキーボードの矢印キーで動かすことができます。

formについてのページのありますので、よくわからない方はご覧になってください。

カテゴリー HTMLリファレンスタグ

シェア&ブックマークする

Pocket


  • Webオーサリング
    WEBオーサリングツール
  • 低価格
    低価格ホームページ作成ソフト
  • フリー
    無料ホームページ作成ソフト
  • スマホ
    スマートフォンサイト作成ソフト
  • EC
    ネットショップ作成ソフト
  • 人気
    人気ホームページ作成ソフト
  • seo
    SEO対策ホームページ作成ソフト
  • おすすめ
    おすすめホームページ作成ソフト
  • 初心者
    初心者ホームページ作成ソフト
  • ビジネス
    企業向けホームページ作成ソフト