문제
Checkboxes
에 HTML
양식이 있지 않는 암시적 레이블 그들과 함께.추가 명시적이블(텍스트)다음을지 전환 checkbox
.
어떻게 확인란에서 전환 텍스트를 클릭 레이블을까?
해결책
설정 CSS display
속성에 대한 라벨 블록 요소를 사용하는 대신 귀하의 div 유지는 의미의 라벨을 허용하고 있는 동안 어떤 스타일이다.
예를 들어:
label {
width: 100px;
height: 100px;
display: block;
background-color: #e0e0ff;
}
<label for="test">
A ticky box! <input type="checkbox" id="test" />
</label>
다른 팁
당신이 올바르게 마크업의 HTML 코드가 필요 없 javascript.다음 코드는 것을 허용할 사용자를 클릭 레이블 텍스트를 확인란을 선택.
<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />
이 대 특성에 라벨 요소에 대한 링크 id 특성에 입력된 요소와 브라우저가 나머지는 않습니다.
이 테스트에서 일하기:
- IE6
- IE7
- Firefox
으로 표시@Gatekiller 고,다른 사람이 올바른 솔루션은 <label> 태그가 있습니다.
클릭-in-the-텍스트가 좋은,그러나 또 다른 이유가 있을 사용할 <label> 태그:접근성이다.는 도구 시각장애인들에 액세스하는 데 사용하는 웹사이 필요합 <label>s 을 읽어의 의미를 체크 박스 및 라디오 버튼이 있습니다.없 <label>s,그들은 그들을 기반으로 추측에서 주변의 텍스트,그리고 그들은 종종 그것은 잘못된 또는 포기해야합니다.
그것은 매우 좌절에 직면하게 될 것으로 읽는 양식 "를 선택하십시오 당신의 배송 방법,라디오-button1,라디오-button2,라디오-button3".
참고하는 웹 접근성은 복잡한 주제;<label>s 에 필요한 단계이지만 그것만으로는 충분하지 않습을 보장 접근성 또는 규정 준수와 정부 규정 이 적용됩니다.
니
당신이 원을 둘러싸이블 텍스트 및 체크 박스 내부에는 래퍼 요소,다음 작업을 수행할 수 있습니다:
<label for="surname">
Surname
<input type="checkbox" name="surname" id="surname" />
</label>
할 수 있는 포장의 확인란에서 레이블:
<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
<input type="checkbox" name="surname">
</label>
이동:
<script>
function checkbox () {
var check = document.getElementById("myCheck").checked;
var box = document.getElementById("myCheck")
if (check == true) {
box.checked = false;
}
else if (check == false) {
box.checked = true;
}
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>
지 않는 경우,pleae 기다!
포장 레이블이 아직도 허용하지 않 클릭하면'어디에서든 상자에서'아직도 그냥에 텍스트입니다!이는 작업에 대한 저:
<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>
그러나 불행하게도 많이 있는 자바 스크립트를 효과적으로 전환다.