Đối tượng Input Image trong HTML DOM

Đối tượng Input Image đại diện cho <input type="image"> - nút submit dạng hình ảnh. Khi nhấp, nó gửi form kèm tọa độ nhấp chuột (x, y) relative đến góc trên-trái của ảnh.

Tạo input image động

var imgInput = document.createElement("INPUT");
imgInput.setAttribute("type", "image");
imgInput.setAttribute("src", "url_anh.jpg");

Các thuộc tính chính

Thuộc tính	Mô tả
alt	Văn bản thay thế (bắt buộc cho accessibility).
autofocus	Tự động focus khi tải trang.
defaultValue	Giá trị mặc định (ít dùng cho type=image).
disabled	Vô hiệu hóa nút.
form	Form chứa nút (chỉ đọc).
formAction	Ghi đè `action` của form khi submit bằng nút này.
formEnctype	Ghi đè `enctype` của form.
formMethod	Ghi đè `method` của form (GET/POST).
formNoValidate	Bỏ qua validation form khi submit bằng nút này.
formTarget	Ghi đè `target` của form (_blank, _self...).
height	Chiều cao hiển thị ảnh (px).
name	Tên nút (gửi kèm tọa độ x.y).
src	URL hình ảnh hiển thị.
type	Luôn là "image" (chỉ đọc).
value	Giá trị ẩn (ít dùng).
width	Chiều rộng hiển thị ảnh (px).

Ví dụ: Tạo nút submit dạng ảnh

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; background: #363946; color: white; font-family: sans-serif; padding: 20px; }
        .btn {
            background-color: #dc3545; border: none; color: white;
            padding: 10px 20px; border-radius: 25px; width: 60%;
            margin: 20px auto; display: block; cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Ví dụ DOM Input Image Object</h1>
    <button onclick="createImageBtn()" class="btn">Tạo nút submit dạng ảnh</button>
    <script>
        function createImageBtn() {
            var imgInput = document.createElement("INPUT");
            imgInput.setAttribute("type", "image");
            imgInput.setAttribute("src", "https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg");
            imgInput.setAttribute("alt", "Submit");
            imgInput.style.width = "100px";
            document.body.appendChild(imgInput);
        }
    </script>
</body>
</html>

Kết quả

Trước khi nhấn:

Đối tượng Input Image trong HTML DOM

Sau khi nhấn - nút submit dạng ảnh JDBC logo:

Đối tượng Input Image trong HTML DOM

⚠️ Đặc điểm quan trọng:

Gửi form kèm name.x và name.y (tọa độ nhấp).
Phải có thuộc tính alt để tuân thủ accessibility.
Thuộc tính formAction, formMethod... cho phép một form có nhiều nút submit đến endpoint khác nhau.