오늘은 폼에서 쓰이는 라벨(label) 태그에 대해서 알아보겠습니다.
라벨(label) 태그란?
라벨 태그는 ui요소에 텍스트를 결합할때 사용합니다.
왜 굳이 라벨태그를 사용하는지를 물어본다면, label 태그는 다른 ui들과 결합해서 사용할 수 있기 때문입니다.
label 태그의 속성
- for
span 태그나 p 태그를 사용하지 않는 이유는 label 태그의 for 속성 때문입니다.
for 속성을 사용하여 같은 id 속성을 가진 ui에 상호작용을 할 수 있습니다. - form
여러개의 form에 동일한 id가 존재할때 사용합니다.
form 속성값과 일치하는 id를 가진 form을 참조할 수 있습니다.
form 과 for를 같이 사용하여 해당 id의 form 중 해당 id를 가진 ui에 상호작용 할 수 있습니다.
<body>
<form>
<input type="radio" id="option1" name="group1"/>
<label for="option1"> 옵션 1 </label>
<input type="radio" id="option2" name="group1"/>
<label for="option2"> 옵션 2 </label>
<input type="radio" id="option3" name="group1"/>
<label for="option3"> 옵션 3 </label>
<input type="radio" id="option4" name="group1"/>
<label for="option4"> 옵션 4 </label>
<input type="radio" id="option5" name="group1"/>
<span for="option5"> 옵션 5(span 태그) </span>
</form>
</body>예시 코드입니다.
label 과의 차이점을 알아보기 위해 마지막에 span 태그를 사용해보았습니다.
위의 결과를 눌러보면 label 태그로 구성된 옵션 4까지는 텍스트와 ui간 상호작용이 되지만,
span 태그로 된 옵션 5는 라디오 버튼을 눌러야만 상호작용이 됩니다.
이러한 차이가 사용자 경험에 영향을 미치기 때문에, label 태그를 사용하게 됩니다.
반면, for를 사용하지 않고 이러한 상호작용을 할 수 있는 방법이 있는데,
바로 label 태그 내에 ui를 집어넣는 경우입니다.
<body>
<form>
<label>
<input type="radio" id="option1" name="group1"/> 옵션 1
</label>
<label>
<input type="radio" id="option2" name="group1"/> 옵션 2
</label>
<label>
<input type="radio" id="option1" name="group1"/> 옵션 3
</label>
<label >
<input type="radio" id="option1" name="group1"/> 옵션 4
</label>
<label>
<input type="radio" id="option1" name="group1"/> 옵션 5
</label>
</form>
</body>위의 코드를 방법만 바꾼 예시입니다.
그 외의 차이점은 이전의 span태그를 label로 바꾼것 외에는 없습니다.
실행결과를 보시면 for를 사용한것과 동일한 결과임을 확인할 수 있습니다.
이와같이 다른 방법을 사용하여 label을 선언할 수도 있습니다.
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| 화면구성하기 : 폼(form) - checkbox와 radio group (0) | 2024.11.05 |
|---|---|
| 화면 구성하기 : 폼(form) - input과 button (0) | 2024.10.31 |
| 화면 구성하기 - 박스모델의 구조 (0) | 2024.10.21 |
| 화면 구성하기 - grid 의 정렬 : content와 items (0) | 2024.10.18 |
| 화면구성하기 - grid template : rows,columns,areas (0) | 2024.10.16 |
