HTML বোতাম ট্যাগটি একটি HTML ফর্মের মধ্যে একটি ক্লিকযোগ্য বোতাম তৈরি করতে ব্যবহৃত হয়। এটি একটি ব্যবহারকারীকে একটি ওয়েবসাইটে তথ্য জমা দিতে দেয়। বোতামের স্টাইল CSS দিয়ে নিয়ন্ত্রণ করা যায়।
আপনি যখন একটি ওয়েব পৃষ্ঠায় একটি ফর্ম তৈরি করছেন, তখন আপনাকে একটি ক্লিকযোগ্য বোতাম তৈরি করতে হবে যাতে একজন ব্যবহারকারী একটি ফর্ম জমা দিতে পারে। উদাহরণস্বরূপ, আপনার কাছে একটি ইকমার্স সাইটে একটি অর্ডার ফর্ম থাকতে পারে যা একজন ব্যবহারকারীর কাছ থেকে বিতরণ তথ্য সংগ্রহ করে। ব্যবহারকারী ফর্মগুলি পূরণ করার পরে, তাদের তথ্য জমা দেওয়ার জন্য তাদের ক্লিক করার জন্য একটি বোতাম থাকা উচিত৷
সেখানেই HTML <button> ট্যাগ আসে। বোতাম ট্যাগটি HTML এ ব্যবহার করা হয় একটি HTML ফর্মের মধ্যে একটি ক্লিকযোগ্য বোতাম তৈরি করতে এবং ব্যবহারকারীকে একটি ওয়েবসাইটে তথ্য জমা দিতে সক্ষম করে।
এই টিউটোরিয়ালে, আমরা আলোচনা করতে যাচ্ছি কিভাবে <button> ব্যবহার করতে হয় HTML-এ ট্যাগ করুন . এছাড়াও আমরা একটি কাস্টম বোতাম তৈরি করতে আপনি যে বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন সেগুলি নিয়ে আলোচনা করব এবং এই বৈশিষ্ট্যগুলির কয়েকটি উদাহরণ অন্বেষণ করব৷
HTML ফর্ম রিফ্রেসার
HTML একটি ওয়েব পৃষ্ঠায় বিভিন্ন ধরণের ব্যবহারকারীর ইনপুট যেমন নাম, ফোন নম্বর বা ঠিকানা সংগ্রহ করতে ফর্মগুলি ব্যবহার করা হয়৷
প্রতিটি ফর্মে ইনপুট উপাদান রয়েছে যা ব্যবহারকারীদের ওয়েবসাইটে তথ্য জমা দেওয়ার অনুমতি দেয়। উদাহরণস্বরূপ, একটি ওয়েব পৃষ্ঠায় একটি অর্ডার ফর্ম থাকতে পারে যাতে ব্যবহারকারীর নাম, জন্ম তারিখ, ক্রেডিট কার্ডের তথ্য এবং আরও অনেক কিছু সংগ্রহ করার জন্য ফর্ম উপাদান থাকে৷
<form> ট্যাগ HTML-এ একটি ফর্ম তৈরি করতে ব্যবহৃত হয় . এখানে <form> এর একটি সহজ উদাহরণ ট্যাগ একটি ফর্ম তৈরি করতে ব্যবহার করা হচ্ছে যা ব্যবহারকারীর নাম সংগ্রহ করে:
একটি ফর্ম ট্যাগে একাধিক <input> অন্তর্ভুক্ত থাকতে পারে ট্যাগ, বা অন্যান্য ব্যবহারকারীর ইনপুট উপাদান যেমন নির্বাচন বাক্স। উপরন্তু, একটি ফর্ম একটি <button> অন্তর্ভুক্ত করতে হবে ট্যাগ, যা ক্লিক করা হলে, ওয়েবসাইটে ব্যবহারকারীর তথ্য জমা দেবে।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
HTML বোতাম
<button> ট্যাগ আপনাকে HTML-এর মধ্যে একটি ক্লিকযোগ্য বোতাম তৈরি করতে দেয় ফর্ম উদাহরণস্বরূপ, যদি আপনার কাছে অর্থপ্রদানের তথ্য সংগ্রহ করে এমন একটি ফর্ম থাকে, তাহলে আপনার কাছে একটি <button> থাকতে পারে ফর্মের শেষে যাতে একজন ব্যবহারকারী আপনার সাইটে সেই ডেটা জমা দিতে পারে।
<button> ট্যাগের একটি স্টার্ট এবং এন্ড ট্যাগ থাকতে হবে এবং type এর জন্য একটি মানও অন্তর্ভুক্ত করা উচিত বৈশিষ্ট্য type অ্যাট্রিবিউট, যেমন আমরা পরে আলোচনা করব, ফর্মটি বলে দেয় কি ধরনের বোতাম রেন্ডার করা উচিত।
এখানে HTML-এর একটি উদাহরণ দেওয়া হল <button> ট্যাগ ইন অ্যাকশন:
ওয়েব পৃষ্ঠায় আমাদের বোতামটি কীভাবে প্রদর্শিত হয় তা এখানে:
এখন যেহেতু আমাদের ওয়েব পৃষ্ঠায় একটি বোতাম রয়েছে, একজন ব্যবহারকারী তাদের পূরণ করা ফর্মে প্রবেশ করা তথ্য জমা দিতে সক্ষম হবেন৷
<button> ট্যাগ সমস্ত প্রধান ব্রাউজারে সমর্থিত, যার মানে আপনি ব্রাউজার সামঞ্জস্যের বিষয়ে চিন্তা না করেই এটি ব্যবহার করতে পারেন। যাইহোক, এটা লক্ষণীয় যে বিভিন্ন ব্রাউজার <button> ব্যাখ্যা করে ভিন্নভাবে ট্যাগ করুন। উদাহরণ স্বরূপ, ইন্টারনেট এক্সপ্লোরার, সংস্করণ 9 এর আগে, <button>-এর ওপেনিং এবং ক্লোজিং ট্যাগের মধ্যে পাঠ্য জমা দেবে। উপাদান, যেখানে অন্যান্য ব্রাউজার value এর বিষয়বস্তু পাঠায় বৈশিষ্ট্য।
HTML বোতাম ট্যাগ বৈশিষ্ট্যগুলি
HTML <button> ট্যাগটিতে বেশ কয়েকটি বৈশিষ্ট্য রয়েছে যা একটি কাস্টম বোতাম তৈরি করতে ব্যবহার করা যেতে পারে। এছাড়াও, <button> ট্যাগ HTML5-এ গ্লোবাল অ্যাট্রিবিউট সমর্থন করে . আসুন মূল HTML অন্বেষণ করি <button> ট্যাগ অ্যাট্রিবিউটের গভীরতা।
অটোফোকাস
autofocus বৈশিষ্ট্য নির্দিষ্ট করতে ব্যবহৃত হয় যে ওয়েব পেজ লোড হলে একটি বোতাম স্বয়ংক্রিয়ভাবে ফোকাস গ্রহণ করবে। এখানে autofocus-এর সিনট্যাক্স রয়েছে বৈশিষ্ট্য:
অক্ষম
disabled বৈশিষ্ট্য বোতামটি নিষ্ক্রিয় করে, যার অর্থ ব্যবহারকারীরা উপাদানটির সাথে যোগাযোগ করতে পারে না। এখানে disabled-এর সিনট্যাক্স রয়েছে বৈশিষ্ট্য:
আপনি নীচে দেখতে পাচ্ছেন, আমাদের বোতামটি ধূসর হয়ে গেছে এবং ক্লিক করা যাবে না:
ফর্ম
form একটি ফর্মের সাথে একটি বোতাম উপাদান লিঙ্ক করতে attribute ব্যবহার করা হয়। form এর মান বৈশিষ্ট্য id এর সমান হওয়া উচিত যে ফর্মের সাথে ফর্মটি সম্পর্কিত। সাবমিট বোতামটিকে আমাদের pizza-এ লিঙ্ক করে ফর্ম অ্যাট্রিবিউটের একটি উদাহরণ এখানে দেওয়া হল ফর্ম:
form attribute আমাদের বোতামটিকে ফর্মের সাথে id মান pizza এর সাথে সংযুক্ত করেছে . সুতরাং, যখন আমরা আমাদের বোতামে ক্লিক করি, আমাদের ফর্মটি আইডি pizza সহ জমা দেওয়া হবে।
গঠন
formaction একটি প্রোগ্রামের URL নির্দিষ্ট করে যা বোতাম দ্বারা জমা দেওয়া তথ্য প্রক্রিয়া করবে। এই বৈশিষ্ট্যটি শুধুমাত্র type হলেই ব্যবহার করা যেতে পারে আপনার বোতামের বৈশিষ্ট্য submit এর সমান .
এখানে formaction এর একটি উদাহরণ ব্যবহারে বৈশিষ্ট্য:
ফরমেন্সটাইপ
formenctype অ্যাট্রিবিউট নির্দিষ্ট করে কিভাবে ফর্ম ডেটা সার্ভারে জমা দেওয়ার সময় এনকোড করা উচিত। এই বৈশিষ্ট্যটি শুধুমাত্র “method=’post’ ব্যবহার করার সময় ব্যবহার করা উচিত আপনার ফর্মে বৈশিষ্ট্য।
এখানে formenctype এর একটি উদাহরণ দেওয়া হল যখন আমাদের বোতামে ক্লিক করা হয় তখন সার্ভারে প্লেইন টেক্সট পাঠাতে অ্যাট্রিবিউট ব্যবহার করা হচ্ছে:
ফর্ম পদ্ধতি
formmethod HTTP নির্দিষ্ট করতে ব্যবহৃত হয় ব্রাউজার ফর্ম জমা দেওয়ার জন্য যে পদ্ধতি ব্যবহার করবে। এই বৈশিষ্ট্যটি শুধুমাত্র “type=’submit’ এর সাথে ব্যবহার করা উচিত ” বৈশিষ্ট্য।
formmethod-এর জন্য দুটি গৃহীত মান বৈশিষ্ট্য হল get এবং post . আপনি যদি তথ্য পুনরুদ্ধার করতে চান বা একটি HTTP চালাতে চান GET ফাংশন, আপনার get ব্যবহার করা উচিত; আপনি যদি তথ্য পাঠাতে চান বা একটি HTTP চালাতে চান post ফাংশন, আপনার post ব্যবহার করা উচিত .
এখানে formmethod-এর সিনট্যাক্স রয়েছে বৈশিষ্ট্য:
ফর্ম নোভালিডেট
formnovalidate ফর্ম ডেটা জমা দেওয়ার সময় যাচাই করা উচিত নয় তা নির্দিষ্ট করতে ব্যবহৃত হয়। উদাহরণ স্বরূপ, আপনি যদি কোনো ব্যবহারকারীর ইনপুট গ্রহণ করতে চান যদিও তারা সমস্ত ক্ষেত্র পূরণ না করে থাকেন, তাহলে আপনাকে formnovalidate ব্যবহার করতে হবে বৈশিষ্ট্য।
এখানে formnovalidate এর একটি উদাহরণ কর্মে:
ফর্মটার্গেট
formtarget ফর্ম জমা দেওয়ার পরে সার্ভার যে প্রতিক্রিয়া পাঠায় তার জন্য লক্ষ্য অবস্থান নির্ধারণ করে। এই বৈশিষ্ট্যের জন্য গৃহীত মানগুলি হল:_blank , _self , _parent , _top , অথবা আপনার উফ্রেমের নাম।
এখানে formtarget-এর সিনট্যাক্স রয়েছে বৈশিষ্ট্য:
নাম
name ট্যাগ বোতামের নাম নির্দিষ্ট করতে ব্যবহার করা হয় (যা অন্য সমস্ত ফর্ম উপাদান নাম থেকে অনন্য হওয়া উচিত), এবং নিম্নলিখিত সিনট্যাক্স ব্যবহার করে:
টাইপ করুন
type ট্যাগ বোতামের ধরন নির্দিষ্ট করে। তিন ধরনের বোতাম ব্যবহার করা যেতে পারে:button , submit , এবং reset . এখানে type এর সিনট্যাক্স আছে ট্যাগ:
মান
value ট্যাগ বোতামের প্রাথমিক মান নির্দিষ্ট করে। এখানে value এর সিনট্যাক্স রয়েছে ট্যাগ:
উপসংহার
<button> ট্যাগ একটি HTML-এ একটি ক্লিকযোগ্য বোতাম তৈরি করতে ব্যবহার করা যেতে পারে ফর্ম উদাহরণস্বরূপ, যদি আপনার কাছে এমন একটি ফর্ম থাকে যা ব্যবহারকারীকে একটি পিজ্জার জন্য অর্ডার দেওয়ার অনুমতি দেয়, তাহলে আপনি একটি <button> থাকতে চাইবেন ট্যাগ যা ব্যবহারকারীকে তাদের অর্ডার সম্পর্কে তথ্য জমা দিতে সক্ষম করে যখন তারা প্রস্তুত থাকে।
এই টিউটোরিয়ালে, আমরা অন্বেষণ করেছি কিভাবে <button> ব্যবহার করতে হয় HTML-এ ট্যাগ করুন . আমরা কাস্টম বোতাম তৈরি করতে ট্যাগের সাথে ব্যবহার করা যেতে পারে এমন প্রধান বৈশিষ্ট্যগুলি নিয়েও আলোচনা করেছি এবং সেই বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করা যেতে পারে তার কয়েকটি উদাহরণ অন্বেষণ করেছি৷
এখন আপনি HTML ব্যবহার করে বোতাম তৈরি করতে প্রস্তুত <button> একজন বিশেষজ্ঞের মত ট্যাগ করুন!
