Thẻ <fieldset> HTML

Định nghĩa và cách sử dụng

<fieldset> Thẻ được sử dụng để nhóm các phần tử liên quan trong biểu mẫu.

<fieldset> Thẻ này sẽ vẽ một khung xung quanh các phần tử liên quan.

<legend> Thẻ fieldset định nghĩa tiêu đề.

Xin xem thêm:

Tài liệu tham khảo DOM HTML:Đối tượng Fieldset

Mô hình

Ví dụ 1

Nhóm các yếu tố liên quan trong biểu mẫu:

<form action="/action_page.php">
  <fieldset>
    <legend>Thông tin cá nhân:</legend>
    <label for="fname">Tên:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Họ:</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">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Gửi">
  </fieldset>
</form>

Thử ngay

Ví dụ 2

Sử dụng CSS để thiết lập樣式 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">Tên:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Họ:</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="Gửi">
  </fieldset>
</form>
</body>
</html>

Thử ngay

Lưu ý và chú thích

Lưu ý:Thẻ <legend> được sử dụng để định nghĩa tiêu đề cho yếu tố <fieldset>.

Thuộc tính

Thuộc tính Giá trị Mô tả
disabled disabled Định nghĩa một nhóm các yếu tố biểu mẫu liên quan nên bị vô hiệu hóa.
form form_id Định nghĩa tập trường thuộc biểu mẫu nào.
name Văn bản Định nghĩa tên của tập trường.

Thuộc tính toàn cục

<fieldset> Thẻ còn hỗ trợ Thuộc tính toàn cục trong HTML。

Thuộc tính sự kiện

<fieldset> Thẻ còn hỗ trợ Thuộc tính sự kiện trong HTML。

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

Hầu hết các trình duyệt sẽ hiển thị giá trị mặc định sau đây <fieldset> Thiết bị:

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 (giá trị nội bộ);
}

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