HTML Select: ড্রপডাউন লিস্ট তৈরির পূর্ণ নির্দেশিকা

HTML <select> ট্যাগ একটি তালিকা তৈরি করে যেখান থেকে ব্যবহারকারী এক বা একাধিক অপশন সিলেক্ট করতে পারে। একটি <select> ট্যাগে এক বা একাধিক <option> ট্যাগ থাকা উচিত যা ব্যবহারকারীর সিলেক্ট করতে পারা চয়েসগুলোকে প্রতিনিধিত্ব করে।

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

HTML <select> ট্যাগ একটি ফর্ম এলিমেন্ট তৈরি করে যা অপশনগুলোর একটি তালিকা প্রদান করে যেখান থেকে ব্যবহারকারী এক বা একাধিক সিলেক্ট করতে পারে। <option> এলিমেন্ট সিলেকশন বক্সে যে অপশনগুলো দেখাবে সেগুলো নির্দিষ্ট করে।

এই টিউটোরিয়াল HTML <select> ট্যাগ কীভাবে ব্যবহার করবেন সেটি আলোচনা করবে। আমরা একটি উদাহরণ রেফার করব যাতে আপনি এই ট্যাগ ব্যবহার শুরু করতে পারেন।

HTML ফর্ম

ফর্ম অনেক ওয়েবসাইটের একটি অপরিহার্য অংশ, এবং আপনাকে একটি ব্যবহারকারীর কাছ থেকে ডেটা গ্রহণ করতে দেয় যা আপনি আপনার ওয়েবসাইটে প্রসেস করতে পারেন। উদাহরণস্বরূপ, আপনি একটি কফি শপের ওয়েবসাইট ডিজাইন করছেন, আপনি একটি ফর্ম তৈরি করতে চাইতে পারেন যা কাস্টমারদের ফিডব্যাক গ্রহণ করবে।

HTML-এ, <form> ট্যাগ একটি ফর্ম ঘোষণা করতে ব্যবহৃত হয়। তারপর, আপনি <input> এবং select এর মতো HTML এলিমেন্ট ব্যবহার করে ফর্মটি কী ডেটা সংগ্রহ করবে সেটি নির্ধারণ করতে পারেন। এই টিউটোরিয়ালে, আমরা <select> ট্যাগে ফোকাস করব, এবং কীভাবে এটি ফর্মে ডেটা সংগ্রহ করতে ব্যবহার করা যায় সেটি।

HTML ফর্ম সম্পর্কে আরও জানতে, আমাদের HTML ফর্মের বিগিনার গাইড পড়ুন।

HTML <select> ট্যাগ

HTML <select> ট্যাগ একটি তালিকা তৈরি করে যেখান থেকে ব্যবহারকারী এক বা একাধিক অপশন সিলেক্ট করতে পারে। একটি <option> এলিমেন্ট <select> ট্যাগে একটি প্রত্যক্ষ অপশন নির্দিষ্ট করে।

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

গড় বুটক্যাম্প স্নাতক ক্যারিয়ার ট্রানজিশনে ছয় মাস কম ব্যয় করেছেন, বুটক্যাম্প শুরু থেকে প্রথম চাকরি পাওয়া পর্যন্ত।

<select> ট্যাগ একটি ফর্ম ফিল্ড তৈরি করে যা ক্লিক করলে একটি ড্রপডাউন লিস্ট দেখায় যেখানে থেকে ব্যবহারকারী বেছে নিতে পারে।

<select> ট্যাগের সিনট্যাক্স নিচের মতো:

<select></select>

নিজে থেকে, <select> ট্যাগের কোনো অপশন নেই। <select> ট্যাগে যে অপশনগুলো দেখাবে সেগুলো নির্ধারণ করতে আমাদের <option> ট্যাগ ব্যবহার করতে হবে।

<option> ট্যাগের সিনট্যাক্স:

<select> <option value="optionOne">Option One</option> </select>

<option> ট্যাগ একটি <select> ট্যাগের মধ্যে থাকে। এই উদাহরণে, আমরা আমাদের <select> ট্যাগের সাথে value অ্যাট্রিবিউটও নির্দিষ্ট করেছি।

এটি সার্ভারে সাবমিট होने वाले ডেটা মান সংরক্ষণ করতে ব্যবহৃত হয় যদি ব্যবহারকারী একটি নির্দিষ্ট অপশন সিলেক্ট করে। এই ক্ষেত্রে, যদি একজন ব্যবহারকারী লিস্ট থেকে Option One সিলেক্ট করে, optionOne সার্ভারে পাঠানো হবে।

প্রতিটি <option> ট্যাগের একটি নির্দিষ্ট value অ্যাট্রিবিউট থাকা উচিত।

HTML <select> ট্যাগ সমস্ত বড় আধুনিক ব্রাউজার দ্বারা সমর্থিত।

কেন <select> HTML ট্যাগ ব্যবহার করবেন?

<select> ট্যাগ ব্যবহার করা উপকারী যখন আপনি একটি ফর্ম ফিল্ডে ব্যবহারকারীর প্রবেশ করানোর মানগুলোর সীমাবদ্ধ করতে চান। এখানে কিছু উদাহরণ যেখানে <select> ট্যাগ উপকারী হতে পারে:

• ব্যবহারকারীকে বেছে নেওয়ার জন্য দেশের একটি তালিকা দিন।
• একটি প্রোডাক্টের জন্য উপলব্ধ রঙের তালিকা দিন যেখান থেকে বেছে নেওয়া যাবে।
• ব্যবহারকারীকে একটি প্রোডাক্টের পরিমাণ বেছে নেওয়ার অনুমতি দিন (যেমন ১ থেকে ১০)।

এই مواردে, অপশনগুলো সীমিত। ড্রপডাউন মেনু ব্যবহার মানে আপনি আপনার কোডের জন্য অর্থবহ একটি রেসপন্স পেতে পারেন। কারণ ব্যবহারকারী যেকোনো মান ইনপুট করতে পারবেন না, যেন একটি সিলেক্ট ফিল্ডে করতে পারতেন, যা আপনি হয়তো পূর্বাভাস করতেন না।

HTML <select> উদাহরণ

মান লেন আমরা একটি স্থানীয় বেকারির জন্য একটি ওয়েব ফর্ম তৈরি করছি। আমাদের কে বলা হয়েছে একটি ফর্ম তৈরি করতে যা ব্যবহারকারীকে রুটি অর্ডার করতে দেবে। এই ফর্মে রুটির একটি ড্রপডাউন লিস্ট থাকা উচিত যেখান থেকে ব্যবহারকারী একটি রুটি বেছে নিতে পারবে। অপশনগুলো যেগুলো থাকা উচিত:

• Plain White
• Plain Brown
• Whole Grain
• Sourdough

ডিফল্টভাবে, Plain White সিলেক্ট করা থাকা উচিত।

এই HTML ড্রপ ডাউন মেনু তৈরি করতে আমরা নিচের কোড ব্যবহার করতে পারি:

<select name="breadType"> <option value="plainWhite" selected>Plain White</option> <option value="plainBrown">Plain Brown</option> <option value="wholeGrain">Whole Grain</option> <option value="sourdough">Sourdough</option> </select>

আমাদের কোড রিটার্ন করে:

প্রথমে, আমরা একটি <select> ট্যাগ ব্যবহার করে আমাদের সিলেকশন লিস্ট নির্ধারণ করি। আমরা name অ্যাট্রিবিউট নির্দিষ্ট করি, যা সিলেক্ট ফর্ম কন্ট্রোলের নাম নির্দিষ্ট করে, এবং অ্যাট্রিবিউটে breadType মান বসাই।

তারপর, আমরা চারটি <option> ট্যাগ ব্যবহার করে ব্যবহারকারীর কাছে প্রদর্শন করা উচিত অপশনগুলোর তালিকা তৈরি করি। এই <option> ট্যাগগুলোতে প্রতিটির একটি value অ্যাট্রিবিউট নির্দিষ্ট আছে। এই অ্যাট্রিবিউট ব্যবহারকারী ফর্ম সাবমিট করলে সার্ভারে সাবমিট হওয়া অপশনের মান সংরক্ষণ করে।

প্রথম <option> ট্যাগ, যার লেবেল টেক্সট Plain White দেখাচ্ছে, এর একটি selected অ্যাট্রিবিউটও নির্দিষ্ট আছে। এটি Plain White-কে ডিফল্ট সিলেক্টেড অপশন বানায়।

আমরা multiple অ্যাট্রিবিউট ব্যবহার করে ব্যবহারকারীকে লিস্টে একাধিক অপশন সিলেক্ট করতে দিতে পারি:

<select name="breadType" multiple> <option value="plainWhite" selected="">Plain White</option> <option value="plainBrown">Plain Brown</option> <option value="wholeGrain">Whole Grain</option> <option value="sourdough">Sourdough</option> </select>

multiple অ্যাট্রিবিউট একটি কিওয়ার্ড। এর মানে আপনাকে অ্যাট্রিবিউটে মান বসাতে ইকুয়ালসাইন ব্যবহার করতে হবে না।

একাধিক মান সিলেক্ট করতে, উইন্ডোজে Ctrl বাটন বা ম্যাকএ Cmd বাটন চাপা রেখে রাখুন।

HTML <select> ট্যাগ অ্যাট্রিবিউট

<select> ট্যাগের কিছু নির্দিষ্ট HTML অ্যাট্রিবিউট আছে যেগুলো ট্যাগে প্রযোজ্য। সেগুলো নিচে:

উপসংহার

HTML <select> এলিমেন্ট একটি ফর্ম ফিল্ড তৈরি করে যা ডিফল্ট মানের একটি তালিকা প্রদর্শন করে। ব্যবহারকারী তালিকা থেকে এক বা একাধিক মান বেছে নিতে পারে। <select> ফিল্ডগুলো উপকারী যখন আপনি একজন ব্যবহারকারীকে একটি পূর্বনির্ধারিত সম্ভাব্য মানের তালিকা থেকে একটি মান সিলেক্ট করতে চান।

এই টিউটোরিয়াল একটি উদাহরণের রেফারেন্সে আলোচনা করেছে কীভাবে আপনি <select> ট্যাগ ব্যবহার করে HTML-এ একটি ড্রপডাউন লিস্ট ফর্ম ফিল্ড তৈরি করতে পারেন।

আপনি কি HTML প্রোগ্রামিং সম্পর্কে আরও জানতে চান? আমাদের How to Learn HTML গাইড দেখুন। এই গাইডে HTML শিখার টপ টিপস এবং আপনার জ্ঞান বাড়াতে সাহায্য করার লার্নিং রিসোর্সের তালিকা আছে।