입력 요소를 레이블 요소 안에 넣어야합니까?

중첩 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로 스타일을 지정하는 것이 더 쉽다고 생각합니다.

그러나 그것은 내가 생각하는 맛의 문제입니다.

더 많은 스타일 옵션이 필요한 경우 스팬 태그를 추가하십시오.

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

레이블과 상자 사이를 클릭 할 수 있다는 것은 다음과 같습니다.

• 클릭하기 쉬움
• 일이 시작되고 끝나는 곳이 덜 명확합니다.

부트 스트랩 체크 박스 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>a 와 반대로 형제 요소 <label>입니다. 이것은 약간 더 당신이 ID를 지정해야합니다으로 자세한 정보와 속성이 연관 할 것입니다 <input>및 <label>.

이 점을 자세하게 설명하는 UX 질문 : /ux/23552/should-the-space-between-the-checkbox-and-label-be-clickable

개인적으로 나는 두 번째 예에서와 같이 라벨을 외부에 보관하고 싶습니다. 이것이 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 를 참조 하십시오 .

그들은 어느 쪽이든 할 수 있다고 말합니다. 두 가지 방법을 명시 적 (요소 ID와 함께 "for"사용) 및 암시 적 (레이블에 요소 포함)으로 설명합니다.

명백한:

for 속성은 레이블을 다른 제어와 명시 적으로 연관시킵니다. for 속성의 값은 연관된 제어 요소의 id 속성 값과 같아야합니다.

절대적인:

레이블을 다른 제어와 내재적으로 연관 시키려면 제어 요소가 LABEL 요소의 컨텐츠 내에 있어야합니다. 이 경우 LABEL에는 하나의 제어 요소 만 포함될 수 있습니다.

둘 다 맞지만 레이블에 입력을 넣으면 CSS로 스타일을 지정할 때 유연성이 떨어집니다.

먼저 a <label>는 포함 할 수있는 요소가 제한됩니다 . 예를 들어 및 안에 레이블 텍스트 가없는 경우에만 레이블 텍스트와 <div>사이 <input>에 레이블을 넣을 수 있습니다 .<input><label>

둘째, 내부 레이블 텍스트를 스팬으로 감싸는 것과 같이 스타일링을 쉽게 수행 할 수있는 해결 방법이 있지만 일부 스타일은 부모 요소에서 상속되므로 스타일링이 더 복잡해질 수 있습니다.

주목할만한 'gotcha'는 명시적인 "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>

사용자 정의 텍스트 값이 단일 선택 단추 또는 선택란에 부차적 인 양식 기능에 유혹적 일 수 있지만 레이블 요소의 클릭 초점 기능은 'for'속성에 ID가 명시 적으로 정의 된 요소에 즉시 초점을 던집니다. 포함 된 텍스트 필드를 클릭하여 값을 입력하는 것은 거의 불가능합니다.

개인적으로 입력 하위 요소가있는 레이블 요소를 피하려고합니다. 레이블 요소가 레이블 자체보다 많은 것을 포함하는 것은 의미 상 부적절한 것으로 보입니다. 특정 미학을 달성하기 위해 레이블에 입력을 중첩하는 경우 대신 CSS를 사용해야합니다.

대부분의 사람들이 말했듯이, 두 가지 방법 모두 실제로 작동하지만 첫 번째 방법 만 생각합니다. 의미 상 엄격하기 때문에 레이블에는 입력이 "포함되지 않습니다". 제 생각에는 격리 (부모 / 자식) 관계 는, 마크 업 구조에서의 는 시각적 결과의 봉쇄 를 반영해야한다 . 즉, 마크 업에서 다른 것을 둘러싼 요소 는 브라우저에서 그 주위에 그려 져야 합니다 . 이에 따르면, 레이블은 부모가 아닌 입력의 형제 여야합니다. 옵션 2는 임의적이며 혼란 스럽습니다. 파이썬 의 선 (Zen of Python) 을 읽은 사람이라면 아마 동의 할 것입니다.

W3C와 주요 브라우저 공급 업체의 결정 ( "올바른 방법"대신 "어느 쪽을 선호하든"허용)은 오늘날 웹이 너무 엉망이되어 개발자가 엉 키게해야한다는 것입니다 매우 다양한 레거시 코드입니다.

나는 보통 처음 두 가지 옵션을 사용합니다. 레이블과 CSS에 포함 된 라디오 선택 항목이 다음과 같은 것을 포함했을 때 세 번째 옵션이 사용 된 시나리오를 보았습니다.

label input {
    vertical-align: bottom;
}

무전기의 올바른 수직 정렬을 보장합니다.

WHATWG ( 양식의 사용자 인터페이스 작성)를 참조 하면 입력 필드를 레이블 안에 넣는 것은 잘못이 아닙니다. 의 for속성 label이 더 이상 필요하지 않기 때문에 코드가 절약 됩니다.

<label>ID를 생성 할 필요가 없기 때문에 요소를 감싸는 것을 선호합니다 .

저는 Javascript 개발자이며 React 또는 Angular는 나와 다른 사람이 재사용 할 수있는 구성 요소를 생성하는 데 사용됩니다. 그러면 페이지에서 ID를 복제하는 것이 쉬워 이상한 행동이 발생합니다.

고려해야 할 사항 중 하나는 자바 스크립트와 확인란 및 라디오 입력의 상호 작용입니다.

아래 구조 사용하기 :

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

사용자가 "라벨 텍스트"를 클릭하면 controlCheckbox () 함수가 한 번 실행됩니다.

그러나 입력 태그를 클릭하면 일부 구형 브라우저에서 controlCheckbox () 함수가 두 번 실행될 수 있습니다. 입력 및 레이블 태그 모두 확인란에 연결된 클릭 이벤트를 트리거하기 때문입니다.

그런 다음 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 파일 탐색기 속성의 바이트