আমাদের কেন ফিল্ডসেট ট্যাগ লাগবে?


165

আমাদের <fieldset>ট্যাগ লাগবে কেন ? এটি যে উদ্দেশ্যে কাজ করে তা সম্ভবত ফর্ম ট্যাগের একটি উপসেট।

আমি ডাব্লু 3 স্কুলগুলিতে কিছু তথ্য সন্ধান করেছি, যা বলে:

  • <fieldset>ট্যাগ একটি ফর্ম গ্রুপ এর সাথে সম্পর্কিত উপাদান ব্যবহার করা হয়।
  • <fieldset>ট্যাগ সংশ্লিষ্ট উপাদানের কাছাকাছি একটি বক্স স্বপক্ষে।

যারা "এটি কী করে" এর জন্য "কেন এটি নির্দিষ্টকরণে বিদ্যমান" ভুল করে চলেছে তাদের আরও ব্যাখ্যা। আমি মনে করি অঙ্কনের অংশটি অপ্রাসঙ্গিক, এবং কেবলমাত্র কোনও ফর্মের সাথে সম্পর্কিত কিছু উপাদানগুলিকে গোষ্ঠী করতে কেন আমাদের একটি বিশেষ ট্যাগের প্রয়োজন তা আমি দেখতে পাই না।


30
কেন আমাদের কোনও ট্যাগ লাগবে? যখন আমরা পটভূমির রঙের সাথে 1px ডিভিড থেকে একটি চিত্র তৈরি করতে পারি তখন কেন আমাদের ইমগ ট্যাগের প্রয়োজন?
ওদেড

127
দয়া করে নোট করুন: ডাব্লু 3 সি এর ডাব্লু 3 স্কুলগুলির সাথে কোনও সম্পর্ক নেই
ওয়েসলি মার্চ

82
W3schools উল্লেখ করবেন না। কেবল এমডিএন: ফিল্ডসেট @ এমডিএন ব্যবহার করুন ।
সিরকো

9
@ ম্যাডমারটিগান আমি জানি তবে ডাব্লু 3 সি কেবলমাত্র স্পেসিফিকেশন দেয় যা আমার প্রশ্নের উত্তর পেতে আমি খুব বেশি ব্যবহার পাই নি।
পূর্ব সন্ন্যাসী

2
প্রযুক্তিগত তথ্যের জন্য ডাব্লু
ডেনিলসন সা মায়া

উত্তর:


187

সর্বাধিক সুস্পষ্ট, ব্যবহারিক উদাহরণ:

<fieldset>
  <legend>Colour</legend>

  <input type="radio" name="colour" value="red" id="colour_red">
  <label for="colour_red">Red</label>

  <input type="radio" name="colour" value="green" id="colour_green">
  <label for="colour_green">Green</label>

  <input type="radio" name="colour" value="blue" id="colour_blue">
  <label for="colour_blue">Blue</label>

</fieldset>

এটি প্রতিটি রেডিও বোতামকে গোটা দলের জন্য একটি লেবেল সরবরাহ করার সময় লেবেলযুক্ত করতে দেয়। এটি বিশেষত গুরুত্বপূর্ণ যেখানে সহায়ক প্রযুক্তি (যেমন একটি স্ক্রিন রিডার) ব্যবহার করা হচ্ছে যেখানে নিয়ন্ত্রণের সমিতি এবং তাদের কিংবদন্তি ভিজ্যুয়াল উপস্থাপনার দ্বারা বোঝানো যায় না।


4
আমার কাছে কোনও লিঙ্ক সুবিধাজনক নেই, তবে স্পষ্টতই অনেক স্ক্রিন পাঠক ফিল্ডসেটে প্রতিটি লেবেলের আগে কিংবদন্তি পাঠটি পড়েন।
ওয়েসলি মার্চ

