input要素をlabel要素内に配置する必要がありますか？

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

古典的な方法：

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

または

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

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

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

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

どちらかが有効です。私は最初の例か2番目の例のどちらかを使用するのが好きです。それはあなたがより多くのスタイルコントロールを提供するからです。

私は好む

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

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

labelタグにinputタグを含める場合、 'for'属性を使用する必要はありません。

とは言っても、エンティティーを含んでいない独立していると思うので、ラベルにinputタグを含めたくありません。

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

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

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

<p>Inside:</p>

<label>
  <input type="checkbox" />
  |&lt;----- Label. Click between me and the checkbox.
</label>

<p>Outside:</p>

<input type="checkbox" id="check" />
<label for="check">|&lt;----- Label. Click between me and the checkbox.</label>

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

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

ブートストラップチェックボックスV3.3の例では、入力の内部を使用します。http://getbootstrap.com/css/#formsは、それらに従うことが賢明であるかもしれません。しかし、彼らはv4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radiosで考えを変えたので、私はもう何が賢明かわかりません：

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

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

個人的には、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" />

テーブルとフォーム内のすべてのジャンクを回避できるようにします。

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

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

明示的：

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

暗黙：

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

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

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

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

注目すべき 'gotcha'は、明示的な "for"属性を持つ<label>要素内に複数のinput要素を含めてはならないことを示しています。例：

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

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

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

ほとんどの人が言ったように、実際には両方の方法が機能しますが、私は最初の方法だけがすべきだと思います。意味的に厳密であるため、ラベルは入力を「含まない」。私の意見では、マークアップ構造の包含関係（親/子）は、ビジュアル出力の包含関係を反映する必要があります。つまり、マークアップで別の要素を囲む要素は、ブラウザでその要素の周りに描画する必要があります。これによると、ラベルは親ではなく入力の兄弟である必要があります。したがって、オプション番号2は恣意的で混乱を招きます。Zen of Pythonを読んだことのある人ならだれでもおそらく同意するでしょう（Flatは入れ子よりも優れており、SparseはDensityよりも優れています。それを行うための明白な方法は1つ、できれば1つだけあるはずです...）。

W3Cや主要なブラウザーベンダー（「正しい方法で実行する」ではなく「どちらを実行したい場合でも」を許可すること）がそのような決定を下したため、今日のWebはめちゃくちゃになり、開発者は混乱に対処する必要がありますそしてとても多様なレガシーコード。

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

label input {
    vertical-align: bottom;
}

無線機の適切な垂直配置を確保するため。

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

<label>IDを生成する必要がないので、要素を自分の内部でラップすることを非常に好みます。

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

考慮する必要がある1つのことは、チェックボックスとラジオ入力とJavaScriptの相互作用です。

以下の構造を使用：

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

ユーザーが「ラベルテキスト」をクリックすると、controlCheckbox（）関数が1回起動されます。

しかし、入力タグがクリックされると、一部の古いブラウザではcontrolCheckbox（）関数が2回起動される場合があります。これは、入力タグとラベルタグの両方がチェックボックスに添付されたonclickイベントをトリガーするためです。

次に、checkboxStateにいくつかのバグがある可能性があります。

最近、IE11でこの問題に遭遇しました。最近のブラウザでこの構造に問題があるかどうかはわかりません。

input内部に配置する主な利点label、人間のタイピング効率とコンピュータのバイトストレージです。

@ZnarkusはOPへの彼のコメントで言った、

パッティングの大きな長所の一つ<input />内側<label>、あなたは省略することができるということですforとid：<label>My text <input /></label>あなたの例では。とてもいい！

注：@Znarknusコードには、コメントに明記されていない別の効率が含まれていました。type="text"省略することもできinput、デフォルトでテキストボックスがレンダリングされます。

キーストロークとバイトの並べて比較[1]。

31キーストローク、31バイト

<label>My Text<input /></label>

58キーストローク、58バイト

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

それ以外の場合、スニペットは視覚的に同等であり、同じレベルのユーザーアクセシビリティを提供します。ユーザーはラベルをクリックまたはタップして、カーソルをテキストボックスに置くことができます。

[1] Windowsのメモ帳で作成されたテキストファイル（.txt）、Windowsファイルエクスプローラーのプロパティからのバイト数