問い合わせフォームを作っているのですが、dlでフォームを作る場合、<label>はどのように使いますか？

Question

問い合わせフォームを作っているのですが、dlでフォームを作る場合、<label>はどのように使いますか？
下記のようにすると、上手くいきません。

<dl> <dt><label>お名前</dt> <dd><input type="text"></dd></label> <dt><label>電話番号</dt> <dd><input type="text"></dd> </dl>

ulなら下記のようにいきます。

<ul> <li><label>名前<input type="text" name="name" autofocus required pattern="^"></label></li> <li><label>メール<input type="email" name="email"></label></li> <li><label>電話番号<input type="email" name="email"></label></li> <li><label>本文<textarea name="body" placeholder="楽しかった。つまらなかった。"></textarea></label></li> </ul>

lavelはテキストを押したときも選択できるようにするために使うようですが、レスポンシブなら必須でしょうね。

Answer 1

<dl> <dt><label for="name">お名前</dt> <dd><input type="text" id="name"></dd></label> <dt><label for="tel">電話番号</label></dt> <dd><input type="text" id="tel"></dd> </dl>

このように，input要素にidを付けてあげて，そのidをlabel要素のfor属性に書いて関連付けしてあげれば上手く行くはずです．

Comments

[退会済みユーザー]

ありがとうございます。上手くいきました。classでなくidでないといけないようですね。

下記のようにしました。

<dl>
<dt><label for="name">お名前</dt>
<dd><input id="name" onclick=”” name="name" autofocus required></dd></label>
<dt><label for="tel">電話番号</label></dt>
<dd><input id="tel"></dd>
</dl>