আমি কি ইনপুট উপাদানগুলিকে একটি লেবেল উপাদানের ভিতরে রাখতে পারি?

Question

বাসা বাঁধার labelএবং inputএইচটিএমএল উপাদানগুলির সম্পর্কে কি সেরা অনুশীলন রয়েছে?

ক্লাসিক উপায়:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

অথবা

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>

Comments

নির্বাণ বড় অনুকূল এক <input />ভিতরে <label>, আপনি বাদ যায় forএবং id: <label>My text <input /></label>আপনার উদাহরণে। এত সুন্দর!

— Znarkus

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

— ব্লেজমোনজার

বিটিডব্লিউটি তৈরি করার এটি একটি খুব খারাপ ধারণা ছিল <label for="id">কারণ পৃষ্ঠাতে আমার একাধিক ফর্ম রয়েছে এবং আমি ফাঁদে idপড়ে না গিয়ে অনেক উইজেটের জন্য বৈশিষ্ট্যটি ব্যবহার করতে পারি না unique id per page। উইজেট অ্যাক্সেস একমাত্র গ্রহণযোগ্য উপায় দ্বারা হয় form + widget_name।

— ম্যাকজুম

@ ম্যাক্সজুম যদি আপনার পৃষ্ঠায় অভিন্ন ক্ষেত্রের নাম সহ এমন অনেকগুলি ফর্ম থাকে যা আপনার অনন্য আইডি নিয়ে আসতে সমস্যা হয় তবে আপনি আপনার পৃষ্ঠার ডিজাইনের দিকে একটু ভাবনা করতে পারেন, আইএমএইচও; স্পষ্টতই আমি আপনার পরিস্থিতি জানি না, তবে এটি আমার কাছে কেবল দুর্গন্ধযুক্ত

— কেন বেলোস

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

— ম্যাক্সজুম

Answer 1

ডাব্লু 3 থেকে: লেবেল নিজেই সম্পর্কিত নিয়ন্ত্রণের আগে, পরে বা তার কাছাকাছি থাকতে পারে।

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

অথবা

<input type="text" id="lastname" />
<label for="lastname">Last Name</label>

অথবা

<label>
   <input type="text" name="lastname" />
   Last Name
</label>

নোট করুন যে যখন একটি সারণীতে লেবেল এবং অন্য কক্ষে এর সাথে সম্পর্কিত ফর্ম ক্ষেত্রের সাথে লেবেল সারণী ব্যবহার করা হচ্ছে তখন তৃতীয় কৌশলটি ব্যবহার করা যাবে না।

হয় একটি বৈধ। আমি প্রথম বা দ্বিতীয় উদাহরণটি ব্যবহার করতে চাই, কারণ এটি আপনাকে আরও স্টাইল নিয়ন্ত্রণ দেয়।

Comments

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

— ফানকা

আমি ভাবছি <label for="inputbox"><input id="inputbox" type="text" /></label>তাদের মানদণ্ড অনুসারে কোনও পাস কিনা ?

— ম্যাট

খুব খারাপ যে আপনি কোনও ইনপুট ট্যাগের অভ্যন্তরে কোনও লেবেল বাসাতে পারবেন না। যদি আপনি এটি কোনও বিমূর্ত দৃষ্টিকোণ থেকে দেখেন তবে লেবেলটি সত্যই ইনপুটটির সম্পত্তি হওয়ায় এটি আরও বেশি শব্দার্থিকভাবে যুক্তিযুক্ত হতে পারে।

— অ্যালেক্স

লিঙ্কযুক্ত ডাব্লুসিএজি নথিতে নিম্নলিখিত বিকল্পগুলি অন্তর্ভুক্ত করে "নিয়ন্ত্রণটি একটি লেবেলের উপাদানগুলির মধ্যে থাকে যা লেবেল পাঠ্য ধারণ করে।" @ সোরসি মন্তব্য করার পরে বছরগুলিতে এটি যুক্ত হয়েছিল কিনা তা আমি জানি না, তবে ইনপুট-ইন-লেবেল দৃশ্যটি এখন বৈধ বলে মনে করা হচ্ছে।

— অ্যালেক্স ওয়েইজার 21

কমপক্ষে ক্রোমে অন্তর্ভুক্ত লেবেলের ভিতরে ইনপুট নিয়ে একটি সমস্যা রয়েছে, আপনি যখন লেবেলে একটি ইভেন্ট ইভেন্ট হ্যান্ডলার সংযুক্ত করেন, তখন লেবেলটি ক্লিক করা হলে হ্যান্ডলারটি দু'বার বরখাস্ত হয়ে যায়। আপনি return false;হ্যান্ডলারটির শেষে এটি পেতে পারেন , তবে আপনার যদি সম্ভবত অন্য হ্যান্ডলারগুলি থাকে যা পরে চালানো দরকার, এবং প্রচার বন্ধ করা কোনও বিকল্প নয়, এটি একটি সমস্যা হয়ে দাঁড়িয়েছে।

— তারে_দিন

Answer 2

আমি পছন্দ করি

<label>
  Firstname
  <input name="firstname" />
</label>

<label>
  Lastname
  <input name="lastname" />
</label>

উপর

<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />

<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />

মূলত এটি এটি এইচটিএমএলকে আরও পঠনযোগ্য করে তোলে। এবং আমি আসলে আমার প্রথম উদাহরণটি সিএসএসের সাথে স্টাইল করা আরও সহজ বলে সিএসএস নেস্টেড উপাদানগুলির সাথে খুব ভাল কাজ করে।

তবে আমি মনে করি এটি স্বাদের বিষয়।

---

আপনার যদি আরও স্টাইলিং বিকল্পের প্রয়োজন হয় তবে একটি স্প্যান ট্যাগ যুক্ত করুন।

<label>
  <span>Firstname</span>
  <input name="firstname" />
</label>

<label>
  <span>Lastname</span>
  <input name="lastname" />
</label>

কোডটি এখনও আমার মতে আরও ভাল দেখাচ্ছে।

Comments

লেবেলের ভিতরে ইনপুট অন্তর্ভুক্ত করা লেআউটের জন্য এইচটিএমএল ব্যবহারের সমান।

— এমিল

আমি এই সমাধানটি এর মতো ক্ষেত্রেগুলির জন্যও পছন্দ করি: <label>Expires after <input name="exp" /> days</label>(লেবেলটি ইনপুট উপাদানটির আগে এবং পরে)

— ফিলিপ

আমি মনে করি গত উদাহরণ - জন্য এবং আইডি বৈশিষ্ট্যাবলী ব্যতীত - সত্যি ইনপুট পাশে ট্যাগ থাকার থেকে কোন ভিন্ন নয় এবং উভয় একটি মধ্যে আবৃত div, liবা কি না, এটা !?

— retrovertigo

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

— Xhynk

@ এমপাব্লাক - একটি দ্রুত চেহারা এবং আমি ডাব্লু 3.org থেকে এই গাইডেন্স পেয়েছি। w3.org/WAI/tutorials/forms/labels । তারপরে আমি w3.org/TR/WCAG20-TECHS/H44.html পরীক্ষা করেছি । নীচে (এটি অস্পষ্ট) এটি বলেছে যে কনফর্মেন্স দাবি করার জন্য আপনাকে পরীক্ষার মানদণ্ডটি পাস করতে হবে, এবং এটিতে সুনির্দিষ্টভাবে বলা আছে যে আপনাকে গুণকের জন্য ব্যবহার করা উচিত। বাস্তবে আমি যখন এটি সর্বশেষ অ্যাপল ভয়েসওভারে পরীক্ষা করেছি (10% মার্কেট শেয়ার স্ক্রিনরিডার্স ডেস্কটপ, 60% মার্কেট শেয়ার স্ক্রিনরিডার মোবাইল) অন্তর্নিহিত লেবেলগুলি কাজ করতে পারেনি, তাই এটি অন্য একটি বড় কারণ ছিল। আশা করি এইটি কাজ করবে!

— জেমস ওয়েস্টগেট 13

Answer 3

আপনি যদি লেবেল ট্যাগটিতে ইনপুট ট্যাগ অন্তর্ভুক্ত করেন তবে আপনাকে 'for' গুণাবলীটি ব্যবহার করার দরকার নেই।

এটি বলেছিল, আমি আমার লেবেলে ইনপুট ট্যাগটি অন্তর্ভুক্ত করতে পছন্দ করি না কারণ আমার কাছে মনে হয় তারা পৃথক, সত্তা না রেখে're

Comments

এর জন্য আপনাকে একটি আইডি ব্যবহার করা প্রয়োজন, যা

— লেআউটটিকে

Answer 4

আচরণের পার্থক্য: লেবেল এবং ইনপুটগুলির মধ্যে স্পেসে ক্লিক করা

আপনি যদি লেবেল এবং ইনপুটটির মধ্যবর্তী স্থানটিতে ক্লিক করেন তবে লেবেলে যদি ইনপুট থাকে তবে তা ইনপুটটিকে সক্রিয় করে।

এটি অর্থবোধ করে যেহেতু এই ক্ষেত্রে স্থানটি কেবল লেবেলের অন্য একটি চরিত্র।

<p>Inside:</p>

<label>
  <input type="checkbox" />
  |&lt;----- Label. Click between me and the checkbox.
</label>

<p>Outside:</p>

<input type="checkbox" id="check" />
<label for="check">|&lt;----- Label. Click between me and the checkbox.</label>

লেবেল এবং বাক্সের মধ্যে ক্লিক করতে সক্ষম হওয়ার অর্থ এটি হ'ল:

• ক্লিক করা সহজ
• কম স্পষ্ট যেখানে জিনিস শুরু এবং শেষ

বুটস্ট্র্যাপ চেকবক্স v3.3 উদাহরণগুলি ইনপুটটি ভিতরে ব্যবহার করে: http://getbootstrap.com/css/#forms সেগুলি অনুসরণ করা বুদ্ধিমান হতে পারে। তবে তারা v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios এ তাদের মন পরিবর্তন করেছে তাই আমি আর জ্ঞানী কী তা জানি না:

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

ইউএক্স প্রশ্ন যা এই পয়েন্টটি বিশদভাবে আলোচনা করে: /ux/23552/should-the-space-between-the-checkbox-and-label-be- ক্লিকযোগ্য

Comments

এটি কোনও নির্দিষ্ট পার্থক্য নয়। টগল সমস্ত অনুগত ব্রাউজারে উভয় ক্ষেত্রেই কাজ করে।

— হেক্সালিস

@ হেক্সালিজ প্রতিবেদনের জন্য ধন্যবাদ। আমি উত্তর আপডেট করেছি। আপনি কি বলতে চাইছেন অনুগত ব্রাউজারগুলি উভয় ক্ষেত্রেই টগল করা উচিত বা না? আপনি যদি প্রাসঙ্গিক স্ট্যান্ডার্ড প্যাসেজের সাথে লিঙ্ক করতে পারেন তবে দুর্দান্ত।

— সিরো সান্তিলি 郝海东 冠状 病 六四 事件 法轮功

হ্যাঁ. যদিও আমি লক্ষ্য করতে ব্যর্থ হয়েছি যে আপনার উদাহরণটি বিভ্রান্তিকর কারণ আপনার স্থানটি আসলে পাঠ্যের স্থান নয় । এটি marginচেকবক্সের একটি। আপনার উদাহরণে ফায়ারফক্সের আচরণ অদ্ভুত এবং এটি বাগের মতো মনে হচ্ছে। একটি labelস্পেস বা যোগ্য হিসাবে ইনলাইন বিষয়বস্তু প্রায় প্যাডিং উপস্থিত থাকবে। তবে প্রদত্ত লেবেলের সামগ্রীর মডেলটি ইনলাইন / ফ্রেসিং সামগ্রী হিসাবে ইনপুটটির মার্জিনটি ক্লিকযোগ্য হবে না, যদি না আপনার লেবেল তৈরি display: blockহয় যা ক্ষেত্রে লেবেলের অভ্যন্তরটি blockসমস্ত ব্রাউজারে ক্লিকযোগ্য হয়ে যায়।

— হেক্সালিস

নোট করুন যে উত্তরে বুটস্ট্র্যাপ লিঙ্কটি v3.3-তে ডক্সে যায়। V4.0 এর জন্য দস্তাবেজ ইঙ্গিত তারা তাদের মন পরিবর্তন করেছি বলে মনে হচ্ছে। "চেকবাক্সগুলি এবং রেডিও সমর্থন HTML- ভিত্তিক ফর্ম যাচাইকরণ নির্মান এবং সংক্ষিপ্ত, প্রবেশযোগ্য লেবেল প্রদান করেন সেটা ব্যবহার যেমন, আমাদের <ইনপুট> s এবং <ট্যাগ> গুলি <লিবেল> এর মধ্যে <ইনপুট> এর বিপরীতে ভাইবোন উপাদানগুলি হ'ল এটি আপনাকে আরও আইডিকে নির্দিষ্ট করতে হবে এবং <ইনপুট> এবং <লেবেল> "এর সাথে সম্পর্কিত বৈশিষ্ট্যের জন্য এটি আরও কিছুটা ভারবজ।

— মাইকেল ক্রেবস

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

— টার্গস

Answer 5

ব্যক্তিগতভাবে আমি আপনার দ্বিতীয় উদাহরণের মতো লেবেলটি বাইরে রাখতে চাই। এ কারণেই ফর বৈশিষ্ট্যটি এখানে রয়েছে। ফর্মটি দেখতে সুন্দরভাবে দেখতে (নীচে শর্টহ্যান্ড) পেতে আমি প্রায়শই প্রস্থের মতো লেবেলে শৈলী প্রয়োগ করি The

<style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />

এটি তৈরি করে যাতে আমি টেবিলগুলি এবং আমার ফর্মগুলির সমস্ত জাঙ্ক এড়াতে পারি।

Comments

<br />ইনপুটগুলি আলাদা করার পরিবর্তে আপনার কি উপস্থাপনাটি সিএসএসে ছেড়ে দেওয়া উচিত নয় ?

— Znarkus

@ জার্কাকাস - হ্যাঁ, সাধারণত আমি ওগুলিকে / এলআইতে জড়িয়ে রাখি যাতে এ জাতীয় বিন্যাসটি মোকাবেলা করা যায়, এটি ছিল একটি দ্রুত শর্টহ্যান্ড উদাহরণ।

— তোতা

@ পেয়ারোটস: এটি অর্থহীনভাবে খুব বেশি বোঝায় না, ইমো। এবং যদি আপনার এগুলি মোড়ানো প্রয়োজন হয় তবে কেন কেবল তাদের লেবেল দিয়ে মুড়িয়ে রাখবেন না?

— Znarkus

@ পেয়ারোটস এই যুক্তি সহ আমি মনে করি একটি পৃষ্ঠার সমস্ত কিছু উল / লি এর ভিতরে .োকানো উচিত। এবং আপনার সাথে <label> <span>My text</span> <input /> </label>সমস্ত স্টাইলিং বিকল্প রয়েছে (কখনও) আপনার প্রয়োজন।

— Znarkus

"ফর" ব্যবহার করা আপনাকে আইডি ব্যবহার করতে বাধ্য করে, যা শ্রেণিবদ্ধ লেআউটগুলির পক্ষে খারাপ।

— প্রাণঘাতী

Answer 6

ডাব্লু 3 সুপারিশের জন্য http://www.w3.org/TR/html401/interact/forms.html#h-17.9 দেখুন ।

তারা বলে যে এটি যেভাবেই করা যেতে পারে। তারা দুটি পদ্ধতির স্পষ্ট হিসাবে বর্ণনা করেছেন (উপাদানটির আইডি সহ "জন্য" ব্যবহার করে) এবং অন্তর্নিহিত (লেবেলে উপাদানটি এম্বেড করে):

স্পষ্ট:

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

অন্তর্নিহিত:

স্পষ্টভাবে অন্য নিয়ন্ত্রণের সাথে একটি লেবেল সংযুক্ত করতে, নিয়ন্ত্রণ উপাদানটি অবশ্যই LABEL উপাদানটির সামগ্রীর মধ্যে থাকা উচিত। এই ক্ষেত্রে, LABEL কেবলমাত্র একটি নিয়ন্ত্রণ উপাদান থাকতে পারে।

Comments

আমি সবেমাত্র আবিষ্কার করেছি যে অন্তর্নিহিতরা IE ... তে কাজ করছে না? কোন ধারণা?

— ক্যারিনলিঞ্চিন

Answer 7

উভয়ই সঠিক, তবে সিএসএসের সাথে স্টাইল করার সময় লেবেলের ভিতরে ইনপুট রাখলে তা অনেক কম নমনীয় হয়।

প্রথমত, একটি <label>যা উপাদান এটা ধারণ করতে পারে সীমিত থাকবে । উদাহরণস্বরূপ, আপনি কেবলমাত্র একটি <div>মধ্যে রাখতে পারেন<input> এবং লেবেল পাঠ্যের পারেন, যদি এটিটির <input>মধ্যে না থাকে <label>।

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

Comments

অনেক কম নমনীয়? তুমি কি বিস্তারিত বলতে পারো? অন্যরা যেমন বলেছে, আপনি কেবল স্প্যান দিয়ে অভ্যন্তরীণ লেবেল পাঠ্যটি মোড়ানো করতে পারেন, যদি না এটি এটিকে অনেক কম নমনীয় করে তোলে?

— এমপিভ্লাক

Answer 8

একটি উল্লেখযোগ্য 'গেটছা' নির্দেশ দেয় যে আপনার << লেবেল> উপাদানটির ভিতরে কোনওরকম একাধিক ইনপুট উপাদান কখনও যুক্ত করা উচিত নয়, যেমন:

<label for="child-input-1">
  <input type="radio" id="child-input-1"/>
  <span> Associate the following text with the selected radio button: </span>
  <input type="text" id="child-input-2"/>
</label>

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

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

Comments

এটি কোনও "গ্যাচা" নয়। এটি স্পষ্টতই অনুমানের অংশ; লেবেলে এতে 1 টি নিয়ন্ত্রণ থাকতে পারে। আপনি এখানে অন্তর্নিহিত এবং সুস্পষ্ট স্টাইলগুলিও মিশ্রণ করছেন - আপনি যদি লেবেলের ভিতরে নিয়ন্ত্রণ রাখেন তবে আপনার প্রয়োজন হবে না for... এবং যদি আপনি ব্যবহার করতে চান forতবে লেবেলের অভ্যন্তরে নিয়ন্ত্রণ থাকা খুব বেশি অর্থবোধ করে না doesn't ।

— সিএওও

সত্য, তবে মনে হবে এই স্পেসিফিকেশনটি ভালভাবে বোঝা যায় নি। আমরা ড্রুপাল D এর ফর্ম এপিআই নিয়ে এই ইস্যুটিতে ছড়িয়ে পড়েছি, যা মার্কআপ উত্পন্ন করেছে যা উপরের বর্ণনার মত নয় scenario এটিতে আমার সহকর্মী ছিল এবং আমি এক বা দুই মিনিটের জন্য আমাদের মাথা আঁচড়ান, তাই আমি ভেবেছিলাম ভবিষ্যতে সম্ভাব্য বিভ্রান্তি এড়াতে আমি বিষয়টি এখানে এড়িয়ে যাব air

— হারুন

লেবেল-> ইনপুট দৃশ্যে "জন্য" দরকার নেই। লেবেল প্রতি একটি ইনপুট এবং এতে নাম বা আইডি না জানার সুবিধা রয়েছে এবং জিনিসগুলিকে এনক্যাপুলেটেড রাখতে আপনি ভাল সিএসএস স্টাইলিং করতে পারেন পাশাপাশি যখন অন্য কোনও উপাদান যেমন ক্লিক করা হয় তখন ফোকাস হয়। এটি করার পরিষ্কার পদ্ধতির উদাহরণের জন্য zipstory.com/signup দেখুন।

— জেসন সেব্রিং

ধন্যবাদ; এটি আমার সাথে সম্পর্কিত আরও একটি প্রশ্নের উত্তর দিয়েছিল, সম্ভবত এটি কোনও লেবেলের ভিতরে একাধিক ইনপুট রাখে কিনা। (প্রসঙ্গ: বিভিন্ন রেডিও বোতাম অপশন, প্রতি লাইনে একটি করে, প্রতিটি রেডিও বোতাম এন্ট্রি 1, 2, 3, অথবা টাইপের পাঠ্যের সম্ভবত আরও ইনপুট থাকে, সেই লাইনের রেডিও বোতামটি নির্বাচনের ফলাফল প্রাপ্ত কোনও লাইনে ক্লিক করার ইচ্ছায়, যদি নির্বাচিত নয়, এবং সেই লাইনে ইনপুট / ইনপুটগুলির সম্পাদনা করার অনুমতি দেয়)) এটি ফর্মটিতে নন-ইনপুট পাঠ্যের জন্য একাধিক লেবেল রাখার দরজা উন্মুক্ত করে দেয়, তবে আমি কী ভেবেছিলাম তা ঠিক ছিল কিনা তা সম্পর্কে এটি আমার প্রশ্নের উত্তর দেয়। (এটি ছিল না))

— ক্রিস্টোস হ্যাওয়ার্ড

Answer 9

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

ডাব্লু 3 সি এবং প্রধান ব্রাউজার বিক্রেতাদের কাছ থেকে নেওয়া সিদ্ধান্তের কারণে ("আপনি এটি যেভাবেই পছন্দ করেন" এর পরিবর্তে "এটি সঠিক উপায়ে করুন" এর পরিবর্তে) ওয়েবটি আজ খুব গণ্ডগোল হয়ে গেছে এবং আমাদের বিকাশকারীদের জট বাঁধতে হবে এবং তাই বিভিন্ন লিগ্যাসি কোড।

Answer 10

আমি সাধারণত প্রথম দুটি বিকল্প নিয়ে যাই। তৃতীয় বিকল্পটি ব্যবহার করার সময় আমি একটি দৃশ্যাবলী দেখেছি, যখন রেডিও পছন্দগুলি যেখানে লেবেলে এম্বেড থাকে এবং সিএসএস এর মতো কিছু থাকে

label input {
    vertical-align: bottom;
}

যাতে রেডিওগুলির জন্য যথাযথ উল্লম্ব সারিবদ্ধতা নিশ্চিত করা যায়।

Answer 11

WHATWG ( কোনও ফর্মের ব্যবহারকারী ইন্টারফেস লেখা ) উল্লেখ করে ইনপুট ক্ষেত্রটি লেবেলের ভিতরে রাখা ভুল নয়। এটি আপনাকে কোড সংরক্ষণ করে কারণ এর forথেকে গুণকের labelআর প্রয়োজন নেই।

Answer 12

আমি আমার অভ্যন্তরে উপাদানগুলি মোড়ানো পছন্দ করি <label>কারণ আমাকে আইডিগুলি তৈরি করতে হবে না।

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

Answer 13

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

নীচে কাঠামো ব্যবহার:

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

যখন ব্যবহারকারী "লেবেল পাঠ্য" নিয়ন্ত্রণচেকবক্স () ফাংশনে ক্লিক করেন তখন একবার তাড়িয়ে দেওয়া হবে।

কিন্তু যখন ইনপুট ট্যাগ ক্লিক করা হয় তখন কন্ট্রোলচেকবক্স () ফাংশন কয়েকবার পুরানো ব্রাউজারগুলিতে দুবার বরখাস্ত হতে পারে। কারণ ইনপুট এবং লেবেল ট্যাগ উভয়ই চেকবাক্সের সাথে সংযুক্ত অনক্লিক ইভেন্টকে ট্রিগার করে।

তারপরে আপনার চেকবক্সস্টেটে কিছু বাগ থাকতে পারে।

আমি ই ই 11 এ ইদানীং এই সমস্যাটি চালিয়েছি। আমি নিশ্চিত নই যে আধুনিক ব্রাউজারগুলির এই কাঠামোর সাথে সমস্যা আছে কিনা।

Answer 14

inputভিতরে রাখার প্রাথমিক সুবিধাlabel হ'ল মানুষের জন্য দক্ষতা টাইপ করা এবং কম্পিউটারগুলির জন্য বাইট স্টোরেজ।

@ জ্নার্কাস ওপিতে নিজের মন্তব্যে বলেছেন,

নির্বাণ বড় অনুকূল এক <input />ভিতরে <label>, আপনি বাদ যায় forএবং id: <label>My text <input /></label>আপনার উদাহরণে। এত সুন্দর!

দ্রষ্টব্য: @ জার্নকনাস কোডে, অন্য একটি দক্ষতা মন্তব্যটিতে স্পষ্টভাবে বর্ণিত হয়নি included type="text"বাদ দেওয়া যায় এবং inputডিফল্টরূপে একটি পাঠ্য বাক্স রেন্ডার করে।

কীস্ট্রোক এবং বাইটগুলির সাথে এক সাথে তুলনা [1]।

31 কীস্ট্রোক, 31 বাইট

<label>My Text<input /></label>

58 কীস্ট্রোক, 58 বাইট

<label for="myinput">My Text</label><input id="myinput" />

অন্যথায়, স্নিপেটগুলি দৃশ্যত সমান এবং তারা ব্যবহারকারীর অ্যাক্সেসযোগ্যতার একই স্তরের অফার করে। কোনও ব্যবহারকারী পাঠ্য বাক্সে কার্সারটি রাখতে লেবেলে ক্লিক বা ট্যাপ করতে পারেন।

[1] উইন্ডোজ নোটপ্যাডে তৈরি করা টেক্সট ফাইল (.txt), উইন্ডোজ ফাইল এক্সপ্লোরার বৈশিষ্ট্য থেকে বাইটস