এইচটিএমএল ফর্ম: নির্বাচন-বিকল্প বনাম ডেটাালিস্ট-বিকল্প

Question

আমি ভাবছিলাম সিলেক্ট-অপশন এবং ডেটালিস্ট-বিকল্পের মধ্যে পার্থক্যগুলি কী। এমন কোনও পরিস্থিতি আছে যেখানে একটি বা অন্যটি ব্যবহার করা ভাল? প্রত্যেকের একটি উদাহরণ অনুসরণ করে:

বিকল্প বেছে নিন

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Datalist-অপশন

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Comments

কারণ এইচটিএমএল 5 সুনির্দিষ্টভাবে বলেছে যে অব্যক্ত বৈশিষ্ট্যগুলি বৈধ: w3.org/TR/html-markup/syntax.html#syntax-attr-unquote

— james.garriss

যে কেউ জানেন যে আমরা কেন optionডেটালিস্ট-বিকল্পে ট্যাগটি বন্ধ করি না ? সুব্লাইম চাইছে বলে মনে হচ্ছে

— জনি মেটজ

@ জননি মেটজ আপনি ট্যাগটি বন্ধ করতে পারেন তবে এটি স্বয়ং বন্ধ হয়ে যেতে পারে আপনি এর মতো কিছু করতেও পারেন: code <ইনপুট তালিকা = "ব্রাউজারগুলি" নাম = "ব্রাউজার"> <ড্যাটালিস্ট আইডি = "ব্রাউজারগুলি"> <বিকল্প মান = "ফায়ারফক্স" > ফায়ারফক্স </option> <অপশন মান = "যেমন"> আই </ translation> <অপশন মান = "ক্রোম"> ক্রোম </ translation> <অপশন মান = "অপেরা"> অপেরা </option> <বিকল্প মান = " সাফারি "> সাফারি </ translation> </datalist> codeফলাফলটি অদ্ভুত। তালিকাগুলি তালিকাতে মানটি মুদ্রণ করে। সেই মানটি তখন ইনপুট ক্ষেত্রের মান হয়ে যায়।

— সারা এম গিলস

@ জোহনিমেটজ, এইচটিএমএল 5 অংশ ছিল এক্সএইচটিএমএলের বিরুদ্ধে একটি প্রতিক্রিয়া। নির্দিষ্ট উপাদানগুলির জন্য, যেমন option, একটি ক্লোজিং ট্যাগ থাকা বা স্ব-সমাপন হওয়ার দরকার নেই। এইচটিএমএল 5! = এক্সএইচটিএমএল।

— james.garriss

অনুমানটি বলে, "নির্দিষ্ট কিছু সাধারণ উপাদানগুলির শুরু এবং শেষের ট্যাগগুলি বাদ দেওয়া যেতে পারে।" এটি আরও বলেছে, "বিকল্প উপাদানটির সাথে সাথে অন্য বিকল্প উপাদানটি অনুসরণ করা বা যদি তা অবিলম্বে একটি অপ্টগ্রুপ উপাদান অনুসরণ করা হয়, বা যদি প্যারেন্ট উপাদানটিতে আরও কোনও সামগ্রী না থাকে তবে কোনও বিকল্প উপাদানটির শেষ ট্যাগ বাদ দেওয়া যেতে পারে।" w3.org/TR/html/syntax.html#optional-tags

— james.garriss

Answer 1

এটি একটি প্রয়োজন এবং পরামর্শের মধ্যে পার্থক্য হিসাবে ভাবেন। জন্য selectউপাদান, ব্যবহারকারী বিকল্প দিয়েছি একটি নির্বাচন প্রয়োজন। জন্য datalistউপাদান, এটা পরামর্শ দেওয়া হয় ব্যবহারকারী বিকল্প দিয়েছি একটি নির্বাচন, কিন্তু আসলে কিছু তিনি ইনপুটে চায় লিখতে পারেন।

