web-dev-qa-db-ja.com

label要素の中にinput要素を入れるべきですか？

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

古典的な方法：

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

または

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>
htmlhtml5semantics
533
lucian.jp

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>

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

どちらかが有効です。最初の例か2番目の例のどちらかを使用するのが好きです。よりスタイルを制御できるからです。

482
superUntitled

私は好きです

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

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

56
Znarkus

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

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

37
Terry

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

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

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

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

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

  • クリックしやすい
  • 物事がどこから始まり、どこで終わるのかがわかりにくい

Bootstrapチェックボックスv3.3の例では、内部の入力を使用します： http://getbootstrap.com/css/#forms しかし、彼らはv4.0 で心を変えましたhttps://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios もう：

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

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

35
Ciro Santilli 新疆改造中心996ICU六四事件

あなたの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" />

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

15
Parrots

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

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

明白なもの：

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

暗黙：

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

14
user470514

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

まず、 <label>には、どの要素を含めることができるか に制限があります。たとえば、<div>が<input>の内側にない場合は、<input>とラベルテキストの間にのみ<label>を入れることができます。

次に、内側のラベルテキストをスパンで折り返すなど、スタイル設定を簡単にするための回避策がありますが、一部のスタイルは親要素から継承されるため、スタイル設定が複雑になる場合があります。

10
nicholaides

注目すべき '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>

カスタムテキスト値がラジオボタンやチェックボックスに次ぐフォーム機能には魅力的かもしれませんが、label要素のclick-focus機能は即座に 'for'属性でidが明示的に定義されている要素にフォーカスを投げます。ユーザが値を入力するために含まれているテキストフィールドをクリックすることはほとんど不可能になります。

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

6
Aaron

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

label input {
    vertical-align: bottom;
}

無線用に適切な垂直方向の配置を確保するため。

4
Victor Ionescu

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

W3Cや主要なブラウザベンダによる決定のため（「正しい方法ではなく」「どちらでもよい方法で」許可する）、今日のWebはめちゃくちゃになっているため、開発者がもつれる問題に対処する必要があります。そして非常に多様なレガシーコード。

4
slashCoder

WHATWG（ フォームのユーザーインターフェースを書く ）を参照することは間違っていません。ラベル内の入力フィールドforからのlabel属性はもう必要ないので、これはコードを節約します。

1
Benny Neugebauer

私はidを生成する必要がないので、私は<label>の中に要素をラップすることを大いに好みます。

私はJavascript開発者です、そしてReactまたはAngularは私または他の人が再利用できるコンポーネントを生成するために使用されます。その場合、というページでidを複製するのは簡単でしょう。

1
Nicolas Zozol