Thẻ legend trong HTML

Thẻ legend trong HTML

Thẻ legend trong HTML dùng để đặt tiêu đề cho từng nhóm các phần tử nhập liệu trong cùng một form hoặc đặt tiêu đề cho hết phần tử cùng một form, chi tiết như nào hãy cùng chúng tôi phân tích:

Chức năng của Thẻ legend trong HTML

Thẻ legend trong HTML dùng để đặt tiêu đề cho từng nhóm các phần tử nhập liệu trong cùng một form hoặc đặt tiêu đề cho hết phần tử cùng một form, giúp người dùng dễ nhận biết mục đích của nhóm đó.

Cú pháp của Thẻ legend trong HTML

<legend>tieudenhom</legend>

tieudenhom: Tiêu đề nhóm.

Bao gồm thẻ mở <legend> và thẻ đóng </legend> bao quanh tiêu đề nhóm của form.

Code Thẻ legend trong HTML

Thẻ legend của fieldset mặc định trong HTML

<form action="https://webmoi.vn/the-fieldset-mac-dinh-trong-html/">
 <fieldset>
  <legend>Thông tin liên hệ:</legend>
  <label for="hoten">Họ Tên:</label>
  <input type="text" id="hoten" name="txthoten"><br><br>
  <label for="dienthoai">Điện thoại:</label>
  <input type="text" id="dienthoai" name="txtdienthoai"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="txtemail"><br><br>
  <input type="submit" value="GỬI ĐI">
 </fieldset>
</form>

Chạy Thử

Css cho Thẻ legend của fieldset trong HTML

<!DOCTYPE html>
<html>
<head>
<title>Css cho Thẻ fieldset trong HTML</title>
<style>
fieldset {
  background-color: #eeeeee;
}

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

label {
  float: left;
  width: 83px;
}
</style>
</head>
<body>
<form action="https://webmoi.vn/the-fieldset-mac-dinh-trong-html/">
 <fieldset>
  <legend>Thông tin liên hệ:</legend>
  <label for="hoten">Họ Tên:</label>
  <input type="text" id="hoten" name="txthoten"><br><br>
  <label for="dienthoai">Điện thoại:</label>
  <input type="text" id="dienthoai" name="txtdienthoai"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="txtemail"><br><br>
  <input type="submit" value="GỬI ĐI">
 </fieldset>
</form>
</body>
</html>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ legend trong HTML.

  • ★★★★★ ★★★★★
  • 0 Bình luận
CEO Bùi Tấn Lực
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website
Chia sẻ nội dung đánh giá của bạn về Thẻ legend trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn