プログラミング

select要素でプルダウンメニューを作成できる【HTML】

プルダウンメニューを表すときはselect要素を使います。

プルダウンメニューというのは上のようなメニューのこと。

選択肢は子要素として使えるoption要素でマークアップしています。

関連記事
option要素はセレクトボックスの選択肢を指定する【HTML】

select要素で使える属性

select要素で指定できる属性には以下のようなものがあります。

  • autofocus(オート・フォーカス)
  • disabled(ディスエーブルド)
  • form(フォーム)
  • multiple(マルチ・プル)
  • name(ネーム)
  • required(レクワイアド)
  • size(サイズ)

autofocus(オート・フォーカス)

autofocus属性を指定することで、Webページが読み込まれたら、autofocus属性が指定されたプルダウンメニューにフォーカスが自動的に移動されます。

autofocus属性は値を必要としない論理属性です。

disabled(ディスエーブルド)

disabled属性を指定すると、プルダウンメニューの選択が無効になります。

disabled属性は論理属性です。

form(フォーム)

form属性に任意のform要素につけたid属性値を指定することで、そのフォームとこのform属性を持つプルダウンメニューを関連づけることができます。

multiple(マルチ・プル)

multiple属性を指定すれば、複数の選択肢を選ぶことが可能になります。

[Ctrl]キーなどを押しながらクリックすることで、複数の値を選択することができ、送信されるデータは選択した複数の内容がカンマ(,)で区切られて送られます。

multiple属性は論理属性です。

name(ネーム)

name属性で、データが送信される際のクエリ名を指定することができます。

required(レクワイアド)

required属性が指定されたselect要素では、プルダウンメニューの選択が必須となります。

required属性は論理属性です。

size(サイズ)

size属性は、ユーザーに対して表示する選択肢の数を指定します。

multiple属性が指定されていたら初期値は「4」で、指定されていなかったら「1」です。

1 Comment

Leave a Comment