HTML5 การใช้งาน fieldset Tag

<fieldset> เป็นแท็กที่ใช้ใน HTML5 เพื่อจัดกลุ่มของฟอร์มควบคุม (form controls) หรือองค์ประกอบต่าง ๆ ที่เกี่ยวข้องในฟอร์มเดียวกัน ช่วยในการแยกข้อมูลที่เกี่ยวข้องกันเป็นหมวดหมู่ให้ดูมีระเบียบและเข้าใจง่ายขึ้น

การใช้งาน <fieldset>

  1. จัดกลุ่มฟอร์มควบคุม <fieldset> ถูกใช้เพื่อสร้างกลุ่มของฟอร์มควบคุม เช่น input, checkbox, และ select ที่เกี่ยวข้องกัน
  2. เพิ่มคำอธิบายด้วย <legend> เราสามารถใช้ <legend> ภายใน <fieldset> เพื่อระบุชื่อหมวดหมู่หรือคำอธิบายให้กับกลุ่มข้อมูลนั้น ๆ

ตัวอย่างการใช้งาน

จัดกลุ่มแบบฟอร์มที่เกี่ยวข้องกัน

HTML
<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>

  <fieldset>
    <legend>Account Details</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
  </fieldset>

  <input type="submit" value="Submit">
</form>

ในตัวอย่างนี้เราใช้ <fieldset> เพื่อแบ่งส่วนของข้อมูลออกเป็น “Personal Information” และ “Account Details” เพื่อทำให้ฟอร์มดูเป็นระเบียบ

การใช้ <fieldset> ซ้อนกัน

เราสามารถใช้ <fieldset> ซ้อนกันได้ ถ้าต้องการจัดกลุ่มย่อยภายในกลุ่มใหญ่

HTML
<form>
  <fieldset>
    <legend>Billing Address</legend>
    
    <label for="address">Address:</label>
    <input type="text" id="address" name="address">

    <fieldset>
      <legend>Payment Method</legend>
      <label for="creditCard">Credit Card:</label>
      <input type="radio" id="creditCard" name="paymentMethod" value="creditCard">
      
      <label for="paypal">Paypal:</label>
      <input type="radio" id="paypal" name="paymentMethod" value="paypal">
    </fieldset>
    
  </fieldset>

  <input type="submit" value="Submit">
</form>

ตัวอย่างนี้แสดงการใช้งาน <fieldset> ซ้อนกัน โดยกลุ่มข้อมูลย่อยภายในกลุ่มข้อมูลใหญ่จะเกี่ยวกับวิธีการชำระเงิน

ใช้สำหรับกลุ่มปุ่มควบคุม

นอกจากฟอร์มข้อมูลแล้ว <fieldset> ยังสามารถใช้ในการจัดกลุ่มปุ่มควบคุมต่าง ๆ ได้

HTML
<form>
  <fieldset>
    <legend>Actions</legend>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
  </fieldset>
</form>

ตัวอย่างนี้ใช้ <fieldset> เพื่อจัดกลุ่มปุ่มที่เกี่ยวกับการดำเนินการของฟอร์ม เช่น ปุ่ม Submit และ Reset

การใช้ <fieldset> เพื่อความสวยงาม

นอกจากการใช้จัดกลุ่มข้อมูล <fieldset> ยังสามารถใช้เพื่อสร้างกรอบรอบกลุ่มข้อมูลเพื่อความสวยงาม

HTML
<form>
  <fieldset style="border: 2px solid blue;">
    <legend style="color: red;">Contact Us</legend>
    
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>
</form>

ในตัวอย่างนี้ เราใช้ CSS เพื่อปรับแต่งลักษณะของ <fieldset> ให้มีกรอบสีน้ำเงินและ <legend> ให้เป็นสีแดง

  • ควรใช้ <fieldset> เมื่อมีข้อมูลที่ต้องการแยกเป็นหมวดหมู่ที่ชัดเจน
  • การใช้ <legend> ภายใน <fieldset> ช่วยให้ผู้ใช้ทราบถึงความเกี่ยวข้องของข้อมูลในกลุ่มนั้น ๆ
แชร์เรื่องนี้