<label>태그는 폼 요소에 라벨을 붙여 폼을 꾸밀 수 있습니다.

첫 번째 방법은 <label>태그로 폼 태그를 감싸 주는 방법이고, 두 번째 방법은 for 속성을 이용한 방법이 있습니다.

<!-- 첫 번째 방법 -->
<label>
  <input type="text" value="[속성 값]">
</label>

<!-- 두 번째 방법 -->
<label for="[id 이름]">아이디</label>
<input type="text" id="[id 이름]" value="[속성 값]">

그림에서 알 수 있듯 for 속성과 id 속성은 폼 태그를 묶지 않을 때만 사용됩니다.

 <h1>일반적인 방법</h1>
 <label>아이디input type="text" value=""></label>
 <br/>

 <label>비밀번호<input type="text" value=""></label>
 <br/><br/>


 <h1>for 속성을 이용한 방법</h1>
 <label for="userid">아이디</label>
 <input type="text" id="userid" value="">
 <br/>

 <label for="userpw">비밀번호</label>
 <input type="text" id="userpw" value="">


radio 버튼이나 checkbox 버튼에도 사용됩니다.

 <h1>직업을 선택하세요.</h1>
 <label>
    <input type="radio" name="jop" value="it" checked>IT 종사자
 </label>
 <br/>

 <label>
    <input type="radio" name="jop" value="bnk">은행원
 </label>
 <br/>

 <label>
   <input type="radio" name="jop" value="backsu">백수
 </label>

0 댓글