html 태그 <label> 태그와 속성

label 태그 :

요소의 제목 / 타이틀 처럼 이름표를 나타내기도 하고,
input 태그 및 여러 컨트롤 요소들을 label로 감싸 함께 사용하며, 접근성을 높이며, 가독성을 높이는 역할도 합니다. 

 

아래 컨트롤 요소들과 함께 사용할 수 있습니다.

<input>
<textarea>
<select>
<meter>
<progress>
<output>

label의 속성

for : 함께 사용 될 input 등의 태그에서 사용하는 id값을 label의 for 값에 넣어주어 두 태그의 상관관계를 나타냅니다.
form: form 태그를 사용하고, 디자인적이든 어떤이유로든 해당 form 밖에서 label을 사용 시 form 속성을 사용하여 관계를 명시하여주고, 접근성을 향상 시켜줍니다.

 

<h3>회원가입 약관</h3>
  <form action="/action-register" id="form">
    
      <input type="checkbox" id="required" name="terms" value="필수약관">
      <label for="required">필수약관</label><br>
    
      <input type="checkbox" id="optiona" name="terms" value="선택약관">
      <label for="optiona">선택약관</label><br><br>
  
      <input type="checkbox" id="agreeAll" name="terms" value="all" >
      <label for="agreeAll">전체 동의</label><br>
      <input type="submit" value="Submit">
  
    </form>
    
    <label form="form" for="required">필수 약관만 동의</label><br>
    <label form="form" for="optiona">선택 약관만 동의</label><br>

label 태그가 form 태그 밖에 있지만 form 속성을 사용해 form 태그와 연결하여 사용해 주었습니다.