HTMLタグ/フォームタグ/部品グループにラベルを付ける

<legend></legend>

legend要素で、フォーム部品のグループにラベルを付けることができます。この要素はfieldset要素の中で使用します。


<legend>グループのラベル</legend>

legend要素は、fieldset開始タグの直後に配置します。

<fieldset>
<legend>グループのラベル</legend>
ここにフォームの部品を配置
</fieldset>

※legend要素の前には、他の要素やテキストなどは入れないようにします。（改行などの空白文字を入れることは可能です）

【accesskey属性の指定】

accesskey属性を使用することで、グループのラベルにアクセスキーを割り当てることができます。

<legend accesskey="u">グループのラベル（U）</legend>

アクセスキーを割り当てておくと、キーボードの操作によって任意のグループを容易に選択できるようになります。（グループ内の最初の部品が選択されます）

一般的なブラウザでは、グループの左上にラベルが表示されます。

使用例


<form method="post" action="example.cgi">

<fieldset>
<legend>申込者</legend>
<p>お名前：<input type="text" name="name1" size="30"></p>
<p>ご住所：<input type="text" name="address1" size="50"></p>
</fieldset>

<fieldset>
<legend>お届け先</legend>
<p>お名前：<input type="text" name="name2" size="30"></p>
<p>ご住所：<input type="text" name="address2" size="50"></p>
</fieldset>

<p><input type="submit" value="送信する"></p>

</form>

表示例

申込者

お名前：

ご住所：

お届け先

お名前：

ご住所：

※サンプルのため送信できません。

■accesskey属性を使用した例


<form method="post" action="example.cgi">

<fieldset>
<legend accesskey="m">申込者（M）</legend>
<p>お名前：<input type="text" name="name1" size="30"></p>
<p>ご住所：<input type="text" name="address1" size="50"></p>
</fieldset>

<fieldset>
<legend accesskey="o">お届け先（O）</legend>
<p>お名前：<input type="text" name="name2" size="30"></p>
<p>ご住所：<input type="text" name="address2" size="50"></p>
</fieldset>

<p><input type="submit" value="送信する"></p>

</form>

表示例

Windowsの場合は、「Alt + 任意のキー」または「Alt + Shift + 任意のキー」などの操作で選択することができます。（ブラウザにより操作方法は異なります）

申込者（M）

お名前：

ご住所：

お届け先（O）

お名前：

ご住所：

※サンプルのため送信できません。