<লেবেল> এ = "" বৈশিষ্ট্যের জন্য এইচটিএমএল কী?

Question 1

আমি এটি jQuery এ দেখেছি - এটি কী করে?

<label for="name"> text </label>
<input type="text" name="name" value=""/>

Question 2

<label>কোনও <input>উপাদানটির সাথে যুক্ত হতে , আপনাকে <input>একটি idবৈশিষ্ট্য দেওয়া দরকার। <label>তারপর একটি প্রয়োজন forঅ্যাট্রিবিউট যার valueইনপুট এর হিসাবে একই id:

<label for="username">Click me</label>
<input type="text" id="username">

forঅ্যাট্রিবিউটে একটি সহযোগীদের <label>একটি সঙ্গে <input>উপাদান; যা কিছু বড় সুবিধা দেয়:
১. লেবেল পাঠ্যটি কেবল তার সংশ্লিষ্ট পাঠ্য ইনপুটটির সাথে চাক্ষুষভাবে সম্পর্কিত নয়; এটি প্রোগ্রামের সাথে এটির সাথেও যুক্ত। এর অর্থ হ'ল, উদাহরণস্বরূপ, কোনও স্ক্রিন রিডার যখন লেবেলটি ফর্ম ইনপুটটির উপর ফোকাস করবে তখন একটি সহায়ক প্রযুক্তি ব্যবহারকারীর পক্ষে কী ডেটা প্রবেশ করা উচিত তা বোঝা সহজ করে তোলে।
২. আপনি ইনপুটটিকে ফোকাস / সক্রিয় করতে সংশ্লিষ্ট লেবেলে ক্লিক করতে পারেন , পাশাপাশি ইনপুটটিও করতে পারেন। এই বর্ধিত হিট অঞ্চলটি টাচ-স্ক্রিন ডিভাইস ব্যবহার করে এমন ব্যক্তিরাও যাতে ইনপুট সক্রিয় করার চেষ্টা করছে তাদের পক্ষে একটি সুবিধা সরবরাহ করে।

বিকল্পভাবে , আপনি <input>সরাসরি এর ভিতরে বাসা বাঁধতে পারেন, সেক্ষেত্রে সংযুক্তি জড়িত থাকার <label>ক্ষেত্রে forএবং idবৈশিষ্ট্যের প্রয়োজন হয় না:

<label>Click me <input type="text"></label>

দ্রষ্টব্য:
ওয়ান inputএকাধিক লেবেল যুক্ত করা যেতে পারে।
যখন একটি <label>ক্লিক করা হয় বা আলতো চাপানো হয় এবং এটি একটি ফর্ম নিয়ন্ত্রণের সাথে যুক্ত হয়, ফলস্বরূপ ক্লিক ইভেন্টটি সম্পর্কিত নিয়ন্ত্রণের জন্য উত্থাপিত হয়।

অ্যাক্সেসযোগ্যতার উদ্বেগ

ইন্টারেক্টিভ উপাদান যেমন অ্যাঙ্কর বা বোতাম একটি লেবেলের ভিতরে রাখবেন না। এটি করা, লোকেদের সাথে লেবেলের সাথে সম্পর্কিত ফর্ম ইনপুটটি সক্রিয় করা মানুষের পক্ষে অসুবিধা সৃষ্টি করে।

শিরোনাম

একটি শিরোনামের মধ্যে শিরোনাম উপাদান স্থাপন <label>অনেক ধরণের সহায়ক প্রযুক্তিতে হস্তক্ষেপ করে, কারণ শিরোনাম সাধারণত নেভিগেশন সহায়তা হিসাবে ব্যবহৃত হয়। যদি লেবেলের পাঠ্যটি দৃষ্টিশক্তিভাবে সামঞ্জস্য করা দরকার হয় তবে <label>পরিবর্তে উপাদানটিতে সিএসএস ক্লাস ব্যবহার করুন।
যদি কোনও ফর্ম, বা কোনও ফর্মের একটি অংশের শিরোনাম প্রয়োজন হয়, তবে এর <legend>মধ্যে অবস্থিত উপাদানটি ব্যবহার করুন <fieldset>।

বাটন

একটি <input>একটি সঙ্গে উপাদান type="button"ঘোষণা এবং একটি বৈধ মান অ্যাট্রিবিউট এর সাথে জড়িত একটি লেবেল দরকার নেই। এটি করা আসলে কীভাবে সহায়ক প্রযুক্তি বোতামের ইনপুটকে পার্স করে তা হস্তক্ষেপ করতে পারে। একই <button>উপাদান জন্য প্রযোজ্য ।

রেফ: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Question 3

forঅ্যাট্রিবিউট লেবেল ব্যবহার করা হয়। এটি এই লেবেলের সাথে যুক্ত উপাদানটির আইডি বোঝায়।

উদাহরণ স্বরূপ:

<label for="username">Username</label>
<input type="text" id="username" name="username" />

ব্যবহারকারী যখন usernameপাঠ্যটিতে মাউসটি ক্লিক করেন ব্রাউজারটি স্বয়ংক্রিয়ভাবে সংশ্লিষ্ট inputক্ষেত্রে ফোকাসটি রাখবে । এটি অন্যান্য ইনপুট উপাদানগুলির যেমন <textbox>এবং এর সাথেও কাজ করে <select>।

স্পেসিফিকেশন থেকে উদ্ধৃতি :

এই বৈশিষ্ট্যটি স্পষ্টভাবে অন্য নিয়ন্ত্রণের সাথে সংজ্ঞায়িত লেবেলকে সংযুক্ত করে। উপস্থিত থাকাকালীন, এই অ্যাট্রিবিউটের মান একই ডকুমেন্টের কিছু অন্য নিয়ন্ত্রণের আইডি বৈশিষ্ট্যের মান হিসাবে সমান হওয়া উচিত। অনুপস্থিত থাকলে, সংজ্ঞায়িত করা লেবেলটি উপাদানটির সামগ্রীর সাথে সম্পর্কিত।

আপনার প্রশ্নটি কেন jQuery এর সাথে ট্যাগ করা আছে এবং আপনি কোথায় দেখেছেন এটি jQuery এ ব্যবহৃত হচ্ছে আমি উত্তর দিতে পারি না কারণ আপনি বেশি তথ্য সরবরাহ করেন নি।

কোনও লেবেলের উদাহরণ হিসাবে সংশ্লিষ্ট ইনপুট উপাদানটি খুঁজে পেতে এটি jQuery নির্বাচনকারীতে ব্যবহৃত হয়েছিল:

var label = $('label');
label.each(function() {
    // get the corresponding input element of the label:
    var input = $('#' + $(this).attr('for'));
});

Question 4

আমি এর উত্তর দেওয়ার প্রয়োজন অনুভব করছি। আমারও একই বিভ্রান্তি ছিল।

<p>Click on one of the text labels to toggle the related control:</p>

<form action="/action_page.php">
  <label for="female">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

স্নিপেট প্রসারিত করুন

আমি 'পুরুষ' লেবেলের বৈশিষ্ট্যের জন্য মহিলাটিতে পরিবর্তন করেছি। এখন, আপনি 'পুরুষ' ক্লিক করলে 'মহিলা' রেডিও চেক হয়ে যাবে।

যে হিসাবে সহজ।

Question 5

একটি দ্রুত উদাহরণ:

<label for="name">Name:</label>
<input id="name" type="text" />

for=""ট্যাগ যখন আপনি হিসাবে ভাল ট্যাগ ক্লিক করি ইনপুট ফোকাস।

Question 6

আপনি এটি লেবেলগুলির সাহায্যে ব্যবহার করে বলছেন যে দুটি বস্তু একত্রে অন্তর্ভুক্ত।

<input type="checkbox" name="remember" id="rememberbox"/>
<label for="rememberbox">Remember your details?</label>

এর অর্থ হ'ল সেই লেবেলে ক্লিক করা চেকবাক্সের মান পরিবর্তন করবে।

Question 7

এফওয়াইআই - আপনি যদি টাইপ স্ক্রিপ্টের পরিবেশে যেমন

<label for={this.props.inputId}>{this.props.label}</label>

আপনার এইচটিএমএলফোর্ড ব্যবহার করা দরকার

<label htmlFor={this.props.inputId}>{this.props.label}</label>

Question 8

এটি <label>উপাদান জন্য ব্যবহৃত হয়

এটি ইনপুট টাইপ চেকবক্স বা লেডির ক্লিক ক্লিক করতে redio সঙ্গে ব্যবহার করা হয়

ওয়ার্কিং ডেমো

Question 9

forএর অ্যাট্রিবিউট <label>ট্যাগ তাদের একসঙ্গে বাঁধাই করার সংশ্লিষ্ট উপাদান আইডি অ্যাট্রিবিউট সমান হওয়া উচিত।

Question 10

এটি ব্যবহৃত হয় <label> এইচটিএমএল জন্য পাঠ্য

যেমন

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

Question 11

এটি একটি ইনপুট উপাদানটির সাথে লেবেলটিকে সংযুক্ত করে। এইচটিএমএল ট্যাগগুলি বিভিন্ন বিভাগের ব্যবহারকারীদের কাছে বিশেষ অর্থ বোঝাতে বোঝানো হয়। এখানে লেবেলটির অর্থ কী:

মোটর প্রতিবন্ধী ব্যক্তিদের জন্য (সাধারণ মাউস ব্যবহারকারীদের জন্যও) : সঠিকভাবে ব্যবহৃত লেবেল ট্যাগগুলি সম্পর্কিত ফর্ম নিয়ন্ত্রণে অ্যাক্সেস করতে ক্লিক করা যেতে পারে। যেমন বিশেষত চেকবক্সটি ক্লিক করার পরিবর্তে ব্যবহারকারী আরও সহজে ক্লিকযোগ্য লেবেলে ক্লিক করতে পারেন এবং চেকবক্সটি টগল করতে পারেন।
চাক্ষুষ-চ্যালেঞ্জযুক্ত ব্যবহারকারীদের জন্য : চাক্ষুষভাবে চ্যালেঞ্জপ্রাপ্ত ব্যবহারকারীরা যখনই কোনও ফর্ম নিয়ন্ত্রণের দিকে দৃষ্টি নিবদ্ধ করে তখন সংশ্লিষ্ট লেবেল ট্যাগটি পড়েন এমন স্ক্রিন-পাঠক ব্যবহার করেন। এটি ব্যবহারকারীদের এমন লেবেল জানতে সহায়তা করে যা অন্যথায় তাদের কাছে অদৃশ্য ছিল।

লেবেলিং সম্পর্কে আরও -> https://www.w3.org/TR/WCAG20-TECHS/H44.html

Question 12

এটি <label>ট্যাগের বৈশিষ্ট্য : http://www.w3schools.com/tags/tag_label.asp