HTML5: <fieldset> & <legend>

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Tổng quan

Thẻ <fieldset> dùng để nhóm một tập các đối tượng liên quan đến một chủ đề nào đó thành một nhóm; thông thường các đối tượng được gom nhóm là các thành phần con của form.

Thẻ <legend> dùng để thể hiện một tiêu đề cho phần nội dung nằm trong thẻ <fieldset>; đây là thẻ con của <fieldset>.

Nhóm nội dung

<fieldset>: Flow, SectioningListedForm-associated, Palpable.

<legend>: Không thuộc nhóm nội dung nào.

Nội dung được phép

<fieldset>: Bao gồm một thẻ <legend> và sau đó là các đối tượng bạn muốn gom thành nhóm.

<legend>: Prasing.

Thẻ đóng

Cần phải có thẻ mở <fieldset>, <legend> và thẻ đóng </fieldset>, </legend>.

Phần tử cha được phép

<fieldset>: Bất kỳ phần tử nào chấp nhận nhóm nội dung Flow.

<legend>: Là con của thẻ <fieldset>.

DOM interface

<fieldset>: HTMLFieldSetElement.

<legend>: HTMLLegendElement.

Thuộc tính

<fieldset> và <legend> bao gồm Các thuộc tính Global.

Đối với <fieldset>:

disabled

Đây là thuộc tính Boolean, nếu nó được sử dụng thì người dùng sẽ không thể tương tác được với các thành phần con của form (không tính đến thẻ <legend>) nằm trong <fieldset> hiện thời.

form

Thuộc tính này chứa giá trị là id của một thẻ <form> nào đó, khi đó thẻ <fieldset> hiện thời sẽ thuộc về (là con) của form này.

Ví dụ

Ví dụ 1: Form có chứa fieldset, legend, và label

<form action="test.php" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>


 

Ví dụ 2: Mô phỏng một thẻ select có thể chỉnh sửa nội dung dựa trên thẻ <fieldset> cùng với các radiobox và textbox.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Thẻ giả &lt;select> (cho phép chỉnh sửa)</title>
<style type="text/css">
/* Các thành phần của form */
fieldset.elist, input[type="text"], textarea, select, option, fieldset.elist ul, fieldset.elist > legend, fieldset.elist input[type="text"], fieldset.elist > legend:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[type="text"] {
  padding: 0 20px;
}
textarea {
  width: 500px;
  height: 200px;
  padding: 20px;
}
textarea, input[type="text"], fieldset.elist ul, select, fieldset.elist > legend {
  border: 2px #cccccc solid;
  border-radius: 10px;
}
input[type="text"], fieldset.elist, select, fieldset.elist > legend {
  height: 32px;
  font-family: Tahoma;
  font-size: 14px;
}
input[type="text"]:hover, textarea:hover, select:hover, fieldset.elist:hover > legend {
  background-color: #ddddff;
}
select {
  padding: 4px 20px;
}
option {
  height: 30px;
  padding: 5px 4px;
}
option:not(:checked), textarea:focus {
  background-color: #ffcccc;
}
fieldset.elist > legend:after, fieldset.elist label {
  height: 28px;
}
input[type="text"], fieldset.elist {
  width: 316px;
}
input[type="text"]:focus {
  background: #ffcccc url("http://v1study.com/public/images/article/pen.png") no-repeat 2px center !important;
}
input[type="text"]:focus, textarea:focus, select:focus, fieldset.elist > legend {
  border: 2px #ccaaaa solid;
}
fieldset {
  border: 2px #af3333 solid;
  border-radius: 10px;
}
/* CSS cho thẻ 'giả' <select> */
fieldset.elist {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  overflow: visible;
  padding: 0;
  margin: 0;
  border: none;
}
fieldset.elist ul {
  position: absolute;
  width: 100%;
  max-height: 320px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: transparent;
}
fieldset.elist:hover ul {
  background-color: #ffffff;
  border: 2px #af3333 solid;
  left: 2px;
  overflow: auto;
}
fieldset.elist ul > li {
  list-style-type: none;
  background-color: transparent;
}
fieldset.elist label {
  display: none;
  width: 100%;
}
fieldset.elist input[type="text"] {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border: none;
  background-color: transparent;
  border-radius: 0;
}
fieldset.elist > legend {
  display: block;
  margin: 0;
  padding: 0 0 0 5px;
  position: absolute;
  width: 100%;
  cursor: default;
  background-color: #ccffcc;
  line-height: 30px;
  font-style: italic;
}
fieldset.elist:hover > legend {
  position: relative;
  overflow: hidden;
}
fieldset.elist > legend:after {
  width: 20px;
  content: "\2335";
  float: right;
  text-align: center;
  border-left: 2px #cccccc solid;
  font-style: normal;
  cursor: default;
}
fieldset.elist:hover > legend:after {
  background-color: #99ff99;
}
fieldset.elist ul input[type="radio"] {
  display: none;
}
fieldset.elist input[type="radio"]:checked ~ label {
  display: block;
  width: 292px;
  background-color: #ffffff;
}
fieldset.elist:hover input[type="radio"]:checked ~ label {
  width: 100%;
}
fieldset.elist:hover label {
  display: block;
  height: 100%;
}
fieldset.elist label:hover {
  background-color: #3333ff !important;
}
fieldset.elist:hover input[type="radio"]:checked ~ label {
  background-color: #aaaaaa;
}
</style>
</head>
 
