HTML ইনপুট:ধাপে ধাপে নির্দেশিকা

<form>
	... Form elements ...
</form>

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

HTML ইনপুট

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

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

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

এলিমেন্টের সিনট্যাক্স নিম্নরূপ:

<input type="inputType">

<ইনপুট> উপাদানটি বেশ কয়েকটি বৈশিষ্ট্য গ্রহণ করে, তবে আপনাকে যে প্রধান বৈশিষ্ট্যটি নির্দিষ্ট করতে হবে তা হল টাইপ বৈশিষ্ট্য। আপনি একটি টাইপ অ্যাট্রিবিউট নির্দিষ্ট না করলে, উপাদানটি একটি ওয়েব পৃষ্ঠায় প্রদর্শিত হবে না। এর কারণ হল উপাদানটি ডিফল্টরূপে খালি।

এইচটিএমএল <ইনপুট> ট্যাগ কিভাবে কাজ করে তা দেখানোর জন্য আসুন কয়েকটি উদাহরণের মাধ্যমে চলুন।

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

• গ্রাহকের নাম (টেক্সট হিসাবে)
• ক্লায়েন্ট স্টোরের লয়্যালটি প্রোগ্রামের (একটি চেকবক্স) গ্রাহক কিনা তা নির্দেশ করার জন্য একটি চেকবক্স
• স্টোরে গ্রাহকের অভিজ্ঞতার ভিত্তিতে একটি 1-5 রেটিং (একটি সংখ্যা হিসাবে)

HTML ইনপুট প্রকারগুলি

ট্যাগ ইনপুট প্রকারের একটি পরিসর গ্রহণ করে। একটি ইনপুট টাইপ "টাইপ" অ্যাট্রিবিউট ব্যবহার করে নির্দিষ্ট করা হয়। সাধারণ ইনপুট প্রকারের মধ্যে রয়েছে বোতাম, তারিখ বাছাইকারী, পাসওয়ার্ড ক্ষেত্র এবং পাঠ্য ক্ষেত্র৷

এখানে ট্যাগ:

• বোতাম
• ফাইল
• চেকবক্স
• পাসওয়ার্ড
• সংখ্যা
• রেডিও
• জমা দিন
• টেক্সট (টেক্সট ইনপুট টাইপ)
• url
• তারিখ (তারিখ এবং সময় চয়নকারী)
• ছবি
• ইমেল (ইমেল ঠিকানা ইনপুট নিয়ন্ত্রণ)

ইনপুট প্রকার HTML উদাহরণ

চলুন HTML ট্যাগ

পাঠ্য ক্ষেত্র

<ইনপুট টাইপ=”টেক্সট”> এলিমেন্টটি HTML এ একটি টেক্সট ফিল্ড তৈরি করতে ব্যবহৃত হয়। ধরুন আমরা একটি পাঠ্য ক্ষেত্র তৈরি করতে চাই যা একজন গ্রাহককে তাদের নাম জিজ্ঞাসা করে। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

<input type="text" placeholder="What is your name?">

আমাদের কোডে, আমরা দুটি বৈশিষ্ট্য সহ একটি পাঠ্য ক্ষেত্র তৈরি করেছি। টাইপ অ্যাট্রিবিউট টেক্সটে সেট করা আছে, যার মানে আমাদের ফর্ম টেক্সট ইনপুট গ্রহণ করতে পারে। স্থানধারক বৈশিষ্ট্যের মান নির্ধারণ করা হয় আপনার নাম কি?.

এই পাঠ্যটি একটি স্থানধারক মান হিসাবে প্রদর্শিত হবে যতক্ষণ না কোনো ব্যবহারকারী ক্ষেত্রটিতে পাঠ্য টাইপ করা শুরু করেন৷

আমাদের কোড ফিরে আসে:

<input type="text" placeholder="What is your name?">

আপনি দেখতে পাচ্ছেন, আমরা স্থানধারক মান সহ একটি পাঠ্য ক্ষেত্র তৈরি করেছি What is your name?

চেকবক্স

এইচটিএমএল-এ, চেকবক্সগুলিকে ইনপুট হিসাবে চিহ্নিত করা হয় যা চেকবক্স প্রকারের হয়:

<input type="checkbox" id="loyalty" name="loyalty" value="Yes"> 
<label for="loyalty">Are you a subscriber to our loyalty program?</label>

এই কোডটি একটি চেকবক্স বোতাম তৈরি করে যা "হ্যাঁ" পাঠ্য প্রদর্শন করে। চেকবক্সে ক্লিক করা হলে, এটি হাইলাইট করা হবে।

আমাদের চেকবক্সে লেবেল আছে "আপনি কি আমাদের লয়্যালটি প্রোগ্রামের একজন গ্রাহক?" আপনি লেবেলে ক্লিক করলে, চেকবক্সটি টগল হয়ে যাবে। প্রবেশযোগ্যতার জন্য লেবেল ইনপুট টাইপ অপরিহার্য কারণ এটি নিশ্চিত করে যে পাঠক সহজেই একটি ফর্মের বিষয়বস্তু সম্পর্কে জানতে পারবে।

HTML লেবেল সম্পর্কে আরও জানতে, HTML ট্যাগ

চেকবক্সে তাদের সাথে যুক্ত একাধিক বৈশিষ্ট্য রয়েছে।

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

রেডিও বোতাম

HTML এ একটি রেডিও বোতাম তৈরি করতে <ইনপুট টাইপ=”রেডিও”> এলিমেন্ট ব্যবহার করা হয়।

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

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

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

ধরা যাক আমরা একটি ক্ষেত্র তৈরি করতে চাই যা জিজ্ঞাসা করে যে একজন ব্যবহারকারী 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">

আমাদের কোডে, আমরা দুটি রেডিও বোতাম তৈরি করেছি। প্রথম রেডিও বোতামটি হ্যাঁ লেবেল বরাদ্দ করা হয়েছে এবং এর মান হ্যাঁ আছে। আমাদের দ্বিতীয় রেডিও বোতামটি No লেবেল বরাদ্দ করা হয়েছে এবং এর মান নম্বর রয়েছে৷

সংখ্যার ক্ষেত্রগুলি

উপাদানটি একটি ফর্মে সংখ্যাসূচক ইনপুট গ্রহণ করতে ব্যবহৃত হয়।

ধরুন আমরা এমন একটি ফর্ম তৈরি করতে চেয়েছিলাম যা Sue's Salads-এর একজন গ্রাহককে দোকানে তাদের অভিজ্ঞতার রেট দিতে বলে। গ্রাহকদের 1 থেকে 5 এর মধ্যে একটি সংখ্যাসূচক গ্রেড দেওয়া উচিত। আমরা একটি ওয়েব ফর্ম তৈরি করতে পারি যা নিম্নলিখিত কোড ব্যবহার করে এই ডেটা সংগ্রহ করে:

<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">

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

উপরন্তু, যেহেতু এই ফর্ম ক্ষেত্রের সংখ্যার ধরন রয়েছে, তাই বাক্সের ভিতরে দুটি ছোট তীর দেখা যাচ্ছে। যখন উপরের তীরটি ক্লিক করা হয়, তখন আমাদের ক্ষেত্রের মান 1 দ্বারা বৃদ্ধি পাবে৷ যদি নীচের তীরটি ক্লিক করা হয়, আমাদের ক্ষেত্রের মানটি 1 দ্বারা হ্রাস পাবে৷

উপসংহার

HTML ট্যাগটি একটি ফর্মে ব্যবহারকারীর ইনপুট গ্রহণ করতে ব্যবহৃত হয়। <ইনপুট> ট্যাগটি সংখ্যাসূচক মান, পাঠ্য, তারিখ, হ্যাঁ/না প্রতিক্রিয়া এবং অন্যান্য ধরণের ডেটা গ্রহণ করতে ব্যবহার করা যেতে পারে।

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

আপনি যদি HTML সম্বন্ধে আরও জানতে চান, তাহলে কীভাবে HTML শিখবেন তার সম্পূর্ণ নির্দেশিকা দেখুন৷