4.1 <fieldset> 요소
폼 요소를 그룹화하면 관련된 요소를 논리적으로 묶어서 폼의 구조를 개선하고 사용자에게 더 편리하게 제공합니다. HTML은 폼 요소를 그룹화하기 위한 두 가지 태그를 제공하는데, <fieldset>와 <legend>입니다.
<fieldset> 요소는 <form> 안에서 관련된 폼 요소를 그룹화하는 데 사용됩니다. 시각적으로 이 요소는 보통 그룹화된 요소 주위에 테두리로 표시되며, 사용자가 어떤 필드가 한 그룹에 속하는지 이해하는 데 도움을 줍니다.
사용 예시:
이 예시에서는 두 개의 폼 요소 그룹, "Personal Information"과 "Account Details"가 있으며, 각 그룹은 <fieldset> 요소로 둘러싸이고 <legend>로 제목이 붙어 있습니다.
HTML
<form action="/submit" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</fieldset>
<button type="submit" id="submit">Submit</button>
</form>
<script>
const inputs = document.getElementsByTagName("input");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
const values = [];
let allValid = true;
for (let input of inputs) {
if (!input.validity.valid) {
allValid = false;
break;
}
values.push(input.value);
}
if (allValid) {
alert(
"Personal Information:\n" +
`Name: ${values[0]}\n` +
`Email: ${values[1]}\n\n` +
"Account Details:\n" +
`Username: ${values[2]}\n` +
`Password: ${values[3]}`
);
} else {
alert("모든 필드를 작성해주세요");
}
});
</script>
HTML
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</fieldset>
<input type="submit" value="Submit">
</form>
<fieldset>의 주요 속성:
disabled 속성: <fieldset> 내 모든 요소를 사용자가 접근할 수 없도록 합니다 (변경할 수 없으며 서버로 전송되지 않습니다).
HTML
<fieldset disabled>
<legend>Disabled Group</legend>
<label for="disabled-field">This field is disabled:</label>
<input type="text" id="disabled-field" name="disabled-field">
</fieldset>
4.2 <legend> 요소
<legend> 요소는 <fieldset>를 사용하여 생성된 요소 그룹에 제목을 추가하는 데 사용됩니다. 이는 사용자에게 폼 필드 그룹의 목적과 맥락을 이해하는 데 도움을 줍니다.
사용 예시:
HTML
<fieldset>
<legend>Contact Information</legend>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone">
<label for="address">Address:</label>
<input type="text" id="address" name="address">
</fieldset>
<legend> 요소의 특징:
- 위치:
<legend>요소는 항상<fieldset>내에 위치하며, 보통 테두리의 상단에 있습니다. - 텍스트:
<legend>내부의 텍스트는 폼 필드 그룹을 설명하여 사용자가 폼에서 빠르게 방향을 잡을 수 있도록 돕습니다.
<fieldset> 및 <legend> 사용에 대한 유용한 팁
- 논리적인 그룹화:
<fieldset>및<legend>를 사용하여 논리적으로 폼 요소를 그룹화하면 폼이 더 깔끔하고 사용자에게 이해하기 쉬워집니다. - 접근성:
<fieldset>및<legend>요소는 보조 기술을 사용하는 사용자가 폼의 구조와 내용을 이해하는 데 도움을 줍니다. - 스타일과 디자인:
<fieldset>및<legend>를 CSS를 사용하여 스타일링하여 폼의 외관을 개선하세요.
4.3 <fieldset> 및 <legend> 사용 예시
필드 그룹화가 적용된 회원가입 폼:
HTML
<form form action="/submit" method="post">
<fieldset>
<legend>Personal Details</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" required>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" required>
</fieldset>
<fieldset>
<legend>Login Information</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</fieldset>
<button type="submit" id="submit">Submit</button>
</form>
<script>
const inputs = document.getElementsByTagName("input");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
const values = [];
let allValid = true;
for (let input of inputs) {
if (!input.validity.valid) {
allValid = false;
break;
}
values.push(input.value);
}
if (allValid) {
alert(
"Personal Details:\n" +
`First name: ${values[0]}\n` +
`Last Name: ${values[1]}\n\n` +
"Login information:\n" +
`Username: ${values[2]}\n` +
`Password: ${values[3]}`
);
} else {
alert("모든 필드를 작성해주세요");
}
});
</script>
HTML
<form>
<fieldset>
<legend>Personal Details</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname">
</fieldset>
<fieldset>
<legend>Login Information</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</fieldset>
<input type="submit" value="Register">
</form>
다양한 데이터 유형을 가진 폼:
HTML
<form action="/auth" method="post">
<fieldset>
<legend>Contact Information</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="newsletter">Subscribe to newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="updates">Receive updates:</label>
<input type="checkbox" id="updates" name="updates">
</fieldset>
<button type="submit" id="submit">Submit</button>
</form>
<script>
const form = document.querySelector("form");
const inputs = form.querySelectorAll("input");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
let email = "";
let phone = "";
let newsletter = 0;
let updates = 0;
let allValid = true;
inputs.forEach((input) => {
if (input.type === "email" && (!input.validity.valid)) {
allValid = false;
} else if (input.type === "tel" && (!input.validity.valid)) {
allValid = false;
}
if (input.type === "email") {
email = input.value;
} else if (input.type === "tel") {
phone = input.value;
} else if (input.type === "checkbox") {
if (input.id === "newsletter") {
newsletter = input.checked ? 1 : 0;
} else if (input.id === "updates") {
updates = input.checked ? 1 : 0;
}
}
});
if (allValid) {
alert(
"Contact Information\n" +
`Email: ${email}\n` +
`Phone Number: ${phone}\n\n` +
"Preferences\n" +
`Subscribe to newsletter: ${newsletter}\n` +
`Receive updates: ${updates}`
);
} else {
alert("Email 및 Phone 필드는 필수 항목입니다");
}
});
</script>
HTML
<form>
<fieldset>
<legend>Contact Information</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="newsletter">Subscribe to newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="updates">Receive updates:</label>
<input type="checkbox" id="updates" name="updates">
</fieldset>
<input type="submit" value="Submit">
</form>
CSS
fieldset {
border: 2px solid #ccc;
padding: 20px;
}
legend {
font-weight: bold;
padding: 0 10px;
}
GO TO FULL VERSION