HTML - 폼 태그 label, fieldset, legend

닌니디자인 HTML 썸네일

label 태그

폼 요소 <input>, <textarea>, <select> 등에 대한 설명이나 이름을 제공하기도 하고 해당 요소를 클릭 할 수 있도록 한다. for 속성을 사용하여 연결된 요소의 id를 지정하면 스크린 리더 사용자나 키보드 사용자에게 요소와의 관계를 명확히 전달할 수 있다. <label>태그 내부에 폼 요소를 포함시켜 사용 할 수도 있다. <input type="radio">버튼이나 <input type="checkbox">버튼을 사용할 때 단순히 버튼 영역에서만 작동 되는것이 아니라 <label>태그에 포함된 영역에서 함께 작동된다. <label>태그는 폼 요소의 목적을 보다 명확하게 이해할 수 있도록 도와주기 때문에 접근성 향상에 도움이 된다.

 

예시

<label>태그 내부에 폼 요소 포함

<label>
  이름:
  <input type="text" name="name">
</label>

 

 

 

<label>태그에 for 속성 사용

<label for="name">이름:</label>
<input type="text" id="name" name="name">

 

 

 

 

 

---

 

fieldset 태그 + legend 태그

폼에서 입력 요소들을 그룹으로 묶을때 사용되는 태그이다. 여러 입력 요소들을 논리적으로 그룹화하여 시각적으로 구분짓고 스타일을 적용 할 수 있다. <legend>태그와 함께 사용되며 그룹화된 폼 요소의 제목을 제공하여 폼의 가독성과 접근성을 향상시킨다. <fieldset>태그의 주요 속성은 'disabled' 속성으로 <fieldset>태그 내부의 모든 폼 요소를 비활성화 한다. <fieldset>태그 <legend>태그를 적절히 사용하면, 스크린 리더 사용자와 같은 접근성 요구를 가진 사용자가 폼을 보다 쉽게 이해하고 탐색할 수 있다. 

 

예시

<fieldset>
  <legend>개인 정보</legend>
  <label for="name">이름:</label>
  <input type="text" id="name" name="name"><br><br>
 
  <label for="age">나이:</label>
  <input type="number" id="age" name="age"><br><br>
 
  <fieldset>
    <legend>연락처 정보</legend>
    <label for="phone">전화번호:</label>
    <input type="tel" id="phone" name="phone"><br><br>
 
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email">
  </fieldset>
</fieldset>

 

 

 

 

 

---

 

참고사이트

W3Schools.com