html fieldset, legend 태그 이용하여 폼 요소 그룹핑 하기
네 안녕하세요, 이번 포스팅에서는 폼 요소를 그룹핑하는 방법에 대하여 알아보도록 하겠습니다.
폼 요소를 그룹핑 한다는 것은 여러 가지의 폼 요소들을 하나의 설문지와 같은 형태의 양식으로
큰 묶음으로 정리하여 나타내는 것을 말합니다.
이러한 것은 특히 회원 가입 페이지 등을 만들 때 필요한데,
이를 어떤 식으로 만드는 지 한 번 알아보도록 하겠습니다.
1. 폼 요소 그룹핑 하기 : fieldset, legend 태그 이용
그리고 이런 정보 입력 칸을 좀 더 깔끔하게 만드는 방법이 있습니다.
바로 그것들을 그룹핑을 하는 것입니다.
그렇게 되면 좀 더 깔끔한 화면이 만들어지고, 시인성이 좋아지겠죠?
그래서 그럴 때 사용하는 태그는 fieldset 태그이고,
이 태그 내에 그룹화가 된 것들의 제목을 입력할 때 쓰는 태그는 legend 태그입니다.
그럼 이들을 이용하여 어떻게 만드는지 간단한 예제를 통하여 같이 알아보도록 하겠습니다.
그럼 함께 보시죠.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>형폼 입력 그룹으로 묶기</title>
</head>
<body>
<h3>회원 정보를 입력해주세요</h3>
<hr>
<form>
<fieldset>
<legend>회원정보</legend>
이메일 : <input type="email"><br>
홈페이지 : <input type="url"><br>
전화번호 : <input type="tel">
</fieldset>
<small>질문 : Tel. 010-111-1111</small>
</form>
</html>이렇게 한 번 작성을 해봤습니다.
회원 정보를 제목으로 해서 legend 태그에 썼고요,
그리고 fieldset 태그 안에 그룹화할 요소들을 한 번에 묶었습니다.
그럼 이 코드의 결과는 어떻게 나왔을지 한 번 같이 보시죠.
이렇게 나왔음을 볼 수 있습니다.
되게 깔끔하게 만들어졌죠?
이렇게 보면 이전에 봤던 화면보다 훨씬 시인성도 좋고,
좀 더 깨끗해 보이기 때문에 이러한 방법들을 더 많이 이용을 합니다.
여기까지 폼 요소들을 그룹화하는 방법에 대하여 알아보았는데요,
다음 포스팅부터는 본격적으로 css를 다룰 겁니다.
그래서 간단하게 css가 무엇인지 맛을 한 번 보는 걸로 하겠습니다.
긴 글 읽어주신 독자님들께 진심으로 감사합니다 ~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html type 속성과 placeholder 속성을 이용하여 정보의 힌트 및 양식 보여주기와 형식을 가진 텍스트 입력하기 (0) | 2023.03.10 |
|---|---|
| html number, range 속성을 이용하여 스핀 버튼과 슬라이드 바 사용하기 (0) | 2023.03.07 |
| html month, week, date, time, datetime-local 속성 이용하여 시간 표현하기 (0) | 2023.03.07 |
| html color 속성 이용하여 색 입력하기 (0) | 2023.03.07 |
| html label 태그로 폼 요소의 캡션 만들기 (0) | 2023.03.06 |
댓글