HTML DOM Input Image Object: ปุ่มส่งฟอร์มแบบรูปภาพ

HTML DOM Input Image Object แทนอิลิเมนต์ <input type="image"> ใช้สร้างปุ่มส่งฟอร์ม (submit button) ที่เป็นรูปภาพ

รูปแบบการสร้าง (Syntax)

var imageInput = document.createElement("INPUT");
imageInput.setAttribute("type", "image");

คุณสมบัติหลัก (Properties)

คุณสมบัติ	คำอธิบาย
alt	คืนค่าและกำหนดข้อความทางเลือก (alt text)
autofocus	คืนค่าและกำหนดโฟกัสอัตโนมัติ
defaultValue	คืนค่าและกำหนดค่าเริ่มต้น
disabled	คืนค่าและกำหนดสถานะปิดใช้งาน
form	คืนค่ารีเฟอร์เรนซ์ของฟอร์มที่ครอบคลุม
formAction	คืนค่าและกำหนด action URL เฉพาะปุ่มนี้ (override form action)
formEnctype	คืนค่าและกำหนด enctype เฉพาะปุ่มนี้
formMethod	คืนค่าและกำหนด method เฉพาะปุ่มนี้ (GET/POST)
formNoValidate	คืนค่าและกำหนดข้าม validation เฉพาะปุ่มนี้
formTarget	คืนค่าและกำหนด target เฉพาะปุ่มนี้ (_blank, _self, ฯลฯ)
height	คืนค่าและกำหนดความสูงรูปภาพ
name	คืนค่าและกำหนดแอตทริบิวต์ name
src	คืนค่าและกำหนดที่อยู่รูปภาพ (จำเป็น)
type	คืนค่า "image" (อ่านอย่างเดียว)
value	คืนค่าและกำหนดค่า value attribute
width	คืนค่าและกำหนดความกว้างรูปภาพ

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

สร้างปุ่มส่งฟอร์มแบบรูปภาพ:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; background-color: #363946; color: #fff; }
        .btn { background-color: #db133a; border: none; height: 2rem; border-radius: 50px; width: 60%; margin: 2rem auto; display: block; color: #fff; outline: none; cursor: pointer; }
    </style>
</head>
<body>
    <h1>ตัวอย่าง DOM Input Image Object</h1>
    <button onclick="createIframe()" class="btn">สร้างปุ่มส่งแบบรูปภาพ</button>
    <script>
        function createIframe() {
            var imageInput = document.createElement("INPUT");
            imageInput.setAttribute("type", "image");
            imageInput.setAttribute("src", "https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg");
            document.body.appendChild(imageInput);
        }
    </script>
</body>
</html>

คุณสมบัติ form* (formAction, formMethod, ฯลฯ)

คุณสมบัติเหล่านี้ช่วยให้ปุ่มรูปภาพแต่ละปุ่มในฟอร์มเดียวกันสามารถมีพฤติกรรมต่างกันได้ (ส่งไป URL ต่างกัน, method ต่างกัน) โดยไม่ต้องใช้ JavaScript