development

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

big-blog 2020. 6. 30. 07:59
반응형

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


라디오 버튼에서 "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>

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

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


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

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

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


구조는 유효하고 액세스 가능하지만 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;}

(첫째을 설명했다 다른 답변 읽어 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>

참고 URL : https://stackoverflow.com/questions/1527721/using-label-for-on-radio-buttons

반응형