এইচটিএমএল সিএসএস বুটস্ট্রাপ জাভাস্ক্রিপ্ট জেকুয়েরি
লগইন
 

এইচটিএমএল <label> ট্যাগ


<label> ট্যাগের ব্রাউজার সাপোর্ট



এলিমেন্ট Google Chrome Edge/IE Mozila Firefox Safari Opera
<label> সকল ভার্সন সকল ভার্সন সকল ভার্সন সকল ভার্সন সকল ভার্সন




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

<input> ফিল্ডের লেভেল নির্ধারণ করার জন্য <label> এলিমেন্ট ব্যবহার করা হয়।

<label> এলিমেন্ট ইউজারের জন্য তেমন উপযোগীতা বৃদ্ধি করে না। যাইহোক এটি শুধুমাত্র মাউস ব্যবহারকারিদের জন্য একটি অতিরিক্ত সুবিধা দেয় এবং সেটি হলো ইউজার যখন <label> এলিমেন্টের টেক্সটে ক্লিক করবে তখন সেই লেভেল সংশ্লিষ্ট <input> ফিল্ডটি সিলেক্ট হয়ে যাবে।

তবে এক্ষেত্রে <label> এলিমেন্টের for এট্রিবিউট এবং <input> ফিল্ডের id এট্রিবিউটের মাধ্যমে এদেরকে সংযুক্ত করে দিতে হবে।

বিষয়টি জটিল মনে হলেও, এটি জটিল কোন ব্যাপার নয়। নিচের উদাহরণটি লক্ষ্য করলে এটি খুব সহজেই বুঝতে পারবেন।



নিচের উদাহরণে <label> এলিমেন্ট ও রেডিও ইনপুট ফিল্ডের ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<body>

  <p>Select you product:</p>
  <form action="action_page.php">
    <input type="radio" name="product" id="hp" value="HP">
    <label for="hp">HP</label><br>
    <input type="radio" name="product" id="apple" value="Apple">
    <label for="apple">Apple</label><br>
    <input type="radio" name="product" id="lenovo" value="Lenovo">
    <label for="lenovo">Lenovo</label><br>
    <input type="submit" value="Submit">
  </form>

</body>
</html>

ফলাফল





এট্রিবিউট

নিচের টেবিলে <label> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ

এট্রিবিউট ভ্যালু বর্ণনা
for element_id <label> এলিমেন্টটি কোন ফরম এলিমেন্টের সাথে সংযুক্ত হবে সেটি নির্ধারণ করে।
form form_id <label> সংশ্লিষ্ট এক বা একাধিক ফরম কে নির্দেশ করে।


<label> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?

গ্লোবাল এট্রিবিউট ইভেন্ট এট্রিবিউট
সাপোর্ট করে সাপোর্ট করে


<label> ট্যাগের ডিফল্ট স্টাইল

অধিকাংশ ব্রাউজারেই <label> এলিমেন্ট নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ

label {
    cursor: pointer;
  }


সম্পর্কিত পেজ