সম্পাদনা 1: সুতরাং আপনি কোনটি ব্যবহার করেন তা আপনার প্রয়োজনীয়তার উপর নির্ভর করে। যদি ব্যবহারকারীকে আপনার পছন্দগুলির মধ্যে একটি প্রবেশ করতেই পারে তবে selectউপাদানটি ব্যবহার করুন । যদি ব্যবহার যা কিছু প্রবেশ করতে পারে তবে datalistউপাদানটি ব্যবহার করুন ।

সম্পাদনা 2: এইচডিএমএল লিভিং স্ট্যান্ডার্ডে এই টিডবিটটি পাওয়া গেছে : "প্রতিটি বিকল্প উপাদান যা ডেটালিস্ট উপাদানটির বংশধর ... একটি পরামর্শ উপস্থাপন করে।"

Comments

এছাড়াও, অন্যান্য ব্রাউজারগুলিতে এটির বেশিরভাগ [আংশিক সমর্থন] (( ক্যানিউজ.com / #feat=datalist ) রয়েছে, যেমন দীর্ঘ ড্যাটিলিস্টগুলি অনিচ্ছিন্ন হয়ে যায় ইত্যাদি)

— গোবিন্দ রায় ২

এই মুহুর্তে ক্রোমে, যদি ডেটা প্রবেশ করা হয় (টাইপ করা হয়) এটি তীরটি ক্লিক করা থেকে নিষেধ করে। এটি বেশিরভাগ ক্ষেত্রেই আদর্শ নয়।

— ডেভিড

Answer 2

প্রযুক্তিগত দৃষ্টিকোণ থেকে তারা সম্পূর্ণ আলাদা। <datalist>অন্যান্য উপাদানগুলির জন্য বিকল্পগুলির একটি বিমূর্ত ধারক। আপনার ক্ষেত্রে আপনি এটি ব্যবহার করেছেন <input type="text"তবে আপনি এটি ব্যাপ্তি, রঙ, খেজুর ইত্যাদি দিয়েও ব্যবহার করতে পারেন http://demo.agektmr.com/datalist/

যদি এটি কোনও ধরণের স্বতঃপূরণ হিসাবে পাঠ্য ইনপুট সহ ব্যবহার করা হয়, তবে সত্যিই প্রশ্নটি হল: ফ্রি-ফর্ম পাঠ্য ইনপুট, বা বিকল্পগুলির একটি পূর্বনির্ধারিত তালিকা ব্যবহার করা ভাল? সেক্ষেত্রে আমি মনে করি উত্তরটি আরও কিছুটা সুস্পষ্ট।

যদি আমরা <datalist>একটি পাঠ্য ক্ষেত্রের জন্য বিকল্পগুলির তালিকা হিসাবে ব্যবহারের দিকে মনোনিবেশ করি তবে এখানে তার এবং একটি নির্বাচিত বাক্সের মধ্যে কিছু নির্দিষ্ট পার্থক্য রয়েছে:

• একটি <datalist>খাওয়ানো পাঠ্য বাক্সে উভয় ডিসপ্লে লেবেল এবং জমা দেওয়ার জন্য একক স্ট্রিং থাকে। একটি নির্বাচিত বাক্সে বনাম প্রদর্শন লেবেল ভিন্ন জমা থাকতে পারে <option value='ie'>Internet Explorer</option>।
• একটি <datalist>খাওয়ানো পাঠ্য বাক্স <optgroup>প্রদর্শনটি সংগঠিত করতে ট্যাগ সমর্থন করে না ।
• আপনি একটি বিকল্প তালিকায় একটি ব্যবহারকারী সীমাবদ্ধ না পারেন, <datalist>হচ্ছে আপনি একটি সঙ্গে করতে পারেন <select>।
• Onchange ঘটনা ভিন্নভাবে কাজ করে। একটি <select>উপাদানের উপর, পরিবর্তনের সাথে সাথে ওনিচ ইভেন্টটি তাত্ক্ষণিকভাবে গুলি করা হয়, যখন <input type="text"উপাদানটির ফোকাস হারাতে বা ব্যবহারকারী চাপলে প্রবেশের পরে ইভেন্টটি ফায়ার করা হয়।
• <datalist>ব্রাউজারগুলির জুড়ে সত্যই দাগযুক্ত সমর্থন রয়েছে। সমস্ত উপলভ্য বিকল্পগুলি দেখানোর উপায়টি বেমানান এবং জিনিসগুলি কেবল সেখান থেকে খারাপ হয়ে যায়।

শেষ পয়েন্টটি আমার মতে সত্যই বড়। যেহেতু আপনার কাছে আরও সার্বজনীন স্ব-পরিপূর্ণ ফ্যালব্যাক থাকতে হবে, তাই এটিকে কনফিগার করার সমস্যায় পড়ার প্রায় কোনও কারণ নেই <datalist>। প্লাস কোনও শালীন স্বয়ংক্রিয় পরিপূর্ণ প্লাগিং আপনার বিকল্পগুলির প্রদর্শনকে স্টাইল করার উপায়গুলিকে মঞ্জুরি দেয়, যা <datalist>তা করে না। আপনি যদি চান এমন যে উপাদানগুলি ম্যানিপুলেট করতে পারলে যদি তা <datalist>গৃহীত হয় <li>তবে এটি সত্যিই দুর্দান্ত হত! কিন্তু না.

এছাড়াও ইনসোফার হিসাবে আমি বলতে পারি, <datalist>অনুসন্ধানটি স্ট্রিংয়ের শুরু থেকে একটি সঠিক মিল। সুতরাং আপনার যদি <option value="internet explorer">এবং আপনি 'এক্সপ্লোরার' অনুসন্ধান করে থাকেন তবে কোনও ফল পাবেন না। বেশিরভাগ স্বতঃসিদ্ধ প্লাগইন পাঠ্যের যে কোনও জায়গায় অনুসন্ধান করবে।

আমি কেবলমাত্র <datalist>কয়েকটি অভ্যন্তরীণ পৃষ্ঠাগুলির জন্য দ্রুত এবং অলস সুবিধার্থী সহায়ক হিসাবে ব্যবহার করেছি যেখানে আমি 100% নিশ্চিততার সাথে জানি যে ব্যবহারকারীদের কাছে সর্বশেষতম ক্রোম বা ফায়ারফক্স রয়েছে এবং তারা বোগাস মান জমা দেওয়ার চেষ্টা করবে না। অন্য যে কোনও ক্ষেত্রে, <datalist>খুব দুর্বল ব্রাউজার সমর্থনের কারণে ব্যবহারের সুপারিশ করা কঠিন hard

Comments

দুর্দান্ত উত্তর !! আপনি দয়া করে আপনার দ্বিতীয় বুলেট ব্যাখ্যা করতে পারেন? "ডিসপ্লেটি সাজানোর জন্য অপশন গ্রুপগুলি" বলতে কী বোঝ? ধন্যবাদ।

— গোবিন্দ রায়

আফিক (2019 সালে, ক্রোম এবং ফায়ারফক্সে), <ড্যাটালিস্ট> ইনফিক্সের সাথে মেলে (কেবল উপসর্গ নয়)। তাই "টাইপিং" পুনরায় ফায়ারফক্স "এবং" ইন্টারনেট এক্সপ্লোরার "" উভয় প্রস্তাব দেওয়া "।

— স্যাম boosalis

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

— ইউএস

আমি ফায়ারফক্স 66 66 এবং ক্রোম under 73 এর অধীনে পরীক্ষা করে দেখেছি - প্রকৃতপক্ষে, ডেটালিস্ট লেবেলগুলি যে কোনও জায়গায় মিলেছে, সুতরাং উদাহরণস্বরূপ যদি আপনার ডাটালিস্টের দেশের নাম থাকে তবে "টেড" "মার্কিন যুক্তরাষ্ট্র" এবং "যুক্তরাজ্য" এর সাথে মিলবে।

— বায়োটোসমেটেক

Answer 3

ডেটালিস্ট স্বতঃসিদ্ধ এবং স্থানীয়ভাবে পরামর্শ অন্তর্ভুক্ত করে, এটি কোনও ব্যবহারকারীর এমন কোনও মান প্রবেশের অনুমতি দিতে পারে যা পরামর্শগুলিতে সংজ্ঞায়িত হয় না।

নির্বাচন কেবলমাত্র আপনাকে প্রাক-সংজ্ঞায়িত বিকল্প দেয় যা ব্যবহারকারীদের থেকে নির্বাচন করতে হবে

Answer 4

এইচটিএমএল 5 সমর্থিত ব্রাউজারগুলিতে ডেটা তালিকা একটি নতুন এইচটিএমএল ট্যাগ। এটি কয়েকটি বিকল্পের তালিকা সহ একটি পাঠ্য বাক্স হিসাবে রেন্ডার করে। লিঙ্গ পাঠ্য বাক্সের উদাহরণের জন্য আপনি পাঠ্য বাক্সে 'এম' বা 'এফ' টাইপ করার সময় এটি আপনাকে পুরুষ মহিলা হিসাবে বিকল্প দেয়।

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

Comments

সত্য, তবে এটি একটি দুর্দান্ত, নতুন টুকরো তথ্য দেয়, যথা প্রথম অক্ষরটি টাইপ করা তালিকার সাথে সম্পর্কিত আইটেমগুলি নির্বাচন করবে।

— james.garriss

Answer 5

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

যেমন একটি ক্ষেত্রে, আমি ব্যবহারের বিষয়ে বিবেচনা করবে datalistসঙ্গে input, কারণ একই datalistযে কোন সংখ্যার জন্য ব্যবহার করা যেতে inputসে। এটি সম্ভবত সার্ভারে প্রচুর পরিমাণে রেন্ডারিং সময় বাঁচাতে পারে এবং যে কোনও সারিতে আরও ভাল পরিমাণে স্কেল করে।

Comments

আপনি যদি ব্যবহারকারীকে বেছে নিতে বিকল্পগুলি দিতে বিরক্ত করছেন না, তবে একজন ডাটালিস্ট ব্যবহার করে বিরক্ত করবেন কেন? পরিবর্তে একটি পাঠ্য ক্ষেত্র ব্যবহার করুন।

— james.garriss 22:53

Answer 6

আমি লক্ষ্য করেছি যে ডেটালিস্টে কোনও নির্বাচিত বৈশিষ্ট্য নেই। এটি কেবল আপনাকে পছন্দ দেয় তবে একটি ডিফল্ট বিকল্প থাকতে পারে না। আপনি পরবর্তী পৃষ্ঠায় নির্বাচিত বিকল্পটি প্রদর্শন করতে পারবেন না।

Comments

ইনপুট প্লাস ডেটালিস্টের সমতুল্য ইনপুটটিতে মান = "(ডিফল্ট বিকল্প)" সেট করে। টাইপ = "পাঠ্য" সহ একটি ইনপুটগুলির জন্য, এই পাঠ্যটি ডিফল্টরূপে প্রদর্শিত হবে তবে সম্পাদনযোগ্য হবে।

— বেমিসাওয়া

Answer 7

তার মাঝে আরেকটি গুরুত্বপূর্ণ পার্থক্য নেই selectএবং datalist। এখানে ব্রাউজার সমর্থন ফ্যাক্টর আসে।

নির্বাচনটি ড্যাটিলিস্টের তুলনায় ব্রাউজারগুলি দ্বারা ব্যাপকভাবে সমর্থিত। ড্যাটিলিস্ট - এর সম্পূর্ণ ব্রাউজার সমর্থনের জন্য এই পৃষ্ঠাটি একবার দেখুন

ডেটালিস্ট ব্রাউজার সমর্থন

নির্বাচন হিসাবে কার্যকরভাবে সমস্ত ব্রাউজারগুলিতে সমর্থন করা হয় (যেহেতু আই 6 +, ফায়ারফক্স 2+, ক্রোম 1+ ইত্যাদি)

Answer 8

এটি নির্বাচনের অনুরূপ, তবে ডেটালালিস্টের অটো প্রস্তাবের মতো অতিরিক্ত কার্যকারিতা রয়েছে। আপনি টাইপ করতে এবং টাইপ করতে এবং যখন আপনি টাইপ করতে পারেন দেখতে পারেন।

ব্যবহারকারী তালিকায় নেই এমন আইটেমগুলি লিখতেও সক্ষম হবেন।