HTML អត្តបទសំខាន់ - ស្គាល់សញ្ញា <button>

  • পূর্ববর্তী পৃষ্ঠা <br>
  • পরবর্তী পৃষ্ঠা <canvas>

সংজ্ঞা ও ব্যবহার

<button> ট্যাগ দিয়ে ক্লিক করা যায় এমন বাটন

এখানে <button> এমন একটি এলিমেন্টের ভিতরে, আপনি টেক্সট রাখতে পারেন (এবং <i>、<b>、<strong>、<br>、<img> এমন ট্যাগ)। এটি ব্যবহার করা হয় <input> এমন কিছু যা তৈরি করা বাটন করতে পারে না!

সুঝাওয়া:নির্দেশ করুন <button> ইলেকট্রন type বৈশিষ্ট্যদ্বারা দেখুন

সুঝাওয়া:আপনি সহজেই CSS-এর মাধ্যমে বাটনকে শৈলীকরণ করতে পারেন! নিচের উদাহরণ দেখুন বা আমাদের CSS বাটন টিউটোরিয়াল.

বিস্তারিত বর্ণনা

<button> কন্ট্রোল সহ <input type="button"> আরও শক্তিশালী কার্যক্ষমা ও আরও সমৃদ্ধ সামগ্রী প্রদান করে<button> তুলনায় </button> ট্যাগের মধ্যে সব সামগ্রী বাটনের সামগ্রী, যার মধ্যে কোনও স্বীকৃত টেক্সট থাকতে পারে, যেমন টেক্সট ও মাল্টিমিডিয়া সামগ্রী

একমাত্র বন্ধনীভুক্ত ইমেজ ম্যাপিং ব্যবহার করা না উচিত, কারণ তা মাউস ও কীবোর্ড ব্যবহারকারীকে বিঘ্নিত করতে পারে

সবসময় বাটনকে নির্দেশ করুন type বৈশিষ্ট্য. "button"আর অন্যান্য ব্রাউজারগুলিতে (যেমন W3C নিয়মনীতির) ডিফল্ট মান "submit".

আরও দেখুন:

HTML DOM রেফারেন্স ম্যানুয়েল:Button অবজেক্ট

CSS টিউটোরিয়াল:বাটনের শৈলী নির্ধারণ

উদাহরণ

এভাবে ক্লিকযোগ্য বাটনকে ট্যাগ করুন:

<button type="button">ক্লিক করুন!</button>

স্বয়ং পরীক্ষা করুন

সুঝাওয়া:পানেল নিচে আরও উদাহরণ পাবে

বৈশিষ্ট্য

বৈশিষ্ট্য মান বর্ণনা
autofocus autofocus নির্দেশ করুন বাটনটি পানেল লোড হওয়ার সময় স্বয়ংক্রিয়ভাবে ফোকাস পাবে
disabled disabled নির্দেশ করুন বাটনটি নিষ্ক্রিয় করা হবে
form form_id নির্দেশ করুন বাটন কোন ফর্মের অংশ
formaction URL

নির্দেশ করুন ফর্ম সম্পন্ন হওয়ার সময় ফর্ম ডাটা কোথায় পাঠানো হবে

শুধুমাত্র type="submit"-র জন্য প্রযোজ্য
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

নির্দেশ করুন ফর্ম ডাটা সার্ভারে পাঠানোর আগে কিভাবে এনকোড করা হবে

শুধুমাত্র type="submit"-র জন্য প্রযোজ্য
formmethod
  • get
  • post

নির্দেশ করুন ফর্ম ডাটা কিভাবে পাঠানো হবে (কোন HTTP পদ্ধতি ব্যবহার করা হবে)

শুধুমাত্র type="submit"-র জন্য প্রযোজ্য
formnovalidate formnovalidate

নির্দেশ করুন ফর্ম সম্পন্ন হওয়ার সময় ফর্ম ডাটা নিরীক্ষণ করা হবে না

শুধুমাত্র type="submit"-র জন্য প্রযোজ্য
formtarget
  • ফ্রেম নাম

নির্দেশ করুন ফর্ম সম্পন্ন হওয়ার পরে কোথায় প্রতিক্রিয়া দিতে হবে

শুধুমাত্র type="submit"-র জন্য প্রযোজ্য
name নাম নির্দেশ করুন বাটনের নাম
popovertarget element_id নির্দেশ করুন যে পপআপ উইন্ডো ইলেকট্রন
popovertargetaction
  • hide
  • show
  • toggle
 বাটন ক্লিক করা হলে প্রদর্শিত উপাদানকে কীভাবে করা হবে
type
  • button
  • reset
  • submit
 বাটনের ধরন নির্ধারণ করে
value লেখা বাটনের প্রাথমিক মান নির্ধারণ করে

গ্লোবাল অ্যাট্রিবিউট

<button> ট্যাগটি এছাড়াও HTML-তে গ্লোবাল অ্যাট্রিবিউট.

ইভেন্ট অ্যাট্রিবিউট

<button> ট্যাগটি এছাড়াও HTML-তে ইভেন্ট অ্যাট্রিবিউট.

ডিফল্ট সিএসএস সেট

কিছুই নেই。

আরও উদাহরণ

উদাহরণ 2

CSS দিয়ে বাটন শৈলী সেট করুন:

!DOCTYPE html
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* গ্রীন */
.button2 {background-color: #008CBA;} /* ব্লু */
</style>
</head>
<body>
<button class="button button1">গ্রীন</button>
<button class="button button2">ব্লু</button>
</body>
</html>

স্বয়ং পরীক্ষা করুন

উদাহরণ 2

CSS দিয়ে বাটন শৈলী সেট করুন (হভার ইফেক্ট সহ):

!DOCTYPE html
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}
.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: white;
}
</style>
</head>
<body>
<button class="button button1">গ্রীন</button>
<button class="button button2">ব্লু</button>
</body>
</html>

স্বয়ং পরীক্ষা করুন

ব্রাউজার সমর্থন

Chrome Edge Firefox স্যাফারি অপেরা
Chrome Edge Firefox স্যাফারি অপেরা
সমর্থন সমর্থন সমর্থন সমর্থন সমর্থন
  • পূর্ববর্তী পৃষ্ঠা <br>
  • পরবর্তী পৃষ্ঠা <canvas>