HTML แบบแบ่งหลักคำหมาย

  • หน้าก่อนหน้า <label>
  • หน้าต่อไป <li>

การใช้งานและการกำหนด

<legend> กำหนดโซ่ <fieldset> องค์ประกอบ ข้อความหัว (caption).

ดูเพิ่มเติมที่:

คู่มือตัวอย่าง HTML DOM:วัตถุ Legend

ตัวอย่าง

ตัวอย่าง 1

จัดกลุ่มองค์ประกอบที่เกี่ยวข้องในฟอร์ม:

<form action="/action_page.php">
  <fieldset>
    <legend>ข้อมูลส่วนตัว：</legend>
    <label for="fname">ชื่อ：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">นามสกุล：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">อีเมล：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">วันเกิด：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="ส่งสินค้า">
  </fieldset>
</form>

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ให้หัวข้อสู่ของfieldsetเลื่อนไปทางขวา (ใช้ CSS):

<form action="/action_page.php">
  <fieldset>
    <legend style="float:right">ข้อมูลส่วนตัว：</legend>
    <label for="fname">ชื่อ：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">นามสกุล：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">อีเมล：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">วันเกิด：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="ส่งสินค้า">
  </fieldset>
</form>

ทดลองด้วยตัวเอง

ตัวอย่าง 3

ใช้ CSS ตั้งค่า <fieldset> และ <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>ข้อมูลส่วนตัว：</legend>
    <label for="fname">ชื่อ：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">นามสกุล：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">อีเมล：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">วันเกิด：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="ส่งสินค้า">
  </fieldset>
</form>
</body>
</html>

ทดลองด้วยตัวเอง

คุณสมบัติโลก

<legend> แบบบันทึกยังสนับสนุน คุณสมบัติโลกใน HTML.

คุณสมบัติทางเหตุการณ์

<legend> แบบบันทึกยังสนับสนุน คุณสมบัติทางเหตุการณ์ใน HTML.

การตั้งค่า CSS โดยมาตรฐาน

ส่วนใหญ่ของเครื่องนอกจะแสดงค่าโดยมาตรฐานตามนี้ <legend> องค์ประกอบ:

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

ทดลองด้วยตัวเอง

การสนับสนุนโดยเครื่องนอก

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อนหน้า <label>
  • หน้าต่อไป <li>