ট্যাগ লেবেল
ট্যাগ label ইনপুট ফিল্ডের জন্য একটি লেবেল নির্দিষ্ট করে
যেমন input,
textarea,
select
ইত্যাদি।
লেবেলটি for অ্যাট্রিবিউট ব্যবহার করে একটি নির্দিষ্ট ইনপুট
ফিল্ডের সাথে সংযুক্ত হয়। এতে
সংযুক্ত ইনপুট ফিল্ডের id
অ্যাট্রিবিউটের মান উল্লেখ করা উচিত। এছাড়াও
লেবেলটি উপাদানের সাথে সংযুক্ত হয় যদি সেই
উপাদানটি label ট্যাগের ভিতরে রাখা হয়। এই
ক্ষেত্রে for অ্যাট্রিবিউট নির্দিষ্ট করার প্রয়োজন নেই। আরও ভাল বোঝার জন্য উদাহরণগুলি দেখুন।
লেবেলে ক্লিক করলে এটির সাথে সংযুক্ত চেকবক্স বা রেডিও বাটন তাদের অবস্থা পরিবর্তন করবে চেকড থেকে আনচেকডে এবং তদ্বিপরীত। এই ক্ষেত্রে লেবেলটি সুবিধার জন্য প্রয়োজন: ছোট ফর্ম উপাদানগুলিতে কার্সর দিয়ে ক্লিক করা কঠিন, কিন্তু একটি দীর্ঘ টেক্সট সহ লেবেলে - অনেক সহজ।
লেবেলের সাথে সংযুক্ত টেক্সট ইনপুট ফিল্ড
যেমন input
এবং textarea
ইনপুট ফোকাস পাবে। ফোকাস
- হল যখন কার্সর ইনপুট ফিল্ডে জ্বলজ্বল করে,
এই ক্ষেত্রে, আপনি যদি কিছু লিখতে শুরু করেন
কীবোর্ডে - টেক্সট এই ফিল্ডে প্রবেশ করবে
(ফোকাসের উন্নত বোঝার জন্য focus
সিউডোক্লাস দেখুন)।
label লেবেল ব্যবহার করা যেতে পারে
চেকবক্স
বা রেডিও
বাটন অনুকরণ করার জন্য। এটি প্রয়োজন
চেকবক্স বা রেডিওকে নিজস্ব ডিজাইনে তৈরি করতে (যা
CSS-এ নিষিদ্ধ, কিন্তু কৌশলী পদ্ধতি ব্যবহার করে
সম্ভব)।
অ্যাট্রিবিউট
| অ্যাট্রিবিউট | বর্ণনা |
|---|---|
for |
এই অ্যাট্রিবিউটে id অ্যাট্রিবিউটের মান উল্লেখ করা উচিত
সেই ইনপুট ফিল্ডের যার সাথে label লেবেলটি সংযুক্ত।
|
accesskey |
একটি হটকি নির্দিষ্ট করে, যার সাহায্যে লেবেলের সাথে সংযুক্ত
(for অ্যাট্রিবিউটের মাধ্যমে) ফর্ম উপাদানে যাওয়া যাবে।
বিস্তারিত জানার জন্য accesskey অ্যাট্রিবিউট দেখুন।
|
উদাহরণ . চেকবক্স
আসুন checkbox
ফ্ল্যাগবক্সে for অ্যাট্রিবিউট ব্যবহার করে একটি লেবেল সংযুক্ত করি।
লেবেলে ক্লিক করুন এবং আপনি ফ্ল্যাগবক্সের অবস্থার পরিবর্তন দেখতে পাবেন
চেকড থেকে আনচেকডে এবং তদ্বিপরীত:
html<input type="checkbox" id="checkbox">
<label for="checkbox">আমি id checkbox সহ চেকবক্সের সাথে সংযুক্ত।</label>
Результат:
উদাহরণ . label এর ভিতরে
এবং এখন for অ্যাট্রিবিউটের মাধ্যমে লেবেল সংযুক্ত না করে
উপাদানগুলিকে সরাসরি label ট্যাগের ভিতরে রাখি,
এই ক্ষেত্রে label-এর টেক্সটে ক্লিক করলে
উপাদানটি সক্রিয় হবে:
html<label><input type="checkbox"> লেবেল</label>
Результат:
উদাহরণ . টেক্সট ইনপুট ফিল্ড
আসুন input
ট্যাগে for অ্যাট্রিবিউট ব্যবহার করে একটি লেবেল সংযুক্ত করি।
লেবেলে ক্লিক করলে ইনপুট ফিল্ডটি ফোকাস পাবে।
এই ক্ষেত্রে ফিল্ডে থাকা টেক্সট
(value অ্যাট্রিবিউট ব্যবহার করে যোগ করা হয়েছে)
হাইলাইট করা হবে। যদি কিছু লিখতে শুরু করেন
কীবোর্ডে - এই টেক্সট মুছে যাবে।
হাইলাইট সরানোর জন্য, টেক্সট মুছবেন না, এটি করতে পারেন
ইনপুট ফিল্ডে মাউস ক্লিক করে: ফোকাস
এই ক্ষেত্রে অদৃশ্য হবে না, কিন্তু হাইলাইটটি অদৃশ্য হয়ে যাবে:
html<input type="text" id="input1" value="কিছু টেক্সট">
<label for="input1">আমি id input1 সহ ইনপুটের সাথে সংযুক্ত।</label>
Результат:
আরও দেখুন
-
ট্যাগ
legend,
যা ফিল্ড গ্রুপিংয়ের উপরে একটি ক্যাপশন নির্দিষ্ট করে