<fieldset> เป็นแท็กที่ใช้ใน HTML5 เพื่อจัดกลุ่มของฟอร์มควบคุม (form controls) หรือองค์ประกอบต่าง ๆ ที่เกี่ยวข้องในฟอร์มเดียวกัน ช่วยในการแยกข้อมูลที่เกี่ยวข้องกันเป็นหมวดหมู่ให้ดูมีระเบียบและเข้าใจง่ายขึ้น
การใช้งาน <fieldset>
- จัดกลุ่มฟอร์มควบคุม
<fieldset>ถูกใช้เพื่อสร้างกลุ่มของฟอร์มควบคุม เช่น input, checkbox, และ select ที่เกี่ยวข้องกัน - เพิ่มคำอธิบายด้วย
<legend>เราสามารถใช้<legend>ภายใน<fieldset>เพื่อระบุชื่อหมวดหมู่หรือคำอธิบายให้กับกลุ่มข้อมูลนั้น ๆ
ตัวอย่างการใช้งาน
จัดกลุ่มแบบฟอร์มที่เกี่ยวข้องกัน
<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> ซ้อนกันได้ ถ้าต้องการจัดกลุ่มย่อยภายในกลุ่มใหญ่
<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> ยังสามารถใช้ในการจัดกลุ่มปุ่มควบคุมต่าง ๆ ได้
<form>
<fieldset>
<legend>Actions</legend>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>ตัวอย่างนี้ใช้ <fieldset> เพื่อจัดกลุ่มปุ่มที่เกี่ยวกับการดำเนินการของฟอร์ม เช่น ปุ่ม Submit และ Reset

การใช้ <fieldset> เพื่อความสวยงาม
นอกจากการใช้จัดกลุ่มข้อมูล <fieldset> ยังสามารถใช้เพื่อสร้างกรอบรอบกลุ่มข้อมูลเพื่อความสวยงาม
<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>ช่วยให้ผู้ใช้ทราบถึงความเกี่ยวข้องของข้อมูลในกลุ่มนั้น ๆ