<body>
<form name="tshirt" method="get" action="test.php">
<fieldset>
  <legend style="color:#F0F; font-weight:bold;">Đặt mua Áo sơ mi</legend>
  <p>Tên của bạn: <input type="text" name="myname" /></p>
  <p>Kích thước:
  <select name="size">
    <option value="s">Nhỏ (Small)</option>
    <option value="m">Vừa (Medium)</option>
    <option value="l">Lớn (Large)</option>
    <option value="xl">Cực lớn (Extra Large)</option>
  </select></p>
  <div>Địa chỉ giao hàng (tạo thẻ 'giả' &lt;select> có thể sửa được):
    <fieldset class="elist">
      <legend>Địa chỉ&hellip;</legend>
      <ul>
        <li><input type="radio" name="address-chosen" value="1" id="address-switch_1" checked /><label for="address-switch_1"><input type="text" name="address-item_1" value="Hoàn Kiếm, Hà Nội, Việt Nam" /></label></li>
        <li><input type="radio" name="address-chosen" value="2" id="address-switch_2" /><label for="address-switch_2"><input type="text" name="address-item_2" value="Đà Nẵng, Việt Nam" /></label></li>
        <li><input type="radio" name="address-chosen" value="3" id="address-switch_3" /><label for="address-switch_3"><input type="text" name="address-item_3" value="Nha Trang, Việt Nam" /></label></li>
        <li><input type="radio" name="address-chosen" value="4" id="address-switch_4" /><label for="address-switch_4"><input type="text" name="address-item_4" value="Thành phố Hồ Chí Minh, Việt Nam" /></label></li>
      </ul>
    </fieldset>
  </div>
  <p>Bình luận:<br /><textarea name="comment"></textarea></p>
  <p><input type="reset" value="Reset" /> <input type="submit" value="Gửi đơn hàng" /></p>
</fieldset>
</form>
</body>
</html>


 

Khả năng tương thích trình duyệt

AnchorDesktop

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Hỗ trợ cơ bản

(Yes)

1.0 (1.7 or earlier)

(Yes)

(Yes)

(Yes)

Mobile

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Hỗ trợ cơ bản

(Yes)

(Yes)

?

12

6

Xem thêm

· <form>, <legend>, <label>, <button>, <select>, <datalist>, <optgroup>, <option>, <textarea>, <keygen>, <input>, <output>, <progress> và <meter>.

 

» Tiếp: <h1> ... <h6>
« Trước: <dl> & <dt> & <dd>
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!