HTML বাটন ট্যাগ একটি এইচটিএমএল ফর্মের ভিতরে একটি ক্লিকযোগ্য বাটন তৈরি করতে ব্যবহৃত হয়। এটি একজন ইউজারকে ফর্মের ইনফরমেশন একটি ওয়েবসাইটে সাবমিট করতে দেয়। বাটনের স্টাইল CSS-এ কন্ট্রোল করা যায়।
যখন আপনি একটি ওয়েব পেজে ফর্ম তৈরি করেন, তখন আপনাকে একটি ক্লিকযোগ্য বাটন তৈরি করতে হবে যাতে একজন ইউজার ফর্ম সাবমিট করতে পারে। উদাহরণস্বরূপ, আপনার একটি ইকমার্স সাইটে একটি অর্ডার ফর্ম থাকতে পারে যা ইউজার থেকে ডেলিভারি ইনফরমেশন সংগ্রহ করে। ইউজার ফর্ম পূরণ করার পর, তাদের ইনফরমেশন সাবমিট করার জন্য একটি বাটন থাকা উচিত।
সেই সময় HTML <button> ট্যাগ কাজে আসে। বাটন ট্যাগ HTML-এ একটি এইচটিএমএল ফর্মের ভিতরে একটি ক্লিকযোগ্য বাটন তৈরি করতে এবং একজন ইউজারকে ফর্মের ইনফরমেশন একটি ওয়েবসাইটে সাবমিট করতে সক্ষম করতে ব্যবহৃত হয়।
এই টিউটোরিয়ালে, আমরা <button> ট্যাগ HTML-এ কীভাবে ব্যবহার করতে হয় তা আলোচনা করব। আমরা একটি কাস্টম বাটন তৈরি করতে ব্যবহার করা অ্যাট্রিবিউটগুলো এবং সেসব অ্যাট্রিবিউটের কিছু উদাহরণও এক্সপ্লোর করব।
HTML ফর্ম রিফ্রেশার
HTML ফর্ম একটি ওয়েব পেজে বিভিন্ন ধরণের ইউজার ইনপুট সংগ্রহ করতে ব্যবহৃত হয়, যেমন নাম, ফোন নম্বর, বা ঠিকানা।
প্রতিটি ফর্মে ইনপুট এলিমেন্ট থাকে যা ইউজারদের ওয়েবসাইটে ইনফরমেশন সাবমিট করতে দেয়। উদাহরণস্বরূপ, একটি ওয়েব পেজে একটি অর্ডার ফর্ম থাকতে পারে যেটি ইউজারের নাম, জন্ম তারিখ, ক্রেডিট কার্ড ইনফরমেশন, এবং আরও অনেক কিছু সংগ্রহ করে।
<form> ট্যাগ HTML-এ একটি ফর্ম তৈরি করতে ব্যবহৃত হয়। এখানে <form> ট্যাগ ব্যবহার করে একটি ফর্ম তৈরি করার একটি সিম্পল উদাহরণ যেটি একটি ইউজারের নাম সংগ্রহ করে:
<form> Name: <input type="text"> </form>
একটি ফর্ম ট্যাগে একাধিক <input> ট্যাগ, বা অন্যান্য ইউজার ইনপুট এলিমেন্ট যেমন সিলেক্ট বক্স থাকতে পারে। এছাড়া, একটি ফর্মে অবশ্যই একটি <button> ট্যাগ থাকতে হবে যা, ক্লিক হলে, একটি ইউজারের ইনফরমেশন ওয়েবসাইটে সাবমিট করবে।
HTML বাটন
<button> ট্যাগ আপনাকে একটি HTML ফর্মের ভিতরে একটি ক্লিকযোগ্য বাটন তৈরি করতে দেয়। উদাহরণস্বরূপ, যদি আপনার কাছে একটি ফর্ম থাকে যা পেমেন্ট ইনফরমেশন সংগ্রহ করে, তবে আপনার ফর্মের শেষে একটি <button> থাকতে পারে যাতে একজন ইউজার সেটি আপনার সাইটে সাবমিট করতে পারে।
<button> ট্যাগের অবশ্যই একটি স্টার্ট এবং এন্ড ট্যাগ থাকতে হবে, এবং এটিতে type অ্যাট্রিবিউটের জন্য একটি ভ্যালুও থাকতে হবে। type অ্যাট্রিবিউট, যেমন আমরা পরে আলোচনা করব, ফর্মকে বলে কী টাইপের বাটন রেন্ডার করা উচিত।
এখানে HTML <button> ট্যাগের একটি উদাহরণ:
<button type="submit" value="Sign Up">Sign Up</button>
আমাদের বাটন ওয়েব পেজে নিচের মতো দেখাবে:
এখন যেহেতু আমাদের ওয়েব পেজে একটি বাটন আছে, একজন ইউজার সেটি ক্লিক করে ফর্মে দিয়ে যেটি সে পূরণ کرده সেটি সাবমিট করতে পারবে।
<button> ট্যাগ সব বড় ব্রাউজারে সাপোর্টেড, যার মানে আপনি ব্রাউজার কম্প্যাটিবিলিটি চিন্তা ছাড়া এটি ব্যবহার করতে পারেন। যাইহোক, এটা মনে রাখা ভালো যে বিভিন্ন ব্রাউজার <button> ট্যাগ ভিন্নভাবে ইন্টারপ্রেট করে। উদাহরণস্বরূপ, ইন্টারনেট এক্সপ্লোরার, ভার্সন ৯-এর আগে, <button> এলিমেন্টের ওপেনিং এবং ক্লোজিং ট্যাগের মাঝপথের টেক্সট সাবমিট করবে, যেখানে অন্যান্য ব্রাউজার value অ্যাট্রিবিউটের কন্টেন্ট পাঠাবে।
HTML বাটন ট্যাগ অ্যাট্রিবিউট
HTML <button> ট্যাগে অনেক অ্যাট্রিবিউট থাকে যা একটি কাস্টম বাটন তৈরি করতে ব্যবহার করা যায়। এছাড়া, <button> ট্যাগ HTML5-এ গ্লোবাল অ্যাট্রিবিউটগুলো সাপোর্ট করে। চলুন প্রধান HTML <button> ট্যাগ অ্যাট্রিবিউটগুলো গভীরে জানি।
Autofocus
autofocus অ্যাট্রিবিউট নির্দিষ্ট করতে ব্যবহৃত হয় যে একটি বাটন ওয়েব পেজ লোড হলে অটোমেটিক্যালি ফোকাস পাবে। autofocus অ্যাট্রিবিউটের সিন্ট্যাক্স:
<button type="submit" autofocus>Test Button!</button>
Disabled
disabled অ্যাট্রিবিউট বাটনটি ডিজেবল করে, যার মানে ইউজাররা এলিমেন্টের সাথে ইন্টারঅ্যাক্ট করতে পারবে না। disabled অ্যাট্রিবিউটের সিন্ট্যাক্স:
<button type="submit" disabled>Test Button!</button>
নিচে আপনি দেখতে পাচ্ছেন, আমাদের বাটন গ্লে আউট করা আছে এবং ক্লিক করা যাচ্ছে না:
Form
form অ্যাট্রিবিউট একটি বাটন এলিমেন্টকে একটি ফর্মের সাথে লিঙ্ক করতে ব্যবহৃত হয়। form অ্যাট্রিবিউটের ভ্যালু সেটি যে ফর্মের সাথে সম্পর্কিত সেটির id এর সমান হওয়া উচিত। এখানে pizza ফর্মের সাথে সাবমিট বাটন লিঙ্ক করার একটি উদাহরণ:
<form id="pizza"> Flavor: <input type="text" name="flavor"> </form> <button type="submit" form="pizza">Submit Order</button>
form অ্যাট্রিবিউট আমাদের বাটনকে pizza আইডি ভ্যালু 가진 ফর্মের সাথে লিঙ্ক করেছে। সুতরাং, যখন আমরা আমাদের বাটনে ক্লিক করব, আমাদের pizza আইডি 가진 ফর্ম সাবমিট হবে।
Formaction
formaction একটি প্রোগ্রামের URL নির্দিষ্ট করে যা বাটন দ্বারা সাবমিট করা ইনফরমেশন প্রসেস করবে। এই অ্যাট্রিবিউট শুধু তখনই ব্যবহার করা যায় যখন আপনার বাটনের type অ্যাট্রিবিউট submit এর সমান হয়।
formaction অ্যাট্রিবিউট ব্যবহারের একটি উদাহরণ:
<button type="submit" formaction="https://www.ourpizzawebsite.com/submitOrder.php">Submit Order</button>
Formenctype
formenctype অ্যাট্রিবিউট নির্দিষ্ট করে ফর্ম ডেটা সার্ভারে সাবমিট হওয়ার সময় কীভাবে এনকোড করা উচিত। এই অ্যাট্রিবিউট শুধু তখনই ব্যবহার করা উচিত যখন আপনার ফর্মে “method=’post’” অ্যাট্রিবিউট ব্যবহার করা হয়।
formenctype অ্যাট্রিবিউট ব্যবহার করে আমাদের বাটন ক্লিক হলে প্লেইন টেক্সট সার্ভারে পাঠানো একটি উদাহরণ:
<button type="submit" formenctype="text/plain">Submit Order</button>
Formmethod
formmethod ব্রাউজার ফর্ম সাবমিট করতে কোন HTTP মেথড ব্যবহার করবে তা নির্দিষ্ট করতে ব্যবহৃত হয়। এই অ্যাট্রিবিউট শুধু “type=’submit’” অ্যাট্রিবিউটের সাথে ব্যবহার করা উচিত।
formmethod অ্যাট্রিবিউটের জন্য দুটি স্বীকৃত ভ্যালু হল get এবং post। আপনি যদি ইনফরমেশন রিট্রিভ করতে চান বা HTTP GET ফাংশন এক্সিকিউট করতে চান, তবে get ব্যবহার করুন; আপনি যদি ইনফরমেশন পাঠাতে চান বা HTTP POST ফাংশন এক্সিকিউট করতে চান, তবে post ব্যবহার করুন।
formmethod অ্যাট্রিবিউটের সিন্ট্যাক্স:
<button type="submit" formmethod="post">Submit Order</button>
Formnovalidate
formnovalidate নির্দিষ্ট করতে ব্যবহৃত হয় যে ফর্ম ডেটা সাবমিট হওয়ার সময় ভ্যালিডেট করা উচিত নয়। উদাহরণস্বরূপ, আপনি যদি একজন ইউজারের ইনপুট গ্রহণ করতে চান এমনকি সে সব ফিল্ড পূরণ না করলে, তবে আপনাকে formnovalidate অ্যাট্রিবিউট ব্যবহার করা উচিত।
formnovalidate কাজে লাগার একটি উদাহরণ:
<button type="submit" formnovalidate>Submit Order</button>
Formtarget
formtarget ফর্ম সাবমিট হওয়ার পর সার্ভার থেকে আসা রেসপন্সের টার্গেট লোকেশন সেট করে। এই অ্যাট্রিবিউটের স্বীকৃত ভ্যালুগুলো হল: _blank, _self, _parent, _top, অথবা আপনার uframe-এর নাম।
formtarget অ্যাট্রিবিউটের সিন্ট্যাক্স:
<button formtarget="_blank">Submit Order</button>
Name
name ট্যাগ বাটনের নাম নির্দিষ্ট করতে ব্যবহৃত হয় (যেটি অন্যান্য সব ফর্ম এলিমেন্টের নাম থেকে ইউনিক হওয়া উচিত), এবং নিচের সিন্ট্যাক্স ব্যবহার করে:
<button name="submit_order">Submit Order</button>
Type
type ট্যাগ বাটনের টাইপ নির্দিষ্ট করে। তিনটি বাটন টাইপ ব্যবহার করা যায়: button, submit, এবং reset। type ট্যাগের সিন্ট্যাক্স:
<button type="submit">Submit Order</button>
Value
value ট্যাগ বাটনের প্রাথমিক ভ্যালু নির্দিষ্ট করে। value ট্যাগের সিন্ট্যাক্স:
<button type="submit" value="Submit Order">Submit Order</button>
উপসংহার
<button> ট্যাগ একটি HTML ফর্মে একটি ক্লিকযোগ্য বাটন তৈরি করতে ব্যবহার করা যায়। উদাহরণস্বরূপ, আপনার কাছে একটি ফর্ম থাকলে যা একজন ইউজারকে পিজা অর্ডার করতে দেয়, আপনি চাইবেন একটি <button> ট্যাগ থাকে যেটি ইউজারকে তাদের অর্ডার সম্পর্কে ইনফরমেশন সাবমিট করতে দেবে যখন সে রেডি হবে।
এই টিউটোরিয়ালে, আমরা <button> ট্যাগ HTML-এ কীভাবে ব্যবহার করতে হয় তা এক্সপ্লোর করেছি। আমরা ট্যাগের সাথে কাস্টম বাটন তৈরি করতে ব্যবহার করা প্রধান অ্যাট্রিবিউটগুলো আলোচনা করেছি, এবং সেসব অ্যাট্রিবিউট কীভাবে ব্যবহার করা যায় তার কিছু উদাহরণও এক্সপ্লোর করেছি।
এখন আপনি HTML <button> ট্যাগ ব্যবহার করে বাটন তৈরি করার জন্য প্রস্তুত যেন একজন এক্সপার্ট!
