중첩 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" />
|<----- 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>레이블과 상자 사이를 클릭 할 수 있다는 것은 다음과 같습니다.
- 클릭하기 쉬움
- 일이 시작되고 끝나는 곳이 덜 명확합니다.
부트 스트랩 체크 박스 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>
둘째, 내부 레이블 텍스트를 스팬으로 감싸는 것과 같이 스타일링을 쉽게 수행 할 수있는 해결 방법이 있지만 일부 스타일은 부모 요소에서 상속되므로 스타일링이 더 복잡해질 수 있습니다.