라디오 버튼에서 "라벨"사용


136

라디오 버튼에서 "label for"매개 변수를 사용할 때 508을 준수하는 *는 다음과 같은 것입니까?

 <label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label> 

아니면 이것입니까?

 <input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>

내가 묻는 이유는 두 번째 예에서 "라벨"은 텍스트 만 포함하고 실제 라디오 버튼은 포함하지 않기 때문입니다.

* 1973 년 재활법 제 508 조는 연방 기관이 장애인에게 소프트웨어 및 웹 사이트 접근성을 제공하도록 요구합니다.

답변:


216

당신은 거의 그것을 얻었다. 이것이어야합니다 :

<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>

의 값 for은 라벨을 붙일 요소의 ID 여야합니다.


4
물론 대답은 사실이지만 Martha는 정답입니다. Martha 예제는 모두 완벽하게 유효한 HTML5입니다. 예를 들어 전체를 프레임에 넣고 싶다면 CSS를 사용하여 두 번째 스타일을 지정하는 것이 더 쉽습니다. 레이블을 다른 곳에 두려면 먼저 레이블을 지정하십시오. 그러나 둘 다 괜찮습니다. 친애하는!
Jacek Kowalewski

5
흠 .. 두 개의 라디오 버튼 사이에서 하나의 레이블을 어떻게 전환합니까? 동일한 ID를 가질 수 없습니다 ... : /
Nils Sens

1
@NilsSens 각 라디오 및 레이블 쌍에는 고유 ID가 있어야합니다. 절대 ID를 공유해서는 안됩니다
Daniel Waters

@NilsSens 2 개의 라디오 버튼 사이를 토글하고 1 개의 레이블 만 있습니까? 확인란을 대신 사용하는 것이 분명합니다. D
T_D

아, 내가 의미하는 것은 라디오 버튼을 토글하는 수퍼 레이블이 아닙니다. 좋아하는 카테고리 : 좋아하는 과일 카테고리를 선택하고 해당 항목을 클릭하면 idk "banana"와 "strawberry"사이를 토글하기 때문에 옵션을 토글 할 때 마우스 움직임을 UX로 적용해야합니다. 오늘은 JS를 사용하여 코드를 직접 작성했지만 CSS 만있는 방법이 있는지 아는 것이 흥미로울 것입니다. :
Nils Sens

86

구조는 유효하고 액세스 가능하지만 for속성은 id입력 요소와 동일해야합니다 .

<input type="radio" ... id="r1" /><label for="r1">button text</label>

또는

<label for="r1"><input type="radio" ... id="r1" />button text</label>

for속성은 두 번째 버전 (입력을 포함하는 레이블)에서 선택 사항이지만 IIRC에는 레이블 텍스트를 포함시키지 않으면 클릭 할 수없는 이전 브라우저가있었습니다. 첫 번째 버전 (입력 후 레이블)은 인접한 형제 선택기를 사용하여 CSS로 스타일을 지정하는 것이 더 쉽습니다 +.

input[type="radio"]:checked+label {font-weight:bold;}

9
두 번째 예에서는 "for"특성이 필요하지는 않지만 사실입니다.
Ishmael

4
'for'속성을 사용한 경우에만 버튼 텍스트를 "클릭 가능"하게 만드는 브라우저 버전이 있다고 생각합니다. 즉, 레이블 안에 입력 줄 바꿈이 충분하지 않습니다.
Martha

@Martha-어떤 브라우저를 알고 있습니까?
커클랜드

2
@Kirkland-w3.org/TR/ html401/ interact/ forms.html #h- 17.9 는 두 번째 양식이 유효 함을 나타내는 것으로 보이지만 여러 출처에서 지원이 보편적이지 않을 수 있음을 나타냅니다. for어쨌든 속성 을 제공하는 것이 가장 좋습니다 .
Ishmael

1
@RalphDavidAbernathy 예, 확인란에도 동일한 규칙이 적용됩니다.
Ishmael

0

(첫째을 설명했다 다른 답변 읽어 for<label></label>잘. 태그, 두 정상의 답변은 정확하지만, 나의 도전, 당신이 여러 라디오 박스가있을 때, 당신이 그 (것)들을 위해 선택해야했다 일반적인 이름을 같이 name="r1" 하지만 서로 다른 ID를 가진 id="r1_1" ... id="r1_2"

따라서이 방법은 더 명확하고 이름과 ID 간의 충돌을 제거합니다.

라디오 상자의 다른 옵션에 대해 다른 ID가 필요합니다.

<input type="radio" name="r1" id="r1_1" />

       <label for="r1_1">button text one</label>
       <br/>
       <input type="radio" name="r1" id="r1_2" />

       <label for="r1_2">button text two</label>
       <br/>
       <input type="radio" name="r1" id="r1_3" />

       <label for="r1_3">button text three</label>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.