<fieldset>: Phần tử Field Set

Try it

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

legend {
  background-color: black;
  color: white;
  padding: 3px 6px;
}

input {
  margin: 0.4rem;
}

Như ví dụ trên cho thấy, phần tử <fieldset> cung cấp nhóm cho một phần của HTML form, với phần tử <legend> lồng bên trong cung cấp chú thích cho <fieldset>. Nó nhận một vài thuộc tính, đáng chú ý nhất là form, có thể chứa id của <form> trên cùng trang, cho phép bạn làm cho <fieldset> là một phần của <form> đó ngay cả khi nó không được lồng bên trong, và disabled, cho phép bạn vô hiệu hóa <fieldset> và tất cả nội dung của nó cùng một lúc.

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

disabled

Nếu thuộc tính Boolean này được đặt, tất cả điều khiển form là hậu duệ của <fieldset> đều bị vô hiệu hóa, nghĩa là chúng không thể chỉnh sửa và sẽ không được gửi cùng với <form>. Chúng sẽ không nhận bất kỳ sự kiện duyệt nào, như nhấp chuột hoặc sự kiện liên quan đến tiêu điểm. Theo mặc định trình duyệt hiển thị các điều khiển như vậy màu xám. Lưu ý rằng các phần tử form bên trong phần tử <legend> sẽ không bị vô hiệu hóa.

form

Thuộc tính này lấy giá trị của thuộc tính id của phần tử <form> bạn muốn <fieldset> là một phần, ngay cả khi nó không ở bên trong form. Xin lưu ý rằng việc sử dụng điều này gây nhầm lẫn — nếu bạn muốn các phần tử <input> bên trong <fieldset> được liên kết với form, bạn cần sử dụng thuộc tính form trực tiếp trên các phần tử đó. Bạn có thể kiểm tra phần tử nào được liên kết với form qua JavaScript, sử dụng HTMLFormElement.elements.

name

Tên được liên kết với nhóm.

Note: Chú thích cho fieldset được cung cấp bởi phần tử <legend> đầu tiên được lồng bên trong nó.

Tạo kiểu với CSS

Có một số điều cần xem xét đặc biệt về tạo kiểu cho <fieldset>.

Giá trị display của nó là block theo mặc định và nó thiết lập một block formatting context. Nếu <fieldset> được tạo kiểu với giá trị display cấp nội tuyến, nó sẽ hoạt động như inline-block, ngược lại nó sẽ hoạt động như block. Theo mặc định có viền groove 2px bao quanh nội dung và một lượng padding mặc định nhỏ. Phần tử có min-inline-size: min-content theo mặc định.

Nếu có <legend>, nó được đặt qua viền block-start. <legend> thu nhỏ bọc, và cũng thiết lập một formatting context. Giá trị display được block hóa. (Ví dụ, display: inline hoạt động như block.)

Sẽ có một hộp ẩn danh chứa nội dung của <fieldset>, kế thừa các thuộc tính nhất định từ <fieldset>. Nếu <fieldset> được tạo kiểu với display: grid hoặc display: inline-grid, thì hộp ẩn danh sẽ là grid formatting context. Nếu <fieldset> được tạo kiểu với display: flex hoặc display: inline-flex, thì hộp ẩn danh sẽ là flex formatting context. Ngược lại, nó thiết lập block formatting context.

Bạn có thể tạo kiểu cho <fieldset> và <legend> theo bất kỳ cách nào bạn muốn phù hợp với thiết kế trang của bạn.

Ví dụ

Fieldset cơ bản

Ví dụ này bao gồm <fieldset> với <legend>, với một điều khiển bên trong nó.

<form action="#">
  <fieldset>
    <legend>Do you agree?</legend>
    <input type="checkbox" id="chbx" name="agree" value="Yes!" />
    <label for="chbx">I agree</label>
  </fieldset>
</form>

Kết quả

Fieldset bị vô hiệu hóa

Ví dụ này hiển thị <fieldset> bị vô hiệu hóa với hai điều khiển bên trong nó. Lưu ý cả hai điều khiển đều bị vô hiệu hóa do nằm trong <fieldset> bị vô hiệu hóa.

<form action="#">
  <fieldset disabled>
    <legend>Disabled login fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" id="name" value="Chris" />
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="pwd" value="Wookie" />
    </div>
  </fieldset>
</form>

Kết quả

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt

Xem thêm

• Phần tử <legend>
• Phần tử <input>
• Phần tử <label>
• Phần tử <form>