웹 폼의 구조화와 접근성을 높이는 HTML legend 태그

 LEGEND 태그란?

<legend>태그는 HTML 폼 그룹의 제목을 정의하는 태그입니다. 이렇게 얘기하면 어떤 의미인지 감이 잘 안오는데요. 예시 화면을 보면 바로 이해하실 수 있을 겁니다.

 

사용법

<form method="post" action="/submit">
  <fieldset>
    <legend> 개인정보 </legend>
    <label> .... </label>
    <input> ... </input>
  <fieldset>
  <fieldset>
    <legend> 배송정보 </legend>
    <label> .... </label>
    <input> ... </input>
  <fieldset>
</form>

• <legend>태그는 열고 닫아야 하는 태그입니다
• class나 id 외에 별다른 속성은 없습니다
• 폼 내에서 제목이 필요한 곳에 사용합니다
• 위치는 <form>과 <fieldset> 다음입니다

 

예시

See the Pen legend by 40's Programmer (@40sProgrammer) on CodePen.

legend의 역할이 바로 보입니다.

여러개의 폼들을 묶어서 제목을 보여주네요.