18

通常、私は順序付けられていないリストタグを使用してフォームのスタイルを設定します。

<fieldset>
    <ul>
        <li>
            <label for="txtName">Name</label>
            <input type="text" id="txtName" />
        </li>
    </ul>
</fieldset>

<p>ただし、次のように、代わりにタグを使用するマークアップがよく見られます。

<fieldset>
    <p>
        <label for="txtName">Name</label>
        <input type="text" id="txtName" />
    </p>
</fieldset>

これらのどれがより意味的に正しいですか？<p>スタイルがより簡潔であること以外に、さまざまな方法の長所または短所はありますか？

編集：ここでワームの缶を明らかに開けます-より多くのオプション、ああ！:) W3Cにはここでの推奨事項がありますか？

面白いことに、W3C勧告は最もエレガントでない解決策のようです。

<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>

残念ながら、フォーム要素をマークアップするための最良の規則に関するより強力なガイダンスはありません。

4

8 に答える 8

20

私の意見では、フォームコントロールのグループはリストアイテムでも段落でもありません。フォームをマークアップするときは、ラベル/入力のグループを<div>sでラップして区切ります。フォームコントロール間の分割をマークアップしようとしている場合は、を使用することを恐れないでください<div>。

<fieldset>
  <div class="field">
    <label for="txtName">Name</label>
    <input type="text" id="txtName" />
  </div>
  <div class="field">
    <label for="txtTitle">Title</label>
    <input type="text" id="txtTitle" />
  </div>
</fieldset>

与えられた例から、<p>CSSが利用できない場合、アイテムの横に箇条書きが表示されないため、おそらく「より良く」低下し、コントロールのグループはおそらくかなり適切に配置されます。

于 2009-05-13T22:32:48.830 に答える
11

定義リストを忘れないでください：

<fieldset>
    <dl>
        <dt><label for="txtName">Name</label></dt>
        <dd><input type="text" id="txtName" /></dd>
    </dl>
</fieldset>

本当の正しい答えはありません。自分にとって最も意味のあるマークアップを選択してください。私にとって、フォームは順序付けられていないリストではありません。定義リストは私の心の中でより近いです。

于 2009-05-13T22:30:54.933 に答える
8

一般に、フォームフィールドは、意味的に言えば、段落でもリストアイテムでもありません。フォームフィールドをグループ化する必要がある場合は<div>、クラスを含むが最も適切ですが、<label>/<input>ペアの周りのコンテナを探しているだけの場合は、ラベルをフィールドに関連付ける別の方法を検討してください。

<fieldset>
    <label>Name <input type="text" id="txtName"/></label>
    <label>Location <input type="text" id="txtLocation"/></label>
</fieldset>

その後、人工的なラッパーなしで（そして二度と心配することなく）それらを一緒にスタイリングまたは操作できますfor=。

于 2009-05-13T22:49:31.627 に答える
6

私は順序付きリストを使用する傾向があります

<fieldset>
<ol>
    <li>
        <label for="txtNameFirst">Name</label>
        <input type="text" id="txtNameFirst" />
    </li>
    <li>
        <label for="txtNameLast">Name</label>
        <input type="text" id="txtNameLast" />
    </li>
</ol>
</fieldset>

順序付きリストを使用する私の意味論的理由は、印刷されたフォームの多くは実際には番号が付けられているため、フォーム入力の順序付きリストであるということです。

意味的には、定義リストにも水が含まれていると思います。また、すべてのラベルと入力のペア、および個々のラベルと入力にラッパーを提供するという追加の利点があり、多くの設計制御を行うことができます（可能な場合）各ラベル/入力ペアの周りにDLをラップするというわずかな利き手で生きる）

<fieldset>
    <dl>
        <dt><label for="txtNameFirst">Name</label></dt>
        <dd><input type="text" id="txtNameFirst" /></dd>
    </dl>
    <dl>
        <dt><label for="txtNameLast">Name</label></dt>
        <dd><input type="text" id="txtNameLast" /></dd>
    </dl>
</fieldset>

順序付き/順序なし/定義リストがあなたのものではない場合、私はdivを使用します。それらの唯一の暗黙のセマンティクスは「除算」であるため、仕事には問題ありません。

私の意見では、p要素の暗黙のセマンティクスは適用されないため、段落（p）要素を使用してラベル/入力のペアをラップすることを正当化するのは困難です。（また、必要に応じて、説明テキストのフォーム内でp要素を使用できるようにしておくと便利です）

于 2009-05-14T01:56:34.097 に答える
4

W3Cがフォームに対してレイアウトする重要な点は、ラベルとフォーム要素をプログラムで簡単にグループ化できるようにフォームが設​​定されていることです。

1.3.1情報と関係：プレゼンテーションを通じて伝えられる情報、構造、および関係は、プログラムで決定するか、テキストで利用できます。

特に、HTMLテクニック44：ラベル要素の使用とHTMLテクニック71：説明の提供。

各ラベルをラップしてリストアイテムに入力することで得られる利点は、スクリーンリーダーを使用しているユーザーが、リストにx個のアイテムが含まれていることを最初に示すことができることです。これは便利な場合があります。

一般的に、私たちのデザイナーはZackを使用していますが、フォームの行は「formrow」などのクラスのdivでラップされています。

于 2009-05-13T23:04:15.660 に答える
0

私は、標準が順序付けられていないリストである新しい仕事を得るまで、1つ1つとコンボを<div>使用する傾向がありました。私には、編集機能を備えた単なる表形式のデータであると主張するテーブル（ラベル用に1列、フィールド用に1列）で誓う同僚がいます。<label><input>

この時点で、順序付けられていないリストとしての入力が最適なセマンティックであると思いますが、ご存知のように、この主題については多くの意見があります。

于 2009-05-14T02:02:40.493 に答える
0

WHATWGは、実際にはフォームの各部分を段落と見なします。

フォームの各部分は段落と見なされ、通常、p要素を使用して他の部分から分離されます。

私がこれに同意するかどうかはわかりませんが、それはあなたが得ることができる問題に対する最も「公式な」答えのようです。残念ながら、説明が見つかりませんでした。

于 2018-06-19T11:53:42.457 に答える
0

フォームのコンテンツに常に含まれている場合

<form id='theform'>
  <label for='item-1'>Name</label>
  <input id='item-1 type='text' name='name'>
  <label for='item-2'>Email</label>
  <input id='item-2 type='email' name='email'>
</form>

シングルでこれをスタイリングすることが可能です

#theform  {
    display: grid;
    grid-template-columns: 100px 200px;
}

ラベルの幅100ピクセルの列と、入力フィールドの幅200ピクセルの列が生成されます。ただし、ラベル/入力またはラベル/選択のリズムが必要であり、間に何もありません。

于 2021-02-13T15:00:44.970 に答える