Thẻ HTML <legend>

Nguyen Le Oanh

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

Thẻ <legend> xác định chú thích cho phần tử <fieldset>. Ví dụ sau nhóm các yếu tố liên quan 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>

Hỗ trợ trình duyệt

Phần tử <legend>	Google Chrome	MS Edge	Firefox	Safari	Opera
Phần tử <legend>	Có	Có	Có	Có	Có

Thuộc tính Global

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

Thuộc tính sự kiện

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

Các ví dụ khác

Để chú thích fieldset nổi ở bên phải (với CSS):

<form action="/action_page.php">
  <fieldset>
    <legend style="float:right">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>

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ử <legend> với các giá trị mặc định sau:

legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}

Chủ Nhật, 08/01/2023 16:39

5 ★ 3 👨 436

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!