HTML input ট্যাগ একটি ইনপুট ফিল্ড তৈরি করে যেখান ব্যবহারকারী ডেটা ইনসার্ট করতে পারে। সাধারণ ইনপুট شامل: টেক্সট ফিল্ড, চেকবক্স, রেডিও বাটন, এবং ইমেইল ফিল্ড। একটি input ট্যাগকে label করা উচিত <label> ট্যাগ ব্যবহার করে।
HTML-এ ফর্মগুলোর একটি সংখ্যক ইনপুট এলিমেন্ট থাকে, যেগুলো একটি ওয়েবসাইটের ফ্রন্ট-এন্ডে ডেটা গ্রহণ করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি ওয়েব ফর্মে একটি চেকবক্স ইনপুট, একটি টেক্সট ইনপুট, এবং একটি রেডিও বাটন ইনপুট থাকতে পারে যেগুলোর সাথে ব্যবহারকারী ইন্টারঅ্যাক্ট করতে পারেন।
<input> ট্যাগ একটি HTML ফর্মে একটি ইনপুট এলিমেন্ট নির্ধারণ করতে ব্যবহৃত হয়। ইনপুট ট্যাগের মাধ্যমে সাবমিট হওয়া ডেটা বিস্তৃত ডেটা টাইপের রূপে প্রকাশ করা যায়। এগুলো টেক্সট থেকে নম্বর এবং হ্যাঁ/না রেসপন্স পর্যন্ত হতে পারে।
এই টিউটোরিয়াল উদাহরণের রেফারেন্সে আলোচনা করবে কীভাবে <input> ট্যাগ ব্যবহার করে একটি ফ্রন্ট-এন্ড ওয়েবসাইটে ফর্ম ইনপুট গ্রহণ করবেন। এই গাইড পড়া শেষ হলে, আপনি HTML <input> ট্যাগ ব্যবহার করে ব্যবহারকারীর ইনপুট গ্রহণ করার মাস্টার হবেন।
HTML ফর্ম
ফর্ম অনেক ওয়েবসাইটের অপরিহার্য অংশ যা ব্যবহারকারীদের সাইটের সাথে ইন্টারঅ্যাক্ট করতে দেয়। ফর্ম ব্যবহারকারীদের একটি সাইটে ডেটা সাবমিট করতে দেয়। এই ডেটা ক্লায়েন্ট বা একটি ব্যাক-এন্ড সার্ভার এবং ডেটাবেস দ্বারা প্রসেস করা যেতে পারে।
HTML-এ, ওয়েব ফর্মগুলো <form> এলিমেন্টের মধ্যে ঘোষণা করা হয়। <form> এলিমেন্টের সিনট্যাক্স:
<form> ... Form elements ... </form>
একটি <form> ট্যাগের ভেতরেই ফর্মের ভেতরের এলিমেন্টগুলো সংরক্ষিত থাকে। ফর্ম এলিমেন্টগুলোতে টেক্সট ফিল্ড, সাবমিট বাটন, রেডিও বাটন, মাল্টিলাইন টেক্সট বক্স, এবং HTML-এ গ্রহণযোগ্য অন্যান্য টাইপের ইনপুট ডেটা থাকতে পারে।
HTML Input
<input> এলিমেন্ট একটি ফর্ম ফিল্ড নির্ধারণ করে যেখান একজন ভিজিটর ডেটা সাবমিট করতে পারে। <input> সাপোর্ট করে: ডেট পিকার, একটি চেকবক্স, একটি বাটন, এবং একটি ফাইল আপলোডার।
৮১% অংশগ্রহণকারী বলেছেন বুটক্যাম্পে অংশ নেওয়ার পর তাদের টেক জব প্রস্পেক্টস সম্পর্কে অধিক আত্মবিশ্বাসী অনুভব করছেন। আজই একটি বুটক্যাম্পের সাথে ম্যাচ হোন।
গড় বুটক্যাম্প স্নাতক ক্যারিয়ার ট্রানজিশনে ছয় মাস কম ব্যয় করেছেন, বুটক্যাম্প শুরু থেকে প্রথম চাকরি পাওয়া পর্যন্ত।
<input> এলিমেন্টের সিনট্যাক্স নিচের মতো:
<input type="inputType">
<input> এলিমেন্ট অনেক অ্যাট্রিবিউট গ্রহণ করে, কিন্তু আপনাকে যে প্রধান অ্যাট্রিবিউটটি নির্দিষ্ট করতে হবে সেটি type অ্যাট্রিবিউট। আপনি যদি type অ্যাট্রিবিউট নির্দিষ্ট না করেন, <input> এলিমেন্ট ওয়েব পেজে দেখায় না। কারণ <input> এলিমেন্ট ডিফল্টভাবে খালি।
চলুন HTML <input> ট্যাগ কীভাবে কাজ করে সেটি প্রদর্শন করার জন্য কিছু উদাহরণ দেখা যাক।
আমাদেরকে একটি স্থানীয় স্যান্ডউইচ এবং স্যালাড স্টোর, Sue’s Salads-এর জন্য একটি ফর্ম তৈরি করতে বলা হয়েছে। এই ফর্ম কাস্টমারদের তাদের স্টোরে অভিজ্ঞতায় ভিত্তি করে ফিডব্যাক সাবমিট করতে দেবে। আমাদের যে ফর্মটি তৈরি করতে বলা হয়েছে সেটি গ্রহণ করা উচিত:
- কাস্টমারর নাম (টেক্সট হিসেবে)
- কাস্টমার কি স্টোরের লয়ালটি প্রোগ্রামের সাবস্ক্রাইবার কিনা তা ইঙ্গিত করার জন্য একটি চেকবক্স
- কাস্টমারর স্টোরে অভিজ্ঞতায় ভিত্তি করে ১-৫ রেটিং (নম্বর হিসেবে)
HTML ইনপুট টাইপস
<input> ট্যাগ ইনপুট টাইপের একটি রেঞ্জ গ্রহণ করে। একটি ইনপুট টাইপ "type" অ্যাট্রিবিউট দিয়ে নির্দিষ্ট করা হয়। সাধারণ ইনপুট টাইপ شامل: বাটন, ডেট পিকার, পাসওয়ার্ড ফিল্ড, এবং টেক্সট ফিল্ড।
<input> ট্যাগের সাথে ব্যবহৃত সাধারণ ফর্ম কন্ট্রোল ইনপুট টাইপের একটি সংক্ষিপ্ত তালিকা:
- button
- file
- checkbox
- password
- number
- radio
- submit
- text (text input type)
- url
- date (date and time picker)
- image
- email (email address input control)
Input Types HTML উদাহরণ
চলুন <input> HTML ট্যাগ ব্যবহার করে কয়েকটি ফর্ম ফিল্ড তৈরি করি।
টেক্সট ফিল্ডস
<input type=”text”> এলিমেন্ট HTML-এ একটি টেক্সট ফিল্ড তৈরি করতে ব্যবহৃত হয়। মান লেন আমরা একটি টেক্সট ফিল্ড তৈরি করতে চাই যা কাস্টমার থেকে তাদের নাম জিজ্ঞাসা করবে। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
<input type="text" placeholder="What is your name?">
আমাদের কোডে, আমরা দুটি অ্যাট্রিবিউট সহ একটি টেক্সট ফিল্ড তৈরি করেছি। type অ্যাট্রিবিউট text-এ সেট, অর্থাৎ আমাদের ফর্ম টেক্সট ইনপুট গ্রহণ করতে পারবে। placeholder অ্যাট্রিবিউটে What is your name? মান বসানো হয়েছে।
এই টেক্সট একটি প্লেসহোল্ডার মান হিসেবে দেখায় যতক্ষণ না ব্যবহারকারী ফিল্ডে টেক্সট টাইপ করা শুরু করে।
আমাদের কোড রিটার্ন করে:
<input type="text" placeholder="What is your name?">
আপনি দেখতে পাচ্ছেন, আমরা What is your name? প্লেসহোল্ডার ভ্যালু সহ একটি টেক্সট ফিল্ড তৈরি করেছি।
চেকবক্সস
HTML-এ, চেকবক্সগুলো ইনপুট হিসেবে মার্কআপ করা হয় যাদের টাইপ checkbox:
<input type="checkbox" id="loyalty" name="loyalty" value="Yes"> <label for="loyalty">Are you a subscriber to our loyalty program?</label>
এই কোড একটি চেকবক্স বাটন তৈরি করে যা "Yes" টেক্সট প্রদর্শন করে। চেকবক্স ক্লিক করলে হাইলাইট হবে।
আমাদের চেকবক্সের লেবেল "Are you a subscriber to our loyalty program?"। আপনি লেবেলে ক্লিক করলে চেকবক্স টগল হবে। লেবেল ইনপুট টাইপ অ্যাক্সেসিবিলিটির জন্য অপরিহার্য কারণ এটি রিডারকে সহজে ফর্মের বিষয়বস্তু জানতে দেয়।
HTML লেবেল সম্পর্কে আরও জানতে, আমাদের HTML <label> ট্যাগ গাইড পড়ুন।
চেকবক্সের সাথে অনেক অ্যাট্রিবিউট জড়িত।
- Type attribute. ইনপুট টাইপ চেকবক্সে সেট থাকতে হবে।
- ID. মনে রাখবেন ID-র সাথে তারা আপনার ফাইলে ইউনিক হতে হবে।
- Name and value. নেম এবং ভ্যালু অ্যাসাইন করা থাকলে ফর্ম সাবমিট হওয়ার পর সংগৃহীত ডেটা ডিল করার সুবিধা হয়।
- Checked. checked অ্যাট্রিবিউট, কারণ এটি কিছুতে অ্যাসাইন করা নেই, একটি বুলিয়ান অ্যাট্রিবিউট হিসেবে পরিচিত। checked থাকতে মানে সেটি অটোমেটিক্যালি true সেট। ডিফল্ট false, তাই আপনাকে শুধু তখন সেট করতে হবে আপনি চাইলে চেকবক্সটি চেকড থাকুক।
রেডিও বাটনস
<input type=”radio”> এলিমেন্ট HTML-এ একটি রেডিও বাটন তৈরি করতে ব্যবহৃত হয়।
"রেডিও বাটন" শব্দটি আসলে কার ইন্ডাস্ট্রি থেকে এসেছে, একটু বিচিত্র হলেও। কার স্টেরিওর ফিজিক্যাল বাটনগুলো হতো যেখানে একবারে শুধু একটি বাটন পুশ করা যেত। আপনি যদি অন্য সিলেকশন পুশ করতেন, আগের বাটনটি ডিসিলেক্ট হয়ে যেত।
চেকবক্স এবং রেডিও বাটন সেটের মধ্যে পার্থক্য হলো রেডিও বাটন আপনাকে শুধু একটি সিলেকশন বেছে নেওয়া দেয়। বাকি বাটনগুলো আপনি আপনার সিলেকশন চেক করলে ডিসেবল হয়ে যায় যাতে একাধিক রেডিও বাটন সিলেক্ট করা যায় না। অন্যদিকে, চেকবক্সে একাধিক সিলেকশন থাকতে পারে।
চেকবক্স ইনপুটকে রেডিও বাটন ইনপুটে রূপান্তর করতে আপনাকে দুটি কাজ করতে হবে। প্রথম, ইনপুট টাইপকে radio-এ পরিবর্তন করুন। সর্বশেষ, নিশ্চিত করুন name মান সকল রেডিও বাটনে মিলে। এটি হয় যাতে একটি সিলেক্ট হলে বাকিগুলো ডিসেবল হয়।
মান লেন আমরা একটি ফিল্ড তৈরি করতে চাই যা জিজ্ঞাসা করবে ব্যবহারকারী কি Sue’s Salads’ কাস্টমার লয়ালটি প্রোগ্রামের সাবস্ক্রাইবার। আমরা নিচের কোড ব্যবহার করে ফিল্ডটি তৈরি করতে পারি:
<label for="yes">Yes</label> <input type="radio" value="yes" id="yes" /> <label for="no">No</label> <input type="radio" value="no" id="no" />
আমাদের কোড রিটার্ন করে:
<label for="yes">Yes</label> <input type="radio" value="yes" id="yes"> <label for="no">No</label> <input type="radio" value="no" id="no">
আমাদের কোডে, আমরা দুটি রেডিও বাটন তৈরি করেছি। প্রথম রেডিও বাটন Yes লেবেল দিয়ে এবং value yes দিয়ে অ্যাসাইন করা হয়েছে। আমাদের দ্বিতীয় রেডিও বাটন No লেবেল দিয়ে এবং value no দিয়ে অ্যাসাইন করা হয়েছে।
নাম্বার ফিল্ডস
<input type=”number”> এলিমেন্ট একটি ফর্মে न्यুমেরিক ইনপুট গ্রহণ করতে ব্যবহৃত হয়।
মান লেন আমরা একটি ফর্ম তৈরি করতে চাই যা Sue’s Salads-এ একটি কাস্টমারকে তাদের অভিজ্ঞতা রেট করতে বলবে। কাস্টমাররা ১ থেকে ৫ এর মধ্যে একটি সংখ্যাসূচক গ্রেড দেবে। আমরা নিচের কোড ব্যবহার করে এই ডেটা সংগ্রহকারী একটি ওয়েব ফর্ম তৈরি করতে পারি:
<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label> <input type="number" min="1" max="5" />
আমাদের কোড রিটার্ন করে:
<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label> <input type="number" min="1" max="5">
আমরা একটি ফর্ম ফিল্ড তৈরি করেছি যা ১ থেকে ৫ এর মধ্যে যেকোনো নম্বর গ্রহণ করে। এই ফিল্ড শুধু নম্বর গ্রহণ করতে পারে। যদি একজন ব্যবহারকারী ফিল্ডে কোনো টেক্সট টাইপ করার চেষ্টা করে, টেক্সট প্রসেস হবে না।
অতিরিক্তভাবে, যেহেতু এই ফর্ম ফিল্ডের number টাইপ আছে, বক্সের ভেতরে দুটি ছোট আর্কো দেখায়। উপরের আর্কো ক্লিক করলে আমাদের ফিল্ডের মান ১ বাড়বে। নিচের আর্কো ক্লিক করলে আমাদের ফিল্ডের মান ১ কমবে।
উপসংহার
HTML <input> ট্যাগ একটি ফর্মে ব্যবহারকারীর ইনপুট গ্রহণ করতে ব্যবহৃত হয়। <input> ট্যাগ ব্যবহার করে নিউমেরিক্যাল ভ্যালু, টেক্সট, ডেট, হ্যাঁ/না রেসপন্স, এবং অন্যান্য টাইপের ডেটা গ্রহণ করা যায়।
এই টিউটোরিয়াল উদাহরণের রেফারেন্সে আলোচনা করেছে কীভাবে HTML <input> ট্যাগ ব্যবহার করবেন, এবং <input> ট্যাগের সাথে ব্যবহারের জন্য উপলব্ধ অ্যাট্রিবিউটগুলো। এখন আপনি HTML প্রোর মতো <input> ট্যাগ ব্যবহার করে ফর্ম ফিল্ড এলিমেন্ট তৈরি করতে পারবেন!
আপনি যদি HTML সম্পর্কে আরও জানতে চান, আমাদের পূর্ণ How to Learn HTML গাইড চেক করুন।