8
@ মাদমার্তিগান - এটি একটি ভাল জিনিস, এর অর্থ হল আপনি জানেন যে আপনি এখনও একই রেডিও বোতামগুলির সাথে কাজ করছেন। (কিংবদন্তিটি সংক্ষিপ্ত হয় তা নিশ্চিত করার এটিও একটি কারণ )।
কোয়ান্টিন

1
"সহায়ক প্রযুক্তি" যা প্রচুর অর্থবোধ করে।
পূর্ব সন্ন্যাসী

5
এছাড়াও, <ফিল্ডসেট> গোষ্ঠীভুক্ত উপাদানগুলিকে 'অক্ষম' করতে ব্যবহৃত হতে পারে to আমি আশা করছিলাম <ফিল্ডসেট> ট্যাগটিতে 'প্রয়োজনীয়' বৈশিষ্ট্য যুক্ত করে কোনও গোষ্ঠী প্রয়োজনীয় কিনা তা নির্দিষ্ট করে দেওয়ার জন্যও ব্যবহার করা উচিত, দুর্ভাগ্যক্রমে এটি কাজ করে না!
সাইমন সাভাই

41

ফিল্ডসেটের আরেকটি বৈশিষ্ট্য হ'ল এটি অক্ষম করা এর মধ্যে থাকা সমস্ত ক্ষেত্রকে অক্ষম করে।

<fieldset disabled>
  <legend>Disabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

<fieldset>
  <legend>Enabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>


6
অবশ্যই, কেউ এই যুক্তিটি তৈরি করতে পারে যে এটি এবং ফর্ম নিয়ন্ত্রণের disabledজন্য যে বৈশিষ্ট্যটি কাজ fieldsetকরে, তাত্ক্ষণিকভাবে formউপাদানটির জন্যও প্রয়োগ করা উচিত ছিল। এটি এর জন্য অর্থপূর্ণ হবে, তাই না?
amn

25

এটি অ্যাক্সেসযোগ্যতার জন্য প্রয়োজন।

চেক আউট: http://usability.com.au/2013/04/accessible-forms-1-labels-and- ઓળખ/

এইচটিএমএল 4 উপাদান fieldsetএবং legendআপনি সারণী ব্যবহার না করে যুক্তিসঙ্গত উপায়ে আগ্রহের বিভিন্ন ক্ষেত্রের সাথে একটি বৃহত ফর্ম বিন্যাস এবং সংগঠিত করার অনুমতি দেন। fieldsetট্যাগ নির্বাচিত উপাদান এবং চারপাশের বক্স তৈরি করতে ব্যবহার করা যেতে পারেlegend ট্যাগ ঐ উপাদান একটি ক্যাপশন দিতে হবে। এই পদ্ধতিতে ফর্ম উপাদানগুলিকে চিহ্নিত বিভাগগুলিতে একসাথে গ্রুপ করা যায়।

বিভিন্ন ব্রাউজার fieldsetবিভিন্ন উপায়ে ডিফল্ট সীমানা প্রদর্শন করতে পারে। ক্যাসকেডিং স্টাইল শীটগুলি সীমান্তটি সরাতে বা এর উপস্থিতি পরিবর্তন করতে ব্যবহার করা যেতে পারে।


ফিল্ডসেট এইচটিএমএল 4 তে উপস্থিত নেই। এটি একটি এইচটিএমএল 5 বৈশিষ্ট্য
31_18

5
এটি এইচটিএমএল 4.0.1 এ প্রকাশিত হয়েছে - w3.org/TR/html401/interact/forms.html#h-17.10
এরিক সাইট

14

এখানে বর্ণিত হিসাবে , এই ট্যাগটির উদ্দেশ্য ফর্মের সংস্থাকে স্পষ্টতা সরবরাহ করা এবং ফর্মের উপাদানগুলি সাজানোর জন্য ডিজাইনারের আরও সহজ অ্যাক্সেসের অনুমতি দেওয়া।


6

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


4

আমি এটি পছন্দ করি যে আপনি যখন আপনার রেডিওগুলি ফিল্ডসেট দিয়ে ঘিরে রাখেন এবং আপনি যখন আপনার রেডিও বোতাম ইনপুট ট্যাগগুলিতে আইডি রাখেন না, তখন ফিল্ডসেট দ্বারা প্রতিনিধিত্ব করা গোষ্ঠীটি ট্যাবচেইনে যুক্ত করা হয় যেন এটি কোনও আইটেম was

এটি আপনাকে একটি ফর্মের মাধ্যমে ট্যাব করতে দেয় এবং আপনি যখন কোনও ফিল্ডসেটে পৌঁছান, আপনি নির্বাচিত রেডিওটি পরিবর্তন করতে তীর কীগুলি ব্যবহার করতে পারেন, এবং তারপরে আপনার কাজ শেষ হয়ে গেলে ট্যাব করতে পারেন।

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


This lets you tab through a form, and when you get to a fieldset, you can use arrow keys to change the selected radio, and then tab away when you're done.- এটি রেডিও ইনপুটগুলির ডিফল্ট আচরণ এবং ফিল্ডসেটগুলির সাথে কোনও সম্পর্ক নেই। চেকবাক্সগুলি ডিফল্টরূপে আলাদা আচরণ করে।
ভ্লাদিমির কর্নিয়া

2

আমি সিএসএস স্টাইলিং এবং নিয়ন্ত্রণগুলিতে লেবেল সংযুক্ত করার পক্ষে এটি সহজ বলে মনে করি। এটি একদল ক্ষেত্রের চারপাশে ভিজ্যুয়াল ধারক স্থাপন এবং লেবেলগুলি সারিবদ্ধ করা সহজ করে তোলে।


2

আমি ফিল্ডসেটগুলি গ্রুপ ফর্ম ইনপুটগুলিতে ব্যবহার করি, যখন আমার কাছে একটি বিশাল ফর্ম থাকে এবং এটি ফর্ম উইজার্ডের মধ্যে বাছাই করতে চাই।

এই একই প্রশ্নের উত্তর এখানে দেওয়া হয়েছিল O


2

কিছু সুবিধার সংক্ষিপ্তসার:

এইচডিএমএল  <fieldset> উপাদানটি এমডিএন<label> দ্বারা সংজ্ঞায়িত করা হিসাবে একটি ওয়েব ফর্মের মধ্যে বেশ কয়েকটি নিয়ন্ত্রণের পাশাপাশি লেবেলগুলি ( ) গ্রুপের জন্য ব্যবহৃত হয়

অন্য কথায়: ফিল্ডসেট ট্যাগটি আপনাকে ফর্মগুলি আরও বর্ণনামূলক করতে যাতে ক্ষেত্রের সেটগুলি যৌক্তিকভাবে গ্রুপ করতে দেয়। সুতরাং, ফর্ম নিয়ন্ত্রণের একটি সেট একটি সাধারণ নামে allyচ্ছিকভাবে গোষ্ঠীভুক্ত হয়।

<fieldset>
  <legend>Choose your favorite animal</legend>

  <input type="radio" id="dog" name="animal">
  <label for="dog">Dog</label><br/>

  <input type="radio" id="cat" name="animal">
  <label for="cat">Cat</label><br/>
</fieldset>

ফিল্ডসেট ব্যবহারের " সুবিধা " হ'ল:

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

1

আমার হিসাবে, <fieldset>...</fieldset>উপাদানটির সবচেয়ে বড় সুবিধা হ'ল ফর্মের অভ্যন্তরে না <form>...</form>থাকলেও প্রসঙ্গ সংরক্ষণ করার ক্ষমতা <fieldset>...</fieldset>

উদাহরণস্বরূপ, নিম্নলিখিত ফর্ম:

<div class="header">
    <form id="myForm">
        <input type="text" name="someInput">
    </form>
</div>

<div class="footer">
    <fieldset form="myForm">
        <input type="text" name="someInput1">
    </fieldset>
</div>

শব্দার্থগতভাবে নিম্নলিখিত ফর্মের মতো:

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.