4.1 Phần tử <fieldset>
Nhóm các phần tử của form cho phép gộp các phần tử liên quan lại với nhau một cách logic, điều này cải thiện cấu trúc của form và giúp nó dễ sử dụng hơn cho người dùng. HTML cung cấp hai thẻ để nhóm các phần tử của form: <fieldset> và <legend>.
Phần tử <fieldset> được sử dụng để nhóm các phần tử liên quan trong form bên trong <form>. Về mặt trực quan, phần tử này thường được hiển thị như một khung xung quanh các phần tử được nhóm, điều đó giúp người dùng hiểu các trường nào thuộc về một nhóm.
Ví dụ sử dụng:
Trong ví dụ này, chúng ta thấy hai nhóm phần tử của form: "Personal Information" và "Account Details", mỗi nhóm được khung bởi phần tử <fieldset> và có tiêu đề <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("Vui lòng điền đầy đủ tất cả các trường");
}
});
</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>
Các thuộc tính chính của <fieldset>:
Thuộc tính disabled: làm cho tất cả các phần tử bên trong <fieldset> không thể sử dụng được cho người dùng (chúng không thể bị thay đổi và sẽ không được gửi lên server).
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 Phần tử <legend>
Phần tử <legend> được sử dụng để thêm tiêu đề cho nhóm phần tử được tạo bằng <fieldset>. Nó giúp người dùng hiểu mục đích và ngữ cảnh của nhóm trường trong form.
Ví dụ sử dụng:
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>
Đặc điểm của phần tử <legend>:
- Vị trí: phần tử
<legend>luôn nằm bên trong<fieldset>, và vị trí của nó thường nằm ở phần trên của khung. - Văn bản: văn bản bên trong
<legend>mô tả nhóm trường trong form, giúp người dùng nhanh chóng định hướng trong form.
Mẹo hữu ích khi sử dụng <fieldset> và <legend>
- Nhóm logic: sử dụng
<fieldset>và<legend>để nhóm logic các phần tử trong form — điều này sẽ làm cho form trở nên có trật tự và dễ hiểu hơn cho người dùng - Khả năng tiếp cận: các phần tử
<fieldset>và<legend>cải thiện khả năng tiếp cận của form, giúp người dùng sử dụng công nghệ hỗ trợ hiểu được cấu trúc và nội dung của form - Phong cách và thiết kế: sử dụng CSS để tạo kiểu cho
<fieldset>và<legend>để cải thiện ngoại hình của form
4.3 Các ví dụ sử dụng <fieldset> và <legend>
Form đăng ký với việc nhóm các trường:
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("Vui lòng điền đầy đủ tất cả các trường");
}
});
</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>
Form với các loại dữ liệu khác nhau:
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("Trường Email và Phone phải được điền");
}
});
</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