반응형
웹사이트에는 다양한 정보를 전달하기 위한 수 많은 입력 폼이 존재합니다.
예를들어 회원가입 페이지만 해도 사용자의 다양한 정보를 입력해야 하는데요,
이러한 정보를 그룹화 한다면 더욱 편리하게 관리 할 수 있습니다.
이에 html에는 fieldset이라는 태그가 존재하고, 이 태그를 사용할 경우 다수의 입력 폼들을 그룹화하여 관리 및 컨트롤 할 수 있습니다.
fieldset 태그란?
fieldset 태그는 몇가지 속성을 지정하여 사용할 수 있는데 각각의 속성의 특징은 다음과 같습니다.
아래처럼 이 태그에 사용 가능한 태그는 무척 한정적입니다.
이 태그의 가장 큰 장점중 하나로 권한에 따른 선택 그룹 전체르 비활성화 처리가 가능하다는 점을 들 수 있습니다.
예를 들어 권한이 없는 사용자에게 입력폼의 수정을 금지하게 할 경우 간단하게 fieldset의 disabled 속성 추가만으로 이를 해결 할 수 있습니다.
이는 큰 장점이며, 만약 이를 하나하나 해야할 경우 모든 입력태그마다 비활성화 코드가 들어가야 할 것입니다.
하지만 간단하게 이를 모두 제어할 수 있습니다.
fieldset 예제 소스 보기
아래 태그는 일반적인 회원정보 수정 페이지 입니다. 권한이 없는 경우 모든 폼의 비활성화가 필요합니다.
즉 disabled속성을 가져야 합니다.
만약 입력폼이 100개였다면 모든 코드에 disabled 속성을 적용하였을 것입니다.
물론 스크립트를 사용해 루프를 돌릴 수도 있겠지만 이는 리소스에 부담을 주는 방법입니다.
fieldset 태그를 사용하여 간편하게 그룹화를 통해 입력폼을 관리할 수 있습니다.
참조)
반응형
'웹 프론트엔드 > HTML | CSS | JS' 카테고리의 다른 글
| CSS : 말풍선 만들기 (border 속성) (0) | 2022.12.20 |
|---|---|
| 모바일 웹 : Device Orientation Event란? ( feat: IOS 13+ 이상에서 Device Orientation Event 권한 얻어오기 ) (1) | 2022.10.12 |
| JS : 모바일에서 오른쪽 클릭 시 옵션메뉴 안나오게 하기 (0) | 2021.07.21 |
| text-indent 속성 (0) | 2018.10.01 |
| CSS - 자손 선택자와 자식선택자 비교 (0) | 2018.08.14 |
