html - php label 태그

방법 1 : 레이블 태그 감싸기

label 태그 안에 체크 박스를 넣습니다.

<label><input type="checkbox" name="checkbox" value="value">Text</label>

방법 2 : 특성 사용

for 속성을 사용하십시오 (체크 박스 id 와 일치).

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

참고 : ID는 페이지에서 고유해야합니다!

설명

다른 대답에는 언급되지 않았으므로 레이블에는 최대 1 개의 입력을 포함 할 수 있으며 for 속성은 생략 할 수 있으며 그 안에 입력 용으로 간주됩니다.

w3.org 발췌 (저의 강조하에) :

[for 속성]은 정의 된 레이블을 다른 컨트롤과 명시 적으로 연관시킵니다. 이 속성이있는 경우이 속성의 값은 동일한 문서의 다른 컨트롤의 id 속성 값과 동일해야합니다. 부재 할 때 정의되는 레이블은 요소의 내용과 연관됩니다.

암시 적으로 다른 컨트롤과 레이블을 연결하려면 컨트롤 요소가 LABEL 요소의 내용 내에 있어야합니다 . 이 경우 LABEL은 하나의 제어 요소 만 포함 할 수 있습니다. 레이블 자체는 관련 컨트롤 앞이나 뒤에 배치 할 수 있습니다.

이 방법을 사용하면 다음과 같은 이점이 for .

• 모든 확인란에 id 를 할당 할 필요가 없습니다 (대단해요!).

• <label> 에 여분의 속성을 사용할 필요가 없습니다.

• 입력의 클릭 가능 영역은 레이블의 클릭 가능 영역이기 때문에 확인란을 제어 할 수있는 두 개의 별도의 장소가 없습니다. <input> 및 실제 레이블 텍스트가 얼마나 멀리 떨어져 있더라도 상관없이 하나만 가능합니다. CSS를 적용 할 수 있습니다.

일부 CSS가 포함 된 데모 :

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

그것은 또한 작동합니다 :

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>

레이블이 입력과 연결되어 있는지 확인하십시오.

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

이것을 사용하십시오

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});

label 요소와 for 속성을 사용하여 확인란과 연결합니다.

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />

<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />