폼태그에서 그룹화하는 fieldset 태그

웹사이트에는 다양한 정보를 한께번에 전달하기 위해 수 많은 입력폼이 존재할 수 있다. 예를 들어 회원가입 페이지만 하더라도 개인정보 및 동의 등등 입력해야하는 필드 수만 상당하다. 이런 경우 만약 이 폼들을 그룹화한다면 더욱 편리하게 관리할 수 있을 것이다. 이에 html에는 fieldset이라는 태그가 존재하며 이 태그를 사용할 경우 다수의 입력폼들을 그룹화하여 관리 및 콘트롤할 수 있다. 그럼 아래에서 좀 더 자세한 내용을 확인해보자.

! fieldset 태그 알아보기

fieldset 태그는 아래와 같은 몇 개의 속성들을 지정하여 사용할 수 있으며 각각의 속성들의 특징은 다음과 같다. 아래처럼 이 태그에 사용가능한 태그는 매우 한정적이다.

disabled - 해당하는 그룹을 모두 disable 할 수 있음
form - 원하는 form을 선택할 수 있음
name - 원하는 name 속성을 선택할 수 있음

이 태그의 가장 큰 장점 중 하나로 퀀한에 따른 선택 그룹 전체를 비활성화(Disable) 처리가 가능하다는 점을 들 수 있다. 예를 들어 권한이 없는 사용자에게 입력폼의 수정을 금지하게 만들 경우 간단하게 fieldset의 disabled 속성 추가만으로 이를 해결할 수 있다. 이는 큰 장점인데 만약 이를 하나하나 해야할 경우 모든 입력 태그마다 비활성화 코드가 들어가야할 것이다. 하지만 간단하게 이를 모두 제어할 수 있다. 쉽게 아래의 예를 참고하자. 아래는 회원정보를 수정하기 위한 기본 양식이다.

! fieldset 예제소스 보기

아래 태그는 일반적인 회원정보 수정 페이지이다. 권한이 없는 경우에는 모든 입력폼의 비활성화가 필요하다. 즉 disabled 속성을 가져야할 것이다. 이를 코드로 나타낸다면...


이 코드가 만약 fieldset을 사용한다면 아래와 같이 사용하여 나타낼 수 있다. 아래 코드는 


만약 맨 처음의 코드라인이 가지고 있는 입력폼이 100개였다면 우리는 100개의 코드 모두에 disabled 속성을 적용하였을 것이다. 물론 스크립트를 사용해 루프를 돌릴 수도 있겠지만 이 역시 리소스에 조금이라도 부담을 주는 방법일 수 있다. 이처럼 fieldset 태그를 사용하면 간편한 그룹화를 통해 입력폼을 더욱 쉽게 관리하는 일이 가능해진다. 아래는 이를 사용한 실제 코드가 적용된 모습이다. 

* fieldset을 사용한 실제 예제모습

성별  
취미  
나이  

위 입력폼을 클릭해보자. 아무런 반응도 없을 것이다. fieldset으로 그룹화한 후 disabled 속성을 사용하였기 때문이다. 이처럼 그룹화하여 사용하면 코드를 간결화할 수 있고 유지보수가 간편해진다.

# 참고사항

참고로 위처럼 fieldset을 적용하면 field 태그가 가지는 기본 스타일인 border 속성이 적용되게 된다. 만약 이를 사용하지 않을 경우 페이지의 기본 스타일 css에 미리 fieldset에 대하여 지정해 두는 것도 하나의 방법이다.