プルダウンメニューを表すときは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」です。
[…] 関連記事 『select要素でプルダウンメニューを作成できる【HTML】』 […]