web-dev-qa-db-ja.com

W3Cが入力要素を<p>タグでラップすることを推奨するのはなぜですか？

Webでフォームが次のように配置されている多くの例を見てきました。

<form>
    <p><input></p>
</form>

驚いたことに、これは spec ：にも記述されています。

どのフォームもフォーム要素で始まり、その中にコントロールが配置されます。ほとんどのコントロールは、デフォルトで1行のテキストフィールドを提供するinput要素で表されます。コントロールにラベルを付けるには、label要素を使用します。ラベルテキストとコントロール自体は、label要素の内部に入ります。フォームの各部分は段落と見なされ、通常、p要素を使用して他の部分から分離されます。これをまとめると、次のように顧客の名前を尋ねることができます。

このセクションは規範的ではありませんが、それでもこれは悪い習慣であり、意味論的ではないように思われます。目的は入力を独自の行に配置することだと思いますが、これらの要素の表示はCSSを使用して制御するべきではありませんか？

W3Cがフォームをこのようにレイアウトするようにアドバイスする理由はありますか？何か不足していますか？

htmlformsw3csemantic-markup
30
Radu

意味のある（読み取り：セマンティック）方法でフォームを記述している場合は、テキストのフローが要素につながるようにする必要があります。

<form>
 <p><label for="firstName">Please enter your first name:</label><input id="firstName" type="text" /></p>
</form>

さらに良い方法は、フォームをmad-libsスクリプトのように扱うことです。

<form>
  <p>Hello. My <label for="firstName">name</label> is <input id="firstName" type="text" />...</p>
</form>

p要素は、フォームをマークアップする唯一の方法ではありません。データのマトリックスが追加/編集されている場合、テーブルを使用することは意味的に有効です。

その他の場合は、notラッピング要素を使用したくない場合があります。これは、提供する内容contentによって異なります。 後にすべてのスタイルを設定するのが心配です。

29
zzzzBov

INPUT要素はインラインであるため、それらをある種のブロック要素でラップして、それらの間に自然な分離があるようにすることは理にかなっています。 DIVにはデフォルトでマージンがないので、段落を使用しても意味がありませんか？

3
Abel Mohler

主要なcss/html/gridフレームワークがPタグを使用していない

ここを参照してください bootstrap または foundation

imho use fieldset およびdivs。

w3cは段落タグの使用を推奨しています<p>彼らのアドバイスに従うことはほとんど意味がありません。その理由は、あなた自身を制限しているからです。つまり、pタグを使用してコンポーネントを作成した場合、その中にdivを配置することはできません。 <div>を<p>内に配置すると、<p>が追加されます

さて、なぜpタグ内にdivを入れたいのですか？えっと…なぜだ？たとえば、ある方法でコンテンツのスタイルを設定したり、情報を追加したりします。 pタグを使用すると、スタックします。私にも悪いアドバイスのようです。

答え：

コンテンツを整理したら、スタイリングについて心配する

たとえば、1年後に何が必要になるかを知っていることを前提としています。

私のアドバイス：あなたはのようになりたくない

「制限的なPタグを使用していなかったらよかったのに」

2
Toskan

これはHTML4に当てはまりますが、要求されたHTML5には当てはまらない可能性があります。

http://www.w3.org/TR/html401/interact/forms.html#edef-FORM

formには、子としてブロックレベルの要素が必要です。 inputはインライン要素です。 pがそのトリックを行います。

1
Shi