HTML <fieldset> แบบภาพภาค

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

<fieldset> เครื่องหมายฉากใช้สำหรับจัดกลุ่มองค์ประกอบที่เกี่ยวข้องในฟอร์ม:

<fieldset> เครื่องหมายฉากจะวาดเส้นบรรจบรอบองค์ประกอบที่เกี่ยวข้อง:

<legend> เครื่องหมายฉากใช้เพื่อกำหนดหัวข้อสำหรับองค์ประกอบ fieldset ประกอบ:

อ่านเพิ่มเติม:

HTML DOM คู่มืออ้างอิง：เป้าหมาย Fieldset

ตัวอย่าง

ตัวอย่าง 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">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="ส่งมอบ">
  </fieldset>
</form>

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

ตัวอย่าง 2

ตั้งค่าสไตล์ของ element <fieldset> และ <legend> ด้วย CSS:

<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> ใช้เพื่อกำหนดหัวข้อของ element <fieldset> คือ

แบบคำเขียน

แบบคำเขียน ค่า รายละเอียด
disabled disabled กำหนดให้บล็อคเกิดขึ้นกับตัวแปลงฟอร์มที่เกี่ยวข้อง
form form_id กำหนดฟิล์ท์เทอร์นี้เป็นส่วนหนึ่งของฟอร์มไหน
name ข้อความ กำหนดชื่อฟิล์ท์เทอร์

โครงสร้างโฟลเมอร์ทั่วไป

<fieldset> แท็กนี้ยังสนับสนุน โครงสร้างโฟลเมอร์ของ HTML ทั่วไป。

ฟิล์ท์เทอร์ของสมมาตร

<fieldset> แท็กนี้ยังสนับสนุน ฟิล์ท์เทอร์ของสมมาตรใน HTML。

การตั้งค่า CSS โรม

โปรแกรมน่าเทคโนโลยีส่วนใหญ่จะแสดงค่าเริ่มต้นตามต่อไปนี้ <fieldset> ตัวแทน:

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove (ค่าภายใน);
}

การสนับสนุนโปรแกรมน่าเทคโนโลยี

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน