HTML DOM Button type প্রোপার্টি HTML <button> এলিমেন্টের সাথে যুক্ত। button এলিমেন্ট ডিফল্টভাবে type="submit" থাকে অর্থাৎ ফর্মে যেকোনো বাটনে ক্লিক করলে ফর্ম সাবমিট হবে। button type প্রোপার্টি বাটনের টাইপ সেট বা রিটার্ন করে।
সিনট্যাক্স
নিচে সিনট্যাক্স দেওয়া হলো:
button type প্রোপার্টি সেট করা:
buttonObject.type = "submit|button|reset"
এখানে, submit|button|reset হলো বাটন টাইপের মান। Submit ডিফল্টভাবে সেট থাকে।
- Submit - বাটনকে একটি সাবমিট বাটন করে।
- Button - একটি সাধারণ ক্লিকযোগ্য বাটন করে।
- Reset - ফর্ম ডেটা রিসেট করার জন্য একটি রিসেট বাটন করে।
উদাহরণ
HTML DOM button type প্রোপার্টির একটি উদাহরণ দেখি:
<!DOCTYPE html> <html> <body> <form id="Form1" action="/sample.php"> <label>First Name: <input type="text" name="fname"><br><br></label> <label>Surname: <input type="text" name="lname"><br><br></label> <button id="Button1" type="submit">Submit</button> </form> <p>Click the below button below to change the type of the above button from "submit" to "reset".</p> <button onclick="changeType()">CHANGE</button> <p id="Sample"></p> <script> function changeType() { document.getElementById("Button1").type = "reset"; document.getElementById("Sample").innerHTML = "The Submit button is now a reset button"; } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেবে:
ডিটেইলস ফিল আপ করে CHANGE-এ ক্লিক করলে:
এখন Submit-এ (যেটি এখন reset) ক্লিক করলে:
উপরের উদাহরণে:
আমরা প্রথমে দুটি টেক্সট ফিল্ড এবং type "submit" সহ একটি বাটন তৈরি করেছি যা আমাদের ডেটা সাবমিট করবে:
<label>First Name: <input type="text" name="fname"><br><br></label> <label>Surname: <input type="text" name="lname"><br><br></label> <button id="Button1" type="submit">Submit</button>
আমরা তারপর CHANGE বাটন তৈরি করেছি যা ক্লিক করলে changeType() মেথড এক্সিকিউট করবে:
<button onclick="changeType()">CHANGE</button>
changeType() মেথড এর id ব্যবহার করে বাটন এলিমেন্টটি পায় এবং এর type reset-এ সেট করে। তারপর পরিবর্তন সংক্রান্ত মেসেজটি id "Sample" সহ প্যারাগ্রাফে প্রতিফলিত হয়। এখন আপনি সাবমিট বাটনে ক্লিক করলে এটি সাবমিট করার বদলে রিসেট করবে অর্থাৎ ফর্ম ডেটা ক্লিয়ার করবে:
function changeType() { document.getElementById("Button1").type = "reset"; document.getElementById("Sample").innerHTML = "The Submit button is now a reset button"; }
