「HTML/フォーム」の版間の差分
削除された内容 追加された内容
Marine-Blue (トーク | 投稿記録) 隠しフォーム、ラジオボタン、チェックボックスについて加筆 |
Marine-Blue (トーク | 投稿記録) select/option属性を使ったメニューについての記述を追加 |
||
91 行
複数の選択項目の中から複数項目を選択できるようにするチェックボックスを作成する。name属性でグループを識別し、value属性値で選択された項目を識別する。
=== リストメニュー ===
予め用意された項目の中から特定のものを選択する形式のメニュー。通常はvalue属性値に指定された値がフォーム送信時に利用されるがこれを省略した場合項目名（option要素に囲まれた文字列）がフォームの値として送信される。
==== プルダウンメニュー ====
<source lang="html4strict">
<select name="名前">
<option value="識別値1">項目1</option>
<option value="識別値2" selected>項目2</option>
<option value="識別値3">項目3</option>
<option value="識別値4">項目4</option>
</select>
</source>
select属性とoption属性を使用することでプルダウンメニューを作成できる。任意のoption要素にselected属性値を指定した場合その項目が初期状態で選択状態となり、指定しなかった場合どの項目が指定されるかはブラウザ依存となる（通常一番上が指定される）。
一般的なブラウザでは右端に表示されるマークを押してプルダウンメニューを表示し、項目をクリックすることで選択する仕組みだが、一部ブラウザでは格納状態のプルダウンメニュー上でマウスホイールを上下することにより項目を選択することも可能となっている。
===== グループメニュー =====
<source lang="html4strict">
<select name="名前">
<optgroup label="グループ名1">
<option label="ラベル1-1" value="識別値1-1">項目1-1</option>
<option label="ラベル1-2" value="識別値1-2">項目1-2</option>
<option label="ラベル1-3" value="識別値1-3">項目1-3</option>
<option label="ラベル1-4" value="識別値1-4">項目1-4</option>
</optgroup>
<optgroup label="グループ名2">
<option label="ラベル2-1" value="識別値2-1">項目2-1</option>
<option label="ラベル2-2" value="識別値2-2">項目2-2</option>
<option label="ラベル2-3" value="識別値2-3">項目2-3</option>
<option label="ラベル2-4" value="識別値2-4">項目2-4</option>
</optgroup>
<optgroup label="グループ名3">
<option label="ラベル3-1" value="識別値3-1">項目3-1</option>
<option label="ラベル3-2" value="識別値3-2">項目3-2</option>
<option label="ラベル3-3" value="識別値3-3">項目3-3</option>
<option label="ラベル3-4" value="識別値3-4">項目3-4</option>
</optgroup>
</select>
</source>
option属性群をoptgroup属性でグループ分けすることによりプルダウンメニューのグループ表示が可能になる。option属性のlabel属性値は表示をグループ化したときに表示されるもので、メニュー項目の省略形を記述するようになっている。ただし一般的なブラウザで現在このグループ表示に対応しているものは非常に少なく、未対応ブラウザではoptgroupを選択不可能項目として表示させるようになっている。
=== リストボックス ===
<source lang="html4strict">
<select name="名前" size="行数" multiple>
<option value="識別値1">項目1</option>
<option value="識別値2" selected>項目2</option>
<option value="識別値3">項目3</option>
<option value="識別値4">項目4</option>
</select>
</source>
select属性にsize属性を指定すると複数行表示が可能になり、size属性の値が行数になる。一般的に、項目が行数より多かった場合はその分が省略表示になり、スクロールバーして残りの部分を確認できる形となる。また、multiple属性を指定した場合複数項目を選択して送信できるようになる。
[[Category:World Wide Web|HTML ふおーむ]]
[[Category:コンピュータ言語|HTML ふおーむ]]
| |||