HTML <label> ট্যাগ

  • পূর্ববর্তী পৃষ্ঠা <kbd>
  • পরবর্তী পৃষ্ঠা <legend>

বিবরণ ও ব্যবহার

<label> লেবেল এলিমেন্ট ইনপুট এলিমেন্টকে লেবেল (ট্যাগ) প্রদান করে

লেবেল এলিমেন্ট ব্যবহারকারীদের জন্য কোনো বিশেষ প্রভাব প্রদর্শন করবে না। কিন্তু, মাউস ব্যবহারকারীদের জন্য ব্যবহারিকতা উন্নত করে। আপনি যদি লেবেল এলিমেন্টের মধ্যে টেক্সট ক্লিক করেন, তবে এই কন্ট্রোল চালু হবে। অর্থাৎ, যখন ব্যবহারকারী এই লেবেলটি চিহ্নিত করেন, তখন ব্রাউজার স্বয়ংক্রিয়ভাবে লেবেলের সাথে সংযুক্ত ফর্ম কন্ট্রোলের ফোকাস নিয়ে যাবে。

<label> লেবেল এলিমেন্ট for অ্যাট্রিবিউট এটা সংশ্লিষ্ট এলিমেন্টের id অ্যাট্রিবিউটের সাথে একই হতে হবে。

<label> একাধিক এলিমেন্টকে লেবেল (ট্যাগ) প্রদান করতে লেবেল ব্যবহার করা যেতে পারে:

উপরোক্ত এলিমেন্ট এবং লেবেলের সঠিক ব্যবহার নিম্নলিখিত ব্যবহারকারীদের পক্ষে সুবিধা প্রদান করবে:

  • সক্রিয় অবস্থায় থাকা সক্রিয় এলিমেন্টের জন্য সক্রিয় রিডিং হিসাবে পড়া হবে
  • ক্লিক করেন <label> অত্যন্ত ছোট অঞ্চল (যেমন চেকবক্স) এক্সক্লুজিভলি ক্লিক করার কঠিনতা সহ্যক ব্যবহারকারী - কারণ যখন ব্যবহারকারী

অন্যান্য দেখুন:

HTML DOM পরিচ্ছেদLabel অবজেক্ট

উদাহরণ

তিনটি label-সহ সিঙ্কল সিলেক্টর:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="জমা দিন">
</form>

আপনার নিজের করে প্রয়াস করুন

পরামর্শ ও মন্তব্য

পরামর্শ:<label> for বৈশিষ্ট্যটি সংশ্লিষ্ট উপাদানের id বৈশিষ্ট্যটির সমান হতেই তাদের মধ্যে যোগাযোগ স্থাপন করা যাবে। এছাড়াও, উপাদানকে <label> উপাদানের ভিতরে ট্যাগকে উপাদানের সাথে বাঁধা রাখা হবে

বৈশিষ্ট্য

বৈশিষ্ট্য মান বর্ণনা
for উপাদান id label কে কোন ফর্ম উপাদানের সাথে বাঁধা রাখবে
form ফর্ম id label ক্ষেত্রটি কোন ফর্মের অংশ হিসাবে নির্দিষ্ট করে

সার্বভৌম বৈশিষ্ট্য

<label> এই ট্যাগও HTML-এর সার্বভৌম বৈশিষ্ট্য

ঘটনা বৈশিষ্ট্য

<label> এই ট্যাগও HTML-এর ঘটনা বৈশিষ্ট্য

ডিফল্ট CSS সেটিং

অধিকাংশ ব্রাউজার নিম্নলিখিত ডিফল্ট মান দেখাবে <label> উপাদান:

label {
  cursor: default;
}

আপনার নিজের করে প্রয়াস করুন

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
সমর্থন সমর্থন সমর্থন সমর্থন সমর্থন
  • পূর্ববর্তী পৃষ্ঠা <kbd>
  • পরবর্তী পৃষ্ঠা <legend>