ব্যবহারকারীদের ফর্মগুলিতে ডেটা প্রবেশ করতে সহায়তা করুন

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

ফর্ম উপাদান কি?

আপনি দুটি <input> উপাদান দেখতে পাচ্ছেন, <input type="text"> এবং <input type="file"> কেন তারা ভিন্ন চেহারা?

উপাদানের নাম এবং টাইপ অ্যাট্রিবিউটের উপর ভিত্তি করে, ব্রাউজারগুলি বিভিন্ন ব্যবহারকারীর ইন্টারফেস দেখায়, বিভিন্ন বৈধতা নিয়ম ব্যবহার করে এবং অন্যান্য অনেক বৈশিষ্ট্য প্রদান করে। উপযুক্ত ফর্ম নিয়ন্ত্রণ ব্যবহার করা আপনাকে আরও ভাল ফর্ম তৈরি করতে সহায়তা করে।

ফর্ম উপাদানগুলির জন্য লেবেল৷

বলুন আপনি একটি ইনপুট যোগ করতে চান যেখানে ব্যবহারকারী তাদের পছন্দের রঙ লিখতে পারে। এর জন্য, আপনাকে আপনার ফর্মে একটি <input> উপাদান যোগ করতে হবে। কিন্তু, ব্যবহারকারী কিভাবে জানেন যে তাদের পছন্দের রঙটি পূরণ করা উচিত?

ফর্ম নিয়ন্ত্রণগুলি বর্ণনা করতে, প্রতিটি ফর্ম নিয়ন্ত্রণের জন্য একটি <label> ব্যবহার করুন।

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

লেবেল উপাদানের for বৈশিষ্ট্যটি ইনপুটে থাকা id বৈশিষ্ট্যের সাথে মেলে।

ব্যবহারকারীর ইনপুট ক্যাপচার করা হচ্ছে

নাম অনুসারে, <input> উপাদানটি ব্যবহারকারীদের কাছ থেকে ইনপুট সংগ্রহ করতে ব্যবহৃত হয়।

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

পূর্বে উল্লিখিত হিসাবে, id বৈশিষ্ট্যটি <input> কে <label> এর সাথে সংযুক্ত করে। এই উদাহরণে নাম এবং টাইপ বৈশিষ্ট্য সম্পর্কে কি?

নামের বৈশিষ্ট্য

ব্যবহারকারী নিয়ন্ত্রণের সাথে যে ডেটা প্রবেশ করে তা সনাক্ত করতে name বৈশিষ্ট্যটি ব্যবহার করুন। আপনি যদি ফর্ম জমা দেন, এই নামটি অনুরোধে অন্তর্ভুক্ত করা হয়। বলুন যে আপনি একটি ফর্ম কন্ট্রোল mountain নাম দিয়েছেন এবং ব্যবহারকারী Gutenberg প্রবেশ করেছেন, অনুরোধটিতে এই তথ্যটি mountain=Gutenberg হিসাবে অন্তর্ভুক্ত রয়েছে।

ফর্ম কন্ট্রোলের নাম পরিবর্তন করে hill করার চেষ্টা করুন। আপনি যদি এটি সঠিকভাবে করেন, এবং ফর্মটি জমা দেন, তাহলে URL-এ hill দৃশ্যমান হবে।

ইনপুট প্রকার

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

type="checkbox" ব্যবহার করে ব্রাউজার এখন একটি পাঠ্য ক্ষেত্রের পরিবর্তে একটি চেকবক্স রেন্ডার করে। চেকবক্স অতিরিক্ত বৈশিষ্ট্য সহ আসে। আপনি checked বৈশিষ্ট্য সেট করতে পারেন, এটি চেক করা হিসাবে দেখানোর জন্য।

আপনি চয়ন করতে পারেন অন্যান্য বিভিন্ন ধরনের আছে. আমরা পরে একটি মডিউল একটি বিস্তারিত চেহারা আছে.

পাঠ্যের একাধিক লাইনের অনুমতি দিন

বলুন, আপনার একটি ক্ষেত্র দরকার যেখানে একজন ব্যবহারকারী একটি মন্তব্য লিখতে পারে। এই জন্য, তারা পাঠ্যের একাধিক লাইন লিখতে পারলে এটি কি দুর্দান্ত হবে না? এটি <textarea> উপাদানটির উদ্দেশ্য।

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

বিকল্পগুলির একটি তালিকা থেকে চয়ন করুন

আপনি কিভাবে ব্যবহারকারীদের থেকে নির্বাচন করার বিকল্পগুলির একটি তালিকা দেন? আপনি এটি অর্জন করতে একটি <select> উপাদান ব্যবহার করতে পারেন।

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

প্রথমে, আপনি একটি <select> উপাদান যোগ করুন। অন্য সব ফর্ম কন্ট্রোলের মতো, আপনি এটিকে id অ্যাট্রিবিউট সহ একটি <label> এর সাথে সংযুক্ত করুন এবং name বৈশিষ্ট্য ব্যবহার করে এটিকে একটি অনন্য নাম দিন।

<select> উপাদানটির শুরু এবং শেষ ট্যাগের মধ্যে, আপনি একাধিক <option> উপাদান যোগ করতে পারেন, প্রতিটি একটি নির্বাচনকে প্রতিনিধিত্ব করে।

প্রতিটি বিকল্পের একটি অনন্য value বৈশিষ্ট্য রয়েছে, তাই ফর্ম ডেটা প্রক্রিয়া করার সময় আপনি তাদের আলাদা করে বলতে পারেন। বিকল্প উপাদানের ভিতরের পাঠ্যটি মানব-পাঠযোগ্য মান।

আপনি যদি নির্বাচন পরিবর্তন না করে এই <select> ব্যবহার করে ফর্মটি জমা দেন, তাহলে অনুরোধে color=orange অন্তর্ভুক্ত থাকবে। কিন্তু ব্রাউজার কিভাবে জানবে কোন অপশন ব্যবহার করা উচিত?

ব্রাউজার তালিকার প্রথম বিকল্প ব্যবহার করে, যদি না:

  • একটি <option> উপাদানের selected বৈশিষ্ট্য রয়েছে।
  • ব্যবহারকারী অন্য বিকল্প বেছে নেয়।

একটি বিকল্প আগে থেকে নির্বাচন করুন

selected বৈশিষ্ট্যের সাহায্যে আপনি একটি বিকল্প আগে থেকে নির্বাচন করতে পারেন। <option> উপাদানগুলিকে যে ক্রমে সংজ্ঞায়িত করা হোক না কেন, এটি ডিফল্ট হয়ে যায়।

গ্রুপিং ফর্ম নিয়ন্ত্রণ

কখনও কখনও আপনাকে গ্রুপ ফর্ম নিয়ন্ত্রণ করতে হবে। আপনি এটি করতে <fieldset> উপাদান ব্যবহার করতে পারেন।

<fieldset>
    <legend>What is your favorite web technology</legend>

    <label for="html">HTML</label>
    <input type="radio" name="webfeature" value="html" id="html">

    <label for="css">CSS</label>
    <input type="radio" name="webfeature" value="css" id="css">
</fieldset>

আপনি কি <fieldset> উপাদানের ভিতরে <legend> উপাদানটি লক্ষ্য করেছেন? এটা কি জন্য ব্যবহার করা হয় বলে আপনি মনে করেন?

যদি আপনার উত্তর হয় "ফর্ম নিয়ন্ত্রণের গোষ্ঠীর বর্ণনা দিতে", আপনি ঠিক বলেছেন!

প্রতিটি <fieldset> উপাদানের জন্য একটি <legend> উপাদান প্রয়োজন, ঠিক যেমন প্রতিটি ফর্ম নিয়ন্ত্রণ একটি সংশ্লিষ্ট <label> উপাদান প্রয়োজন। <legend> টিকেও <fieldset> এর প্রথম উপাদান হতে হবে। <legend> উপাদানের পরে, আপনি ফর্ম নিয়ন্ত্রণগুলি সংজ্ঞায়িত করতে পারেন যা গ্রুপের অংশ হওয়া উচিত।

একটি ফর্ম জমা দেওয়া

কিভাবে ফর্ম কন্ট্রোল যোগ করতে হয় এবং সেগুলিকে গোষ্ঠীভুক্ত করতে হয় তা শেখার পরে, আপনি ভাবতে পারেন কিভাবে একজন ব্যবহারকারী একটি ফর্ম জমা দিতে পারে?

প্রথম বিকল্পটি হল একটি <button> উপাদান ব্যবহার করা।

<button>Submit</button>

একজন ব্যবহারকারী জমা দেওয়ার বোতামে ক্লিক করার পর, ব্রাউজারটি ফর্ম কন্ট্রোল থেকে সমস্ত ডেটা সহ <form> উপাদানের অ্যাকশন অ্যাট্রিবিউটে নির্দিষ্ট URL-এ একটি অনুরোধ করে।

আপনি একটি <button> উপাদানের পরিবর্তে type="submit" সহ একটি <input> উপাদান ব্যবহার করতে পারেন। ইনপুটটি একটি <button> এর মত দেখায় এবং আচরণ করে। <input> বর্ণনা করার জন্য একটি <label> উপাদান ব্যবহার করার পরিবর্তে, পরিবর্তে value বৈশিষ্ট্য ব্যবহার করুন।

<input type="submit" value="Submit">

উপরন্তু, যখন একটি ফর্ম ক্ষেত্রে ফোকাস থাকে তখন Enter কী ব্যবহার করে একটি ফর্ম জমা দেওয়া যেতে পারে।

আপনার উপলব্ধি পরীক্ষা করুন

ফর্ম উপাদান আপনার জ্ঞান পরীক্ষা

আপনি কিভাবে একটি <label> একটি ফর্ম নিয়ন্ত্রণের সাথে সংযুক্ত করবেন?

for='color' এ <label> , এবং name='color' <input> -এ।
আবার চেষ্টা করুন!
for='color' <label> এ এবং id='color' <input> -এ।
সঠিক!
<label> -এ id='color' এবং <input> -এর for='color' ।
আবার চেষ্টা করুন!
name='color' <label> -এ এবং for='color <input> এ।
আবার চেষ্টা করুন!

আপনি একটি মাল্টি-লাইন ফর্ম নিয়ন্ত্রণের জন্য কি ব্যবহার করবেন?

type='multi-line' সহ <input> উপাদান।
আবার চেষ্টা করুন!
<text> উপাদান।
আবার চেষ্টা করুন!
<textarea> উপাদান।
🎉
type='long' সহ <input> উপাদান।
আবার চেষ্টা করুন!

আপনি কিভাবে একটি ফর্ম জমা দিতে পারেন?

একটি <button> উপাদান ক্লিক করা হচ্ছে।
সঠিক, এটি একটি বিকল্প।
Enter কী ব্যবহার করে।
সঠিক, এটি একটি বিকল্প।
type='submit' সহ একটি <input> উপাদানে ক্লিক করা।
সঠিক, এটি একটি বিকল্প।
উপরের সব.
সঠিক, সমস্ত উত্তর একটি ফর্ম জমা দেওয়ার সম্ভাব্য বিকল্প।

সম্পদ