রেডিও বোতামগুলিতে "লেবেল" ব্যবহার করা

Question

রেডিও বোতামগুলিতে "লেবেলের জন্য" পরামিতি ব্যবহার করার সময়, 508 অনুগত * হতে, নীচেরটি কি সঠিক?

 <label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label> 

নাকি এটা?

 <input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>

আমি জিজ্ঞাসা করার কারণটি হ'ল দ্বিতীয় উদাহরণে, "লেবেল" কেবল পাঠ্যকেই অন্তর্ভুক্ত করে যা প্রকৃত রেডিও বোতামটি নয়।

* 1973 এর পুনর্বাসন আইনের ৫০৮ ধারায় প্রতিবন্ধী ব্যক্তিদের সফ্টওয়্যার এবং ওয়েবসাইট অ্যাক্সেসযোগ্যতা সরবরাহ করার জন্য ফেডারাল এজেন্সিগুলির প্রয়োজন।

Answer 1

আপনি এটি প্রায় পেয়েছেন। এটি হওয়া উচিত:

<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>

মানটি forসেই উপাদানটির আইডি হওয়া উচিত যা আপনি লেবেল করছেন।

Comments

আপনি উত্তর অবশ্যই সত্য, কিন্তু মার্থার সঠিক উত্তর আছে। উভয় মার্থা উদাহরণ পুরোপুরি বৈধ HTML5। এবং উদাহরণস্বরূপ আপনি যদি পুরো জিনিসটি কোনও ফ্রেমে থাকতে চান তবে সিএসএস ব্যবহার করে দ্বিতীয়টি স্টাইল করা সহজ। আপনি যদি লেবেল অন্য কোথাও হতে চান তবে প্রথমে একটি। তবে দুটোই ঠিক আছে। শুভেচ্ছান্তে!

— জ্যাসেক কোওয়ালিউস্কি

হুম .. আপনি দুটি রেডিও বোতামের মধ্যে কীভাবে একটি লেবেল টগল করবেন? আপনার দুটি অভিন্ন আইডি থাকতে পারে না ...: /

— নীল সেন্স

@ নীলসেন্স প্রতিটি রেডিও এবং লেবেল জুটির স্বতন্ত্র আইডি থাকা উচিত তাদের আইডি ভাগ করা উচিত নয়

— ড্যানিয়েল ওয়াটারস

@ নিলসেন্সগুলি 2 টি রেডিও বোতামের মধ্যে টগল করুন এবং তাদের কেবল 1 টি লেবেল রয়েছে? পরিবর্তে একটি চেকবক্স ব্যবহার করার জন্য এটি স্পষ্ট কেসের মতো শোনাচ্ছে: ডি

— টি_ডি

আহ, আমি যা বোঝাতে চেয়েছি তা হ'ল একটি সুপার-লেবেল যা রেডিও বোতামগুলিকে টগল করে। পছন্দ: বিভাগ পছন্দসই-ফল এবং আপনি যখন এটিতে ক্লিক করেন, আপনি আইডিকে "কলা" এবং "স্ট্রবেরি" এর মধ্যে টগল করেন কারণ, যখন আপনি কেবল বিকল্পগুলি টগল করতে পারবেন তখন কেন মাউস আন্দোলন ইউএক্স প্রয়োগ করুন। আজ, আমি এটি কেবল হাতে কোড দেওয়ার জন্য জেএস ব্যবহার করতাম, তবে কেবল সিএসএসের কোনও উপায় নেই কিনা তা জানতে আকর্ষণীয় হবে :)

— নীল সেন

Answer 2

হয় কাঠামোটি বৈধ এবং অ্যাক্সেসযোগ্য, তবে forবৈশিষ্ট্যটি idইনপুট উপাদানটির সমান হতে হবে :

<input type="radio" ... id="r1" /><label for="r1">button text</label>

অথবা

<label for="r1"><input type="radio" ... id="r1" />button text</label>

forঅ্যাট্রিবিউট দ্বিতীয় সংস্করণে ঐচ্ছিক (লেবেল ইনপুট ধারণকারী), কিন্তু IIRC কিছু পুরোনো ব্রাউজারে সেই লেবেল টেক্সট যোগ্য না যদি না আপনি এটিকে অন্তর্ভুক্ত ছিল। প্রথম সংস্করণ (ইনপুট পরে লেবেল) সংলগ্ন ভাইবোন নির্বাচক ব্যবহার করে CSS এর সাথে স্টাইল করা সহজ +:

input[type="radio"]:checked+label {font-weight:bold;}

Comments

সত্য, যদিও দ্বিতীয় উদাহরণে, "জন্য" গুণাবলী প্রয়োজন হয় না।

— ইসমাইল

আমি মনে করি কিছু ব্রাউজার সংস্করণ ছিল যা কেবলমাত্র "ক্লিকযোগ্য" বোতামের পাঠ্যটিকে "ক্লিকযোগ্য" করে তুলেছিল যদি আপনি 'for' বৈশিষ্ট্যটি ব্যবহার করেন, অর্থাত লেবেলের ভিতরে ইনপুট মোড়ানো যথেষ্ট ছিল না।

— মার্থা

@ মার্থা - আপনি জানেন কোন ব্রাউজারগুলি?

— কির্কল্যান্ড

@ কির্কল্যান্ড - w3.org/TR/html401/interact/forms.html#h-17.9 ইঙ্গিত করে যে দ্বিতীয় ফর্মটি বৈধ, তবে বেশ কয়েকটি উত্স ইঙ্গিত দেয় যে সমর্থন সর্বজনীন হতে পারে না। এটি যে forকোনও ক্ষেত্রেই এট্রিবিউট সরবরাহ করা সম্ভবত সেরা ।

— ইসমাইল

@ রাল্ফড্যাভিডআবারনাথি হ্যাঁ, একই বিধিগুলি চেক বাক্সগুলির জন্য প্রযোজ্য।

— ইসমাইল

Answer 3

(প্রথমত অন্যান্য উত্তর যা ব্যাখ্যা করেছেন পড়া forমধ্যে <label></label>ট্যাগ। আচ্ছা, উভয় সমাজের সারাংশ উত্তর সঠিক হয়, কিন্তু আমার চ্যালেঞ্জ জন্য, এটা আপনাকে অনেকগুলি রেডিও বক্স আছে, আপনি তাদের জন্য নির্বাচন করা উচিত ছিল একটি সাধারণ নাম মত name="r1" কিন্তু বিভিন্ন আইডি দিয়ে id="r1_1" ... id="r1_2"

সুতরাং এইভাবে উত্তরটি আরও পরিষ্কার এবং নাম এবং আইডির মধ্যে বিবাদগুলিও সরিয়ে দেয়।

আপনার রেডিও বাক্সের বিভিন্ন বিকল্পের জন্য বিভিন্ন আইডির প্রয়োজন।

<input type="radio" name="r1" id="r1_1" />

       <label for="r1_1">button text one</label>
       <br/>
       <input type="radio" name="r1" id="r1_2" />

       <label for="r1_2">button text two</label>
       <br/>
       <input type="radio" name="r1" id="r1_3" />

       <label for="r1_3">button text three</label>