HTML DOM Input Button অবজেক্ট

HTML DOM Input Button অবজেক্ট একটি <input> এলিমেন্টকে রিপ্রেজেন্ট করে যার type অ্যাট্রিবিউট হলো "button", "submit" বা "reset"।

সিনট্যাক্স: বাটন অবজেক্ট তৈরি করা

var newButton = document.createElement("INPUT");
newButton.setAttribute("type", "button"); // বা "submit", "reset"

Input Button অবজেক্টের প্রধান প্রপার্টি

উদাহরণ: ক্লিক করলে বাটন রেপ্লিকেট (Replicate) করা

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Input Button Object</title>
    <style>
        body { text-align: center; }
        .btn {
            display: block; margin: 1rem auto;
            background-color: #db133a; color: #fff;
            border: 1px solid #db133a; padding: 0.5rem;
            border-radius: 50px; width: 60%; font-weight: bold;
        }
        .show-msg { font-weight: bold; font-size: 1.4rem; color: #ffc107; }
    </style>
</head>
<body>
    <h1>Input Button Object Example</h1>
    <input type="button" onclick="createReplica()" class="btn" value="Click to replicate me">
    <div class="show-msg"></div>

    <script>
        function createReplica() {
            var newButton = document.createElement("INPUT");
            newButton.setAttribute("type", "button");
            newButton.setAttribute("class", "btn");
            newButton.setAttribute("value", "Click to replicate me");
            newButton.setAttribute("onclick", "createReplica()");
            document.body.appendChild(newButton);
        }
    </script>
</body>
</html>

আউটপুট

প্রথম বাটনে ক্লিক করলে প্রতিবার একই স্টাইল ও ফাংশন্যালিটিয়ुक्त একটি নতুন বাটন পেজে যোগ হবে।

মहত্বপূর্ণ নোট

• <input type="button"> এর কোন ডিফল্ট আচরণ নেই (সাবমিট/রিসেট না হয়)। এটি শুধু জাভাস্ক্রিপ্ট ট্রিগারের জন্য।
• আধুনিক ডেভেলপমেন্টে <button> এলিমেন্ট ব্যবহার করা ভালো প্র্যাকটিস (আরও ফ্লেক্সিবল স্টাইলিং ও কন্টেন্ট সাপোর্ট করে)।
• onclick এট্রিবিউটের বদলে addEventListener ব্যবহার করা সুপারিশ করা হয়।