Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

HTML DOM Input Month form Property: ระบุฟอร์มของช่องเลือกเดือน

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

รูปแบบ (Syntax)

object.form

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

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

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

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

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

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

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