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

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

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

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

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

কিভাবে একটি <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 অনুরোধ ব্যবহার করে ব্যাকএন্ডে কোড দ্বারা পরিচালনা করা যেতে পারে। অনুরোধের ধরন এবং ফর্ম ডেটা স্থানান্তর সম্পর্কে আরও জানুন।

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

উপরন্তু, ব্রাউজার <form> এলিমেন্টে অতিরিক্ত বৈশিষ্ট্যগুলি সন্ধান করে, উদাহরণস্বরূপ, ফর্মটি যাচাই করা উচিত কিনা তা নির্ধারণ করতে ( novalidate ), স্বয়ংসম্পূর্ণ ব্যবহার করা উচিত ( 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>

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

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

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

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

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

প্রয়োজনে লোকেদের ফাইল আপলোড এবং জমা দিতে সক্ষম করতে <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 অনুরোধের সাথে ফাইল পাঠানো যাবে না।

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

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

সম্পদ

• ফর্ম HTML উপাদান
• জমা বোতাম সেরা অনুশীলন