ফর্ম উপাদানটির গভীরতা

আগের মডিউলে, আপনি <form> উপাদানটি ব্যবহার করতে শিখেছিলেন। এই মডিউলে, আপনি শিখবেন কিভাবে একটি ফর্ম কাজ করে এবং কখন একটি ফর্ম ব্যবহার করতে হয়।

আপনার কি <form> এলিমেন্ট ব্যবহার করা উচিত?

Browser Support

  • ক্রোম: ১.
  • প্রান্ত: ১২।
  • ফায়ারফক্স: ১।
  • সাফারি: ১.

Source

আপনাকে সবসময় একটি <form> এলিমেন্টে ফর্ম কন্ট্রোল রাখতে হবে না। উদাহরণস্বরূপ, ব্যবহারকারীদের একটি পণ্য বিভাগ বেছে নেওয়ার জন্য আপনি একটি <select> এলিমেন্ট প্রদান করতে পারেন। আপনার এখানে <form> এলিমেন্টের প্রয়োজন নেই, কারণ আপনি আপনার ব্যাকএন্ডে ডেটা সংরক্ষণ বা প্রক্রিয়াকরণ করছেন না।

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

<form> কিভাবে কাজ করে?

তুমি জেনেছো যে <form> হল ব্যবহারকারীর ডেটা পরিচালনা করার সবচেয়ে ভালো উপায়। এখন তুমি হয়তো ভাবছো, একটি ফর্ম কিভাবে কাজ করে?

<form> হল ইন্টারেক্টিভ ফর্ম নিয়ন্ত্রণের জন্য একটি ধারক।

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

ফর্ম জমা দেওয়া কীভাবে কাজ করে?

যখন আপনি একটি <form> জমা দেন, তখন ব্রাউজার <form> বৈশিষ্ট্যগুলি পরীক্ষা করে। method বৈশিষ্ট্য অনুসারে ডেটা GET বা POST অনুরোধ হিসাবে পাঠানো হয়। যদি কোনও method বৈশিষ্ট্য উপস্থিত না থাকে, তবে বর্তমান পৃষ্ঠার URL এ একটি GET অনুরোধ করা হয়।

কিভাবে আপনি ফর্ম ডেটা অ্যাক্সেস এবং প্রক্রিয়া করবেন? জমা দেওয়া ডেটা ফ্রন্টএন্ডে জাভাস্ক্রিপ্ট দ্বারা, GET অনুরোধের মাধ্যমে, অথবা GET বা POST অনুরোধের মাধ্যমে ব্যাকএন্ডে কোড দ্বারা পরিচালনা করা যেতে পারে। অনুরোধের ধরণ এবং ফর্ম ডেটা স্থানান্তর সম্পর্কে আরও জানুন।

যখন ফর্মটি জমা দেওয়া হয়, তখন ব্রাউজারটি action অ্যাট্রিবিউটের মান URL-এ একটি অনুরোধ করে। এছাড়াও, ব্রাউজারটি সাবমিট বোতামে formaction অ্যাট্রিবিউট আছে কিনা তা পরীক্ষা করে। যদি এটি হয়, তাহলে সেখানে সংজ্ঞায়িত URL ব্যবহার করা হবে।

তদুপরি, ব্রাউজার <form> উপাদানে অতিরিক্ত বৈশিষ্ট্যগুলি অনুসন্ধান করে, উদাহরণস্বরূপ, ফর্মটি যাচাই করা উচিত কিনা তা নির্ধারণ করতে ( novalidate ), autocomplete ব্যবহার করা উচিত ( autocomplete="off" ) অথবা কোন এনকোডিং ব্যবহার করা উচিত ( accept-charset )।

এমন একটি ফর্ম তৈরি করার চেষ্টা করুন যেখানে ব্যবহারকারীরা তাদের পছন্দের রঙ জমা দিতে পারবেন। ডেটা POST অনুরোধ হিসাবে পাঠানো উচিত, এবং যেখানে ডেটা প্রক্রিয়া করা হয় তার URL /color হওয়া উচিত।

ফর্ম দেখান

একটি সম্ভাব্য সমাধান হল এই ফর্মটি ব্যবহার করা:

<form method="post" action="/color">
    <label for="color">What is your favorite color?</label>
    <input type="text" name="color" id="color">
    <button>Save</button>
</form>

ব্যবহারকারীরা আপনার ফর্ম জমা দিতে পারেন তা নিশ্চিত করুন।

ফর্ম জমা দেওয়ার দুটি উপায় আছে। যেকোনো ফর্ম নিয়ন্ত্রণ ব্যবহার করার সময় আপনি একটি Submit বোতামে ক্লিক করতে পারেন অথবা Enter টিপতে পারেন।

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

আপনি বিভিন্ন উপায়ে একটি Submit বোতাম যোগ করতে পারেন। একটি বিকল্প হল আপনার ফর্মের ভিতরে একটি <button> উপাদান ব্যবহার করা। যতক্ষণ আপনি type="button" ব্যবহার না করেন ততক্ষণ এটি একটি Submit বোতাম হিসেবে কাজ করে। আরেকটি বিকল্প হল <input type="submit" value="Submit"> ব্যবহার করা।

তৃতীয় বিকল্প হল <input type="image" alt="Submit" src="submit.png"> ব্যবহার করে একটি গ্রাফিক্যাল সাবমিট বোতাম তৈরি করা। তবে, এখন যেহেতু আপনি CSS দিয়ে গ্রাফিক্যাল বোতাম তৈরি করতে পারেন, তাই type="image" ব্যবহার করার পরামর্শ দেওয়া হয় না।

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

ব্যবহারকারীদের ফাইল জমা দিতে সক্ষম করুন

প্রয়োজনে ফাইল আপলোড এবং জমা দিতে <input type="file"> ব্যবহার করুন।

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

প্রথমে, আপনার ফর্মে type="file" সহ একটি <input> উপাদান যোগ করুন। ব্যবহারকারীরা যদি একাধিক ফাইল আপলোড করতে সক্ষম হন তবে multiple বৈশিষ্ট্য যোগ করুন।

ব্যবহারকারীরা যাতে ফাইল আপলোড করতে পারেন তা নিশ্চিত করার জন্য আরও একটি পরিবর্তন প্রয়োজন—আপনার ফর্মে enctype অ্যাট্রিবিউট সেট করুন। ডিফল্ট মান হল application/x-www-form-urlencoded ।

<form method="post" enctype="multipart/form-data">
...
</form>

ফাইল জমা দেওয়া নিশ্চিত করতে, এটিকে multipart/form-data এ পরিবর্তন করুন। এই এনকোডিং ছাড়া, POST অনুরোধের মাধ্যমে ফাইল পাঠানো যাবে না।

তোমার বোধগম্যতা পরীক্ষা করো।

ফর্ম এলিমেন্ট সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।

ফাইল জমা দেওয়ার জন্য enctype এর কোন মান প্রয়োজন?

multipart/form-data
🎉
multipart/form-files
আবার চেষ্টা করুন!
form-data
আবার চেষ্টা করুন!
form-files
আবার চেষ্টা করুন!

<form> ছাড়া কি ব্যবহারকারীর ডেটা পাঠানো সম্ভব?

না
আবার চেষ্টা করুন!
হ্যাঁ, জাভাস্ক্রিপ্টের সাথে।
🎉
হ্যাঁ, ফ্ল্যাশের সাথে।
আবার চেষ্টা করুন!
হ্যাঁ, HTML5 এর সাথে।
আবার চেষ্টা করুন!

আপনি কিভাবে একটি <form> জমা দিতে পারেন?

একটি <button> ক্লিক করুন।
আবার চেষ্টা করুন!
Enter টিপুন।
আবার চেষ্টা করুন!
একটি <input type="image"> ক্লিক করুন।
আবার চেষ্টা করুন!
সব উত্তর সঠিক।
🎉

রিসোর্স