HTML fieldset & legend
■ HTML의 form 태그 안에는 여러 가지 input type 형식의 요소들이 들어가서 그룹을 이루는 형태입니다. 보통 '입력란'이나 '버튼' 등이 들어가는데 이것들을 보기 좋게 묶어서 정렬해야 할 필요가 있는데요. "fieldset"과 "legend" 태그는 이런 요소들을 보기 좋게 묶어주는 역할을 합니다. 예를 들어 로그인 화면과 회원가입 화면이 같이 있는 페이지가 있다고 가정할 때 각각의 그룹을 fieldset 태그로 묶고, legend 태그를 이용해서 이름을 붙여주는 등 깔끔하게 정리할 수 있습니다.
fieldset 태그의 속성은 다음과 같은 것들이 있습니다.
1. name : 서버로 넘겨줄 이름 지정
2. form : 현재 fieldset태그가 속해 있는 form 태그의 이름을 표시
3. disabled : 자식 요소들을 사용할 수 없게 만드는 속성인데요. 화면에 입력란이나 선택 항목은 나타나지만, 보기만 할 수 있고, 선택 및 입력은 하지 못하는 상태가 됩니다.
■ 다음은 legend 태그를 알아보겠습니다.
fieldset 태그로 각 부분별로 묶어줬다면 그곳에 제목을 붙이는 역할을 하는데요. fieldset 태그의 필수 옵션은 아니지만, 사용하면 좀 더 깔끔하고 보기 좋은 form을 만들 수 있답니다. 글로 설명하니까 한계가 있네요. ^^; 예제를 만들어서 확인해보겠습니다.
▲ 예제의 내용은 form 태그 안에 두 개의 fieldset 태그를 넣었고요. 그 안에는 각각의 legend와 입력란, 버튼 등을 넣었습니다. 브라우저에서 출력해볼게요.
▲ fieldset과 legend 태그만 확인하기 위해서 메모장에 입력하고 CSS를 설정하지 않아서 조금 엉망이긴 한데, 이 예제에서 fieldset과 legend의 역할은 확인할 수 있겠죠?
이렇게 해서 HTML에서 form 태그를 만들 때 각 요소들을 그룹으로 묶어주는 역할을 하는 fieldset 태그와 그 영역에 이름을 붙여주는 legend 태그에 대해서 알아봤습니다. 수고하셨어요.
