問いあわせフォームを下記のように作ろうと思ったのですが、dl～の方がul～より正しいでしょうか。

Question

問いあわせフォームを下記のように作ろうと思ったのですが、dl～の方がより正しいでしょうか。

A案
<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>

B案
下記の方の定義リストの方が近いでしょうか？
ただ定義リストとは、名前がdtならｄｄに名前の説明が来るのが定義リストだと思ったのですが、下記の場合も実際の名前を記載してもらうので、説明と考えられるでしょうか？
http://liginc.co.jp/web/js/jquery/80609

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

また上記ligではdlを複数にしているのですが、リファレンスでは、複数にしていません。
どちらでも構わないのですかね？

<dl> <dt>ジョン・レノン</dt> <dd>１９４０年１０月９日リヴァプール生まれ。</dd> <dt>ポール・マッカートニー</dt> <dd>１９４２年６月１８日リヴァプール生まれ。</dd> </dl>

最後に海外のポートフォリオを見ると、ほとんど、電話番号とメールアドレスしかなくなっているのですが、最近は問い合わせフォーム自体、閲覧者にとって記載が面倒なので今は作らない方向でしょうか？

ポートフォリオなら、名前、メール、電話番号、内容、個人情報取り扱い同意位に絞るのが今の流れですかね。
ふりがなまでは、入れない方が今は良いのかもしれませんね。

最後に問い合わせフォームをasideにしている所も見るのですが、
問い合わせフォームも下記の補足や余談になると思いますか？

<aside>でタグ付けした要素は、あくまでも本文から外れる余談・補足情報ですから、 本文の流れの一部となる挿入句（カッコでくくって差し込むような内容など）に対して、<aside>タグを使用するのは適切ではありません。

Answer 1

<dt></dt>にたいして<dd></dd>がその要素の説明をしているのが本来のタグの意味じゃないでしょうか？

ちょっと極端な例ですけど------

<h1>食べ物分類リスト<h1> <dl> <dt>りんご</dt> <dd>くだもの</dd> <dt>みかん</dt> <dd>くだもの</dd> <dt>にんじん</dt> <dd>やさい</dd> <dt>たまねぎ</dt> <dd>やさい</dd> <dt>ばなな</dt> <dd>くだもの</dd> <dt>なす</dt> <dd>やさい</dd> </dl> ---------------------------------------- <dt></dt>の中の要素を<dd></dd>が説明しています。 これが本来の使い方かと思います。

質問者様の例で言うと------------
<dl>
<dt>お名前</dt>
<dd><input type="text"></dd>
<dt>電話番号</dt>
<dd><input type="text"></dd>
</dl>

でいいともいます。

例外で言うと、取得したい情報がいくつかある場合。
質問者様の例で言うと②----------

<h1>予約フォーム</h1> <h2>ご予約のご本人様<h2> <p>ご本人様の情報をご入力ください。</p> <dl> <dt>お名前</dt> <dd><input type="text"></dd> <dt>電話番号</dt> <dd><input type="text"></dd> <dt>予約時間</dt> <dd><input type="text"></dd> </dl> <h2>同伴者様</h2> <p>同伴者様の情報をご入力ください。</p> <dl> <dt>お名前</dt> <dd><input type="text"></dd> <dt>電話番号</dt> <dd><input type="text"></dd> </dl> ---------------------------------------- とかのそれぞれの要素の囲い込みが異なる場合などは分ける必要があると思います。

Comments

[退会済みユーザー]

＞＞＞
<dt></dt>の中の要素を<dd></dd>が説明しています。
これが本来の使い方かと思います。

私もおっしゃるとおりだと思います。
問題は下記の場合記載してもらう名前がお名前の説明と言えるかどうかですね。
言っても良いというお考えですね。

質問者様の例で言うと------------
<dl>
<dt>お名前</dt>
<dd><input type="text"></dd>
<dt>電話番号</dt>
<dd><input type="text"></dd>
</dl>
----------------------------------------
でいいともいます。

[退会済みユーザー]

LIGの下記の書き方はやはり、イレギュラーなのですね。dlを変える場合は完全に内容が変更する場合のみが一般的ですよね。

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

[Iks]

>LIGの下記の書き方はやはり、イレギュラーなのですね。dlを変える場合は完全に内容が変更する場合のみが一般的ですよね。

何をひとくくりとしたいかにもよるところはありますが、
とりあえずは質問者様のおっしゃる通りだと思います。

[退会済みユーザー]

LIGは何らかの理由で、別グループと考えたのでしょうね。
理由がわかりませんが。