แอตทริบิวต์ form: ผูกองค์ประกอบกับฟอร์มภายนอกใน HTML

แอตทริบิวต์ form ใช้ระบุ id ของฟอร์ม (<form>) ที่องค์ประกอบ Input นี้ต้องการเป็นส่วนหนึ่ง แม้จะวางอยู่นอกแท็ก Form นั้นก็ตาม (HTML5 Feature)

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

<!DOCTYPE html>
<html>
<body>
    <form action="/submit" method="get" id="myform">
        <label>รหัสวิชา: <input type="number" name="subid"></label><br>
        <label>ชื่อวิชา: <input type="text" name="subname"></label><br>
        <label>จำนวนนักศึกษา: <input type="number" name="stcount"></label><br>
    </form>
    
    <!-- ปุ่ม Submit อยู่นอก Form แต่ผูกกับ myform -->
    <button type="submit" form="myform" value="Submit">ส่งข้อมูล</button>
    
    <!-- Input อื่นๆ ก็ผูกได้ -->
    <label>อีเมล (นอกฟอร์ม): <input type="email" name="email" form="myform"></label>
</body>
</html>

องค์ประกอบที่รองรับแอตทริบิวต์ form

• <button>
• <fieldset>
• <input>
• <label> (HTML5.1)
• <meter>
• <object>
• <output>
• <progress>
• <select>
• <textarea>

กรณีการใช้งาน (Use Cases)

• วางปุ่ม Submit/Action 遠くจาก Form (Layout Complex)
• Input ที่อยู่ใน Modal/Sidebar แต่ส่งกับ Form หลัก
• แยก Form Fields ออกเป็น Sections ต่างๆ ใน Layout
• Wizard/Multi-step Form: แต่ละ Step แยก Div แต่ Submit ร่วม Form เดียว

ตัวอย่าง Multi-step Form

<form id="wizardForm" action="/submit" method="post">
    <div id="step1">
        <input type="text" name="name" placeholder="ชื่อ" form="wizardForm" required>
        <button type="button" onclick="nextStep(2)">ถัดไป</button>
    </div>
    <div id="step2" style="display:none">
        <input type="email" name="email" placeholder="อีเมล" form="wizardForm" required>
        <button type="button" onclick="prevStep(1)">ย้อนกลับ</button>
        <button type="submit" form="wizardForm">ส่งข้อมูล</button>
    </div>
</form>