HTML DOM Input Number form Property: ระบุฟอร์มเจ้าของ

คุณสมบัติ formของ input type="number" คืนค่ารีเฟอร์เรนซ์ของอิลิเมนต์ <form> ที่ครอบคลุมช่องกรอกตัวเลข

รูปแบบ (Syntax)

object.form

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

ระบุว่าช่องกรอกตัวเลขอยู่ในฟอร์มไหน:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; background-color: #1b203a; color: #fff; }
        form { margin: 2.5rem auto; border: 1px solid #fff; padding: 2rem; }
        button { background-color: #db133a; border: none; cursor: pointer; padding: 8px 16px; color: #fff; border-radius: 5px; font-size: 1.05rem; outline: none; }
        input { border: none; background-color: #ffffff4a; height: 1.2rem; padding: 8px; color: #fff; font-weight: bold; font-size: 1rem; }
        .show { font-weight: bold; font-size: 1.4rem; }
    </style>
</head>
<body>
    <h1>ตัวอย่าง form Property</h1>
    <form id="Form 1">
        <legend>Form 1</legend>
        <input type="number" class="numberInput" value="12345300">
    </form>
    <button onclick="identify()">ระบุฟอร์มของ number input</button>
    <p class="show"></p>
    <script>
        function identify() {
            var formId = document.querySelector(".numberInput").form.id;
            document.querySelector(".show").innerHTML = "สวัสดี! ฉันมาจาก " + formId;
        }
    </script>
</body>
</html>

กรณีที่คืนค่า null

หาก number input ไม่อยู่ภายในแท็ก <form> คุณสมบัติ form จะคืนค่า null

การใช้งานจริง

• จัดการ number input หลายฟอร์มในหน้าเดียว
• Submit ฟอร์มที่ถูกต้องโดยไม่ต้องระบุ form ID
• Validate number input ก่อนส่งฟอร์มเฉพาะฟอร์มที่เกี่ยวข้อง