686

labelおよびinputHTML 要素のネストに関するベスト プラクティスはありますか?

古典的な方法:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

また

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>
4

14 に答える 14

578

W3のHTML4仕様から：

ラベル自体は、関連するコントロールの前、後、または周囲に配置できます。

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

また

<input type="text" id="lastname" />
<label for="lastname">Last Name</label>

また

<label>
   <input type="text" name="lastname" />
   Last Name
</label>

テーブルがレイアウトに使用されている場合、1つのセルにラベルがあり、別のセルに関連するフォームフィールドがある場合、3番目の手法は使用できないことに注意してください。

どちらかが有効です。最初の例または2番目の例のいずれかを使用するのが好きです。これにより、スタイルをより細かく制御できるようになります。

于 2009-04-21T18:54:35.583 に答える
77

私は好む

<label>
  Firstname
  <input name="firstname" />
</label>

<label>
  Lastname
  <input name="lastname" />
</label>

以上

<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />

<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />

主な理由は、HTML が読みやすくなるためです。CSS はネストされた要素でうまく機能するため、最初の例は CSS を使用した方が簡単にスタイルを設定できると思います。

でも、それは好みの問題だと思います。

さらにスタイリング オプションが必要な場合は、span タグを追加します。

<label>
  <span>Firstname</span>
  <input name="firstname" />
</label>

<label>
  <span>Lastname</span>
  <input name="lastname" />
</label>

私の意見では、コードはまだ良く見えます。

于 2011-09-11T15:03:03.137 に答える
54

動作の違い: ラベルと入力の間のスペースをクリック

ラベルと入力の間のスペースをクリックすると、ラベルに入力が含まれている場合にのみ入力がアクティブになります。

この場合、スペースはラベルの別の文字であるため、これは理にかなっています。

div {
  border: 1px solid black;
}
label {
  border: 1px solid black;
  padding: 5px;
}
input {
  margin-right: 30px;
}
<p>Inside:</p>
<label>
  <input type="checkbox" />
  Label. Click between me and the checkbox.
</label>

<p>Outside:</p>
<input type="checkbox" id="check" />
<label for="check">Label. Click between me and the checkbox.</label>

ラベルとボックスの間をクリックできるということは、次のことを意味します。

  • クリックしやすい
  • 物事の始まりと終わりがはっきりしない

Bootstrap チェックボックス v3.3 の例では、内部で入力を使用しています: http://getbootstrap.com/css/#formsそれらに従うのが賢明かもしれません。しかし、彼らは v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radiosで気が変わったので、何が賢明なのかわかりません。

チェックボックスとラジオの使用は、HTML ベースのフォーム検証をサポートし、簡潔でアクセスしやすいラベルを提供するように構築されています。そのため、<input>とは、内の<label>ではなく兄弟要素です。id と for 属性を指定してandを関連付ける必要があるため、これは少し冗長です。<input><label><input><label>

この点について詳しく説明している UX の質問: https://ux.stackexchange.com/questions/23552/should-the-space-between-the-checkbox-and-label-be-clickable

于 2014-07-06T14:02:30.410 に答える
43

ラベルタグに入力タグを含める場合は、「for」属性を使用する必要はありません。

とは言うものの、ラベルに入力タグを含めるのは好きではありません。なぜなら、それらは別個のエンティティであり、含まれていないと思うからです。

于 2009-04-21T18:56:09.370 に答える
19

個人的には、2番目の例のように、ラベルを外側に置いておくのが好きです。そのため、FOR属性があります。その理由は、フォームの見栄えを良くするために、幅などのスタイルをラベルに適用することが多いためです（以下の省略形）。

<style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />

私がフォームのテーブルとそのすべてのがらくたを避けることができるようにそれを作ります。

于 2009-04-21T18:59:59.610 に答える
17

W3 の推奨事項については、http://www.w3.org/TR/html401/interact/forms.html#h-17.9を参照してください。

彼らはそれがどちらの方法でもできると言います。彼らは、2 つのメソッドを明示的 (要素の ID で「for」を使用) および暗黙的 (要素をラベルに埋め込む) として説明しています。

明示的:

for 属性は、ラベルを別のコントロールに明示的に関連付けます。for 属性の値は、関連付けられたコントロール要素の id 属性の値と同じでなければなりません。

暗黙：

ラベルを別のコントロールに暗黙的に関連付けるには、コントロール要素が LABEL 要素のコンテンツ内にある必要があります。この場合、LABEL にはコントロール要素を 1 つだけ含めることができます。

于 2010-10-08T20:22:00.233 に答える
13

どちらも正しいですが、入力をラベル内に配置すると、CSSでスタイリングする際の柔軟性が大幅に低下します。

まず、a<label>に含めることができる要素が制限されています。たとえば、がの中にない場合は、とラベルテキストの<div>間にのみ置くことができます。<input><input><label>

次に、内側のラベルテキストをスパンでラップするなど、スタイリングを簡単にするための回避策がありますが、一部のスタイルは親要素から継承されるため、スタイリングがより複雑になる可能性があります。

サードパーティの編集

私の理解によると、ラベルのhtml 5.2仕様には、ラベル Content modelはであると記載されていPhrasing contentます。これは、コンテンツモデルがコンテンツを表現しているタグのみを意味します<label> are allowed inside </label>。

コンテンツモデル要素の子および子孫として含める必要のあるコンテンツの規範的な説明。

フレージングコンテンツとして分類されるほとんどの要素には、フローコンテンツではなく、フレージングコンテンツとして分類される要素のみを含めることができます。

于 2009-04-21T18:59:24.103 に答える
8

注目すべき「落とし穴」は、明示的な「for」属性を持つ<label>要素内に複数の入力要素を含めてはならないことを示しています。例：

<label for="child-input-1">
  <input type="radio" id="child-input-1"/>
  <span> Associate the following text with the selected radio button: </span>
  <input type="text" id="child-input-2"/>
</label>

これは、カスタムテキスト値がラジオボタンまたはチェックボックスの二次的なフォーム機能に魅力的かもしれませんが、label要素のクリックフォーカス機能は、IDが「for」属性で明示的に定義されている要素にすぐにフォーカスをスローします。 、ユーザーが含まれているテキストフィールドをクリックして値を入力することをほぼ不可能にします。

個人的には、入力の子を持つラベル要素を避けようとしています。ラベル要素がラベル自体よりも多くを包含することは意味的に不適切であるように思われます。特定の美学を実現するためにラベルに入力をネストする場合は、代わりにCSSを使用する必要があります。

于 2011-11-04T18:28:04.770 に答える
7

ほとんどの人が言っているように、どちらの方法も実際に機能しますが、最初の方法だけが機能すると思います。意味的に厳密であるため、ラベルは入力を「含みません」。私の意見では、マークアップ構造の包含 (親子) 関係は、ビジュアル出力の包含を反映する必要があります。つまり、マークアップで別の要素を囲む要素は、ブラウザでその要素の周りに描画する必要があります。これによると、ラベルは入力の親ではなく、兄弟である必要があります。したがって、オプション 2 は恣意的で紛らわしいものです。Zen of Pythonを読んだことがある人なら誰でも同意するでしょう (フラットは入れ子よりも優れており、スパースは密集よりも優れています。それを行う方法は 1 つ、できれば 1 つだけにする必要があります...)。

W3C や主要なブラウザー ベンダーからのそのような決定 (「正しい方法で行う」のではなく、「好きな方法で行う」ことを許可する) のおかげで、今日の Web は非常に混乱しており、私たち開発者は絡み合った問題に対処する必要があります。そして非常に多様なレガシーコード。

于 2014-09-03T14:28:50.283 に答える
5

私は通常、最初の2つのオプションを選択します。3番目のオプションが使用されたとき、ラベルとcssに埋め込まれたラジオの選択肢に次のようなものが含まれているときのシナリオを見てきました。

label input {
    vertical-align: bottom;
}

無線機の適切な垂直方向の位置合わせを確実にするため。

于 2011-08-11T12:58:13.600 に答える
4

<label>ID を生成する必要がないため、要素を my 内にラップすることを強く好みます。

私は Javascript 開発者であり、React または Angular を使用して、私や他の人が再利用できるコンポーネントを生成しています。その場合、ページ内でID を複製するのは簡単で、奇妙な動作につながります。

于 2016-11-21T08:30:43.123 に答える
2

WHATWG (フォームのユーザー インターフェイスの記述)を参照すると、入力フィールドをラベル内に配置することは間違いではありません。forの属性labelが不要になるため、コードを節約できます。

于 2014-01-07T09:32:36.730 に答える