라벨 요소 안에 입력 요소를 넣어야합니까?

라벨 요소 안에 입력 요소를 넣어야합니까?

---

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>

세 번째 기술은 한 셀에 레이블이 있고 다른 셀에 관련 양식 필드가있는 테이블이 레이아웃에 사용되는 경우에는 사용할 수 없습니다.

둘 중 하나가 유효합니다. 더 많은 스타일 제어를 제공하므로 첫 번째 또는 두 번째 예제를 사용하고 싶습니다.

---

나는 선호한다

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

내 생각에는 코드가 여전히 더 좋아 보인다.

---

레이블 태그에 입력 태그를 포함하면 'for'속성을 사용할 필요가 없습니다.

즉, 레이블에 입력 태그를 포함하고 싶지 않습니다. 왜냐하면 엔티티를 포함하지 않고 분리되어 있다고 생각하기 때문입니다.

---

동작 차이 : 레이블과 입력 사이의 공간 클릭

레이블과 입력 사이 의 공백을 클릭 하면 레이블에 입력이 포함 된 경우에만 입력이 활성화됩니다.

이 경우 공백은 레이블의 또 다른 문자이기 때문에 의미가 있습니다.

<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 checkbox v3.3 examples use the input inside: http://getbootstrap.com/css/#forms Might be wise to follow them. But they changed their minds in v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios so I don't know what is wise anymore:

Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our <input>s and <label>s are sibling elements as opposed to an <input> within a <label>. This is slightly more verbose as you must specify id and for attributes to relate the <input> and <label>.

UX question that discusses this point in detail: https://ux.stackexchange.com/questions/23552/should-the-space-between-the-checkbox-and-label-be-clickable

---

Personally I like to keep the label outside, like in your second example. That's why the FOR attribute is there. The reason being I'll often apply styles to the label, like a width, to get the form to look nice (shorthand below):

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

Makes it so I can avoid tables and all that junk in my forms.

---

See http://www.w3.org/TR/html401/interact/forms.html#h-17.9 for the W3 recommendations.

They say it can be done either way. They describe the two methods as explicit (using "for" with the element's id) and implicit (embedding the element in the label):

Explicit:

The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element.

Implicit:

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element.

---

Both are correct, but putting the input inside the label makes it much less flexible when styling with CSS.

First, a <label> is restricted in which elements it can contain. For example, you can only put a <div> between the <input> and the label text, if the <input> is not inside the <label>.

Second, while there are workarounds to make styling easier like wrapping the inner label text with a span, some styles will be in inherited from parent elements, which can make styling more complicated.

---

A notable 'gotcha' dictates that you should never include more than one input element inside of a <label> element with an explicit "for" attribute, e.g:

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

While this may be tempting for form features in which a custom text value is secondary to a radio button or checkbox, the click-focus functionality of the label element will immediately throw focus to the element whose id is explicitly defined in its 'for' attribute, making it nearly impossible for the user to click into the contained text field to enter a value.

Personally, I try to avoid label elements with input children. It seems semantically improper for a label element to encompass more than the label itself. If you're nesting inputs in labels in order to achieve a certain aesthetic, you should be using CSS instead.

---

As most people have said, both ways work indeed, but I think only the first one should. Being semantically strict, the label does not "contain" the input. In my opinion, containment (parent/child) relationship in the markup structure should reflect containment in the visual output. i.e., an element surrounding another one in the markup should be drawn around that one in the browser. According to this, the label should be the input's sibling, not it's parent. So option number two is arbitrary and confusing. Everyone that has read the Zen of Python will probably agree (Flat is better than nested, Sparse is better than dense, There should be one-- and preferably only one --obvious way to do it...).

Because of decisions like that from W3C and major browser vendors (allowing "whichever way you prefer to do it", instead of "do it the right way") is that the web is so messed up today and we developers have to deal with tangled and so diverse legacy code.

---

I usually go with the first two options. I've seen a scenario when the third option was used, when radio choices where embedded in labels and the css contained something like

label input {
    vertical-align: bottom;
}

in order to ensure proper vertical alignment for the radios.

---

Referring to the WHATWG (Writing a form's user interface) it is not wrong to put the input field inside the label. This saves you code because the for attribute from the label is no longer needed.

---

I greatly prefer to wrap elements inside my <label> because I don't have to generate the ids.

I am a Javascript developer, and React or Angular are used to generate components that can be reused by me or others. It would be then easy to duplicate an id in the page, leading there to strange behaviours.

참고URL : https://stackoverflow.com/questions/774054/should-i-put-input-elements-inside-a-label-element