আমি ভাবছি যে নিম্নলিখিত দুটি কোড স্নিপেটের মধ্যে পার্থক্য কি:
<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>এবং
<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>আমি নিশ্চিত যখন আপনি একটি বিশেষ জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করেন এটি কিছু করে, তবে এটি ছাড়াও এটি কি এইচটিএমএলকে বৈধতা দেয় বা অন্য কোনও কারণে প্রয়োজনীয় হয়?
উত্তর:
<label>ট্যাগ আপনি লেবেলের উপর ক্লিক করুন করার অনুমতি দেয়, এবং এটি সংশ্লিষ্ট ইনপুট উপাদান এ ক্লিক মত গণ্য করা হবে। এই সমিতি তৈরির দুটি উপায় রয়েছে:
একটি উপায় হ'ল ইনপুট উপাদানটির চারপাশে লেবেল উপাদানটি মোড়ানো:
<label>Input here:
<input type='text' name='theinput' id='theinput'>
</label>অন্য forউপায়টি এটি সম্পর্কিত ইনপুটটির আইডি দিয়ে বৈশিষ্ট্যটি ব্যবহার করা হয় :
<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>এটি বিশেষত চেকবক্স এবং বোতামগুলির সাথে ব্যবহারের জন্য দরকারী, কারণ এর অর্থ আপনি বাক্সটি আঘাত না করে সম্পর্কিত পাঠ্যে ক্লিক করে বাক্সটি চেক করতে পারেন।
MDN এ এই উপাদানটি সম্পর্কে আরও পড়ুন ।
selectকেবলমাত্র একটি লেবেল ক্লিক করা কেবলমাত্র বিকল্পগুলির প্রসারণের পরিবর্তে নির্বাচনের দিকে মনোনিবেশ করে।
দ্য forঅ্যাট্রিবিউট হিসাবে বর্ণনায় সংজ্ঞায়িত একটি নিয়ন্ত্রণ উপাদান সঙ্গে ট্যাগ সহযোগীদের labelএইচটিএমএল 4.01 বৈশিষ্ট হবে। এটি অন্যান্য বিষয়গুলির সাথে বোঝায় যে labelউপাদানটি যখন ফোকাস পায় (উদাহরণস্বরূপ ক্লিক করার মাধ্যমে), তখন এটি সম্পর্কিত নিয়ন্ত্রণের উপর দৃষ্টি নিবদ্ধ করে passes লেবেল এবং একটি নিয়ন্ত্রণের মধ্যে সংযোগটি স্পিচ-ভিত্তিক ব্যবহারকারী এজেন্টরাও ব্যবহার করতে পারেন যা কোনও নিয়ন্ত্রণের সাথে ডিল করার সময় ব্যবহারকারীকে সম্পর্কিত লেবেলটি কী তা জিজ্ঞাসা করার উপায় দিতে পারে। (সমিতিটি ভিজ্যুয়াল রেন্ডারিংয়ের মতো সুস্পষ্ট নাও হতে পারে))
প্রশ্নের প্রথম উদাহরণে (ছাড়া for ), labelমার্কআপের ব্যবহারের কোনও যৌক্তিক বা কার্যকরী জড়িত নেই - এটি সিএসএস বা জাভাস্ক্রিপ্টে কিছু না করা হলে এটি অকেজো।
এইচটিএমএল স্পেসিফিকেশনগুলি নিয়ন্ত্রণগুলির সাথে লেবেলগুলিকে সংযুক্ত করা বাধ্যতামূলক করে না তবে ওয়েব সামগ্রী অ্যাক্সেসিবিলিটি গাইডলাইনস (ডাব্লুসিএজি) ২.০ করে। এই প্রযুক্তিগত নথিতে বর্ণনা করা হয়েছে H44: ফর্মের নিয়ন্ত্রণ সঙ্গে সহযোগী টেক্সট লেবেল লেবেল উপাদানগুলি ব্যবহার করে , যা ব্যাখ্যা করেছেন যে অন্তর্নিহিত এসোসিয়েশন (পাখির যেমন দ্বারা inputভিতরে label) হিসেবে ব্যাপকভাবে মাধ্যমে স্পষ্ট অ্যাসোসিয়েশন প্রভৃতি সমর্থিত নয় forএবং idগুণাবলীর
সংক্ষেপে এটি যা করে তা হ'ল ইনপুটটির উল্লেখ idthat's
<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">এর অ্যাট্রিবিউট জন্য <label>ট্যাগ তাদের একসঙ্গে বাঁধাই করার সংশ্লিষ্ট উপাদান আইডি অ্যাট্রিবিউট সমান হওয়া উচিত।
বৈশিষ্ট্যের জন্য দেখায় যে এই লেবেলটি সম্পর্কিত ইনপুট ক্ষেত্র, বা চেক বাক্স বা রেডিও বোতাম বা এর সাথে যুক্ত অন্য কোনও ডেটা ফিল্ডে প্রবেশ করে। উদাহরণ স্বরূপ
<li>
<label>{translate:blindcopy}</label>
<a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a>  
<input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
</li>এটি forবৈশিষ্ট্যের পরামিতি যে কোনও ইনপুট লেবেল করে ।
<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>