แท็ก <legend> ใน HTML ใช้สำหรับกำหนด คำอธิบาย (caption) ให้กับองค์ประกอบ <fieldset> แท็ก <fieldset> ใช้จัดกลุ่มองค์ประกอบฟอร์ม เช่น ปุ่ม, ช่องกรอก, radio buttons ฯลฯ
ไวยากรณ์ (Syntax)
<fieldset> <legend> กำหนดคำอธิบาย </legend> </fieldset>
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>อันดับตามวิชา</h2>
<form>
<fieldset>
<legend>อันดับ (คำอธิบาย)</legend>
<label for="stinfo">นักเรียน:</label>
<input type="text" id="stinfo" value="Steve"><br>
<label for="sub">วิชา:</label>
<input type="text" value="วิทยาศาสตร์"><br>
<label for="rank">อันดับ:</label>
<input type="number" value="1"><br>
<label for="marks">คะแนน:</label>
<input type="number" value="98"><br>
</fieldset>
</form>
</body>
</html>
ผลลัพธ์
แสดงกรอบ (fieldset) พร้อมข้อความ "อันดับ (คำอธิบาย)" เป็นหัวข้อด้านบนกรอบ ภายในมีฟอร์มกรอกข้อมูลนักเรียน
คำอธิบายโค้ด
<fieldset>จัดกลุ่มฟอร์ม elements<legend>อันดับ (คำอธิบาย)</legend>— ให้ชื่อ/คำอธิบายกับกลุ่ม- ภายในมี
<label>ผูกกับ<input>ผ่านforและid
จุดสำคัญ: <legend> ต้องเป็นลูกแรกของ <fieldset> เสมอ ไม่สามารถวางที่อื่นได้
การจัดสไตล์: สามารถใช้ CSS จัดรูปแบบ legend ได้ เช่น เปลี่ยนฟอนต์, สี, padding, หรือแม้แต่ย้ายตำแหน่งด้วย float หรือ position
