legend 태그

legend 태그는 fieldset 태그를 사용하여 만든 HTML 폼의 필드 그룹화 위에 캡션을 지정합니다.

legend 태그에 포지셔닝을 위한 CSS 스타일(float, position 등)을 지정하면, 그 내용이 테두리에서 벗어나 지정된 위치로 이동합니다(이때 테두리의 단절은 더 이상 발생하지 않습니다).

예제

두 개의 fieldset 태그를 사용하여 폼을 두 개의 논리적 블록으로 나누고, legend 태그를 사용하여 블록에 캡션을 달아봅시다:

html<form>
  <fieldset>
    <legend>구매자 정보</legend>
    <input type="text">
  </fieldset>
  <fieldset>
    <legend>판매자 정보</legend>
    <input type="text">
  </fieldset>
</form>

Результат:

참고

  • 폼 필드의 캡션을 지정하는 label 태그