Học CNTT HTML

Thẻ HTML <fieldset>

Mục lục

Định nghĩa và cách sử dụng thẻ <fieldset>

Thẻ <fieldset> được sử dụng để nhóm các phần tử liên quan trong một biểu mẫu. Thẻ <fieldset> vẽ một hộp xung quanh các phần tử liên quan. Sau đây là ví dụ về các yếu tố liên quan đến nhóm trong một biểu mẫu:

<form action="/action_page.php">
  <fieldset>
    <legend>Thông tin cá nhân:</legend>
    <label for="fname">Họ:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Tên:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Ngày sinh:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Mẹo và lưu ý

Mẹo: Thẻ <legend> được sử dụng để xác định phụ đề cho phần tử <fieldset>.

Hỗ trợ trình duyệt

Phần tử
<fieldset>		Google ChromeMS EdgeFirefoxSafariOpera
CóCóCóCóCó

Thuộc tính

Thuộc tínhGiá trịMô tả
disableddisabledChỉ định rằng một nhóm các phần tử biểu mẫu có liên quan sẽ bị vô hiệu hóa
formform_idChỉ định các trường thuộc về biểu mấu nào
nametextChỉ định tên cho các trường

Thuộc tính Global

Thẻ <fieldset> cũng hỗ trợ các thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <fieldset> cũng hỗ trợ thuộc tính sự kiện trong HTML.

Các ví dụ khác

Sử dụng CSS để tạo kiểu cho <fieldset> và <legend>:

<html>
<head>
<style>
fieldset {
  background-color: #eeeeee;
}

legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}

input {
  margin: 5px;
}
</style>
</head>
<body>

<form action="/action_page.php">
  <fieldset>
    <legend>Thông tin cá nhân:</legend>
    <label for="fname">Họ:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Tên:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Ngày sinh:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

</body>
</html>

Cài đặt CSS mặc định

Hầu hết mọi trình duyệt sẽ hiển thị phần tử <fieldset> với các giá trị mặc định sau:

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove (internal value);
}
Thứ Bảy, 03/09/2022 15:41
5 ★ 23 👨 2.130

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!
Số điện thoại này đã được xác thực!
Bạn có thể dùng Sđt này đăng nhập tại đây!
Lỗi gửi SMS, liên hệ Admin
0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi
    ❖ HTML

    Cũ vẫn chất

    Xem thêm
    HTML