[HTML] fieldset & legend

: 오늘은 form 태그 내에서 또다른 범주를 지정해줄 수 있는 fieldset과 legend에 대해서 알아보고자 한다.

• fieldset이란 ? :
  • form 태그 내에서 요소들의 그룹화를 위해 사용하여 legend 태그를 같이 써주면서 그 그룹에 대한 정의를 해줄 수 있다.
  • block content(블록 요소)
• legend란? :
  • fieldset 자식요소로, 반드시 fieldset 태그의 첫번째 자식요소로 써야한다(쓰려고 했을 때).
  • fieldset으로 그룹화한 그룹에 대한 그룹명, 설명 등을 설정해주는 역할을 한다.
  • block content(블록 요소), display: inline을 해줘도 block요소처럼 동작함.
• fieldset의 경우 구글크롬(위의 예시)에서는 저런 형태로 출력되지만, 브라우저마다 다르기 때문에 해당 디자인을 위해 fieldset 및 legend 태그를 사용하기보다는 의미론적으로 그룹화할 때 써야한다.
• fieldset의 장점은 fieldset으로 그룹화한 부분의 input들을 한번에 컨트롤 할 수 있다는 것이다. 예를 들어, fieldset 태그의 속성으로 disabled를 주면, 해당 필드셋에 있는 모든 input에 disabled가 한번에 적용된다.