ব্যবহারকারীদের কাছ থেকে তথ্য পেতে ফর্ম ব্যবহার করুন

ফর্ম উপাদানটির এই ভূমিকার সাথে ওয়েবে একটি ফর্ম ব্যবহার করার প্রাথমিক বিষয়গুলি শিখুন৷

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

আপনি কিভাবে HTML দিয়ে এটি করবেন?

এইচটিএমএল-এ, আপনি ফর্ম উপাদান ( <form> ), একটি <input> একটি <label> , এবং একটি সাবমিট <button> ব্যবহার করে এটি তৈরি করতে পারেন।

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

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

ফর্ম উপাদানটি স্টার্ট ট্যাগ <form> , স্টার্ট ট্যাগে সংজ্ঞায়িত ঐচ্ছিক বৈশিষ্ট্য এবং একটি শেষ ট্যাগ </form> নিয়ে গঠিত।

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

কোথায় তথ্য প্রক্রিয়া করা হয়?

যখন একটি ফর্ম জমা দেওয়া হয় (উদাহরণস্বরূপ, যখন ব্যবহারকারী জমা বোতামে ক্লিক করে), ব্রাউজার একটি অনুরোধ করে। একটি স্ক্রিপ্ট সেই অনুরোধে সাড়া দিতে পারে এবং ডেটা প্রক্রিয়া করতে পারে।

ডিফল্টরূপে, অনুরোধটি সেই পৃষ্ঠায় করা হয় যেখানে ফর্মটি দেখানো হয়।

বলুন আপনি ফর্ম ডেটা প্রক্রিয়া করার জন্য https://web.dev এ চলমান একটি স্ক্রিপ্ট চান—আপনি এটি কীভাবে করবেন? এটা চেষ্টা করে দেখুন !

উত্তর টগল করুন

আপনি action অ্যাট্রিবিউট ব্যবহার করে স্ক্রিপ্টের অবস্থান নির্বাচন করতে পারেন।

<form action="https://example.com/animals">
...
</form>

পূর্ববর্তী উদাহরণটি https://example.com/animals এ একটি অনুরোধ করে। example.com ব্যাকএন্ডের একটি স্ক্রিপ্ট /animals এর অনুরোধগুলি পরিচালনা করতে পারে এবং ফর্ম থেকে ডেটা প্রক্রিয়া করতে পারে।

কিভাবে তথ্য স্থানান্তর করা হয়?

ডিফল্টরূপে, ফর্ম ডেটা একটি GET অনুরোধ হিসাবে পাঠানো হয়, জমা দেওয়া ডেটা URL-এ যুক্ত করা হয়৷ উপরের উদাহরণে একজন ব্যবহারকারী 'ব্যাঙ' জমা দিলে, ব্রাউজার নিম্নলিখিত URL-এ একটি অনুরোধ করে:

https://example.com/animals?animal=frog

এই ক্ষেত্রে, আপনি URL থেকে ডেটা পেয়ে ফ্রন্টএন্ড বা ব্যাকএন্ডের ডেটা অ্যাক্সেস করতে পারেন।

আপনি যদি চান, আপনি পদ্ধতির বৈশিষ্ট্য পরিবর্তন করে একটি POST অনুরোধ ব্যবহার করার জন্য ফর্মটিকে নির্দেশ দিতে পারেন।

<form method="post">
...
</form>

POST ব্যবহার করে, ডেটা অনুরোধের অংশে অন্তর্ভুক্ত করা হয়।

ডেটা URL-এ দৃশ্যমান হবে না এবং শুধুমাত্র একটি ফ্রন্টএন্ড বা ব্যাকএন্ড স্ক্রিপ্ট থেকে অ্যাক্সেস করা যেতে পারে।

আপনি কি পদ্ধতি ব্যবহার করা উচিত?

উভয় পদ্ধতির জন্য ব্যবহার ক্ষেত্রে আছে.

সংবেদনশীল ডেটা প্রক্রিয়া করে এমন ফর্মগুলির জন্য POST পদ্ধতি ব্যবহার করুন৷ ডেটা এনক্রিপ্ট করা হয় (যদি আপনি HTTPS ব্যবহার করেন) এবং শুধুমাত্র ব্যাকএন্ড স্ক্রিপ্ট দ্বারা অ্যাক্সেসযোগ্য যা অনুরোধটি প্রক্রিয়া করে। ইউআরএলে ডেটা দৃশ্যমান নয়। একটি সাধারণ উদাহরণ হল একটি সাইন-ইন ফর্ম৷

যদি ডেটা ভাগ করা যায় তবে আপনি GET পদ্ধতি ব্যবহার করতে পারেন। এইভাবে ডেটা আপনার ব্রাউজারের ইতিহাসে যোগ করা হবে কারণ এটি URL-এ অন্তর্ভুক্ত। অনুসন্ধান ফর্ম প্রায়ই এটি ব্যবহার করে. এইভাবে আপনি একটি অনুসন্ধান ফলাফল পৃষ্ঠা বুকমার্ক করতে পারেন।

এখন যেহেতু আপনি নিজেই ফর্ম উপাদান সম্পর্কে শিখেছেন, আপনার ফর্মগুলিকে ইন্টারেক্টিভ করার জন্য ফর্ম ক্ষেত্রগুলি সম্পর্কে শেখার সময় এসেছে৷

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

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

ফর্ম এলিমেন্টের স্টার্ট ট্যাগ দেখতে কেমন?

</form>
প্রায়, এটি <form> উপাদানটির শেষ ট্যাগ।
<form-container>
আবার চেষ্টা করুন!
<form>
🎉
<form-element>
আবার চেষ্টা করুন!

<form> কোথায় প্রক্রিয়া করা হয় তা নির্ধারণ করতে আপনি কোন বৈশিষ্ট্য ব্যবহার করতে পারেন?

where
আবার চেষ্টা করুন!
action
হ্যাঁ, action বৈশিষ্ট্য নির্ধারণ করে যেখানে <form> প্রক্রিয়া করা হয়।
href
আবার চেষ্টা করুন!
url
আবার চেষ্টা করুন!

ডিফল্ট অনুরোধ পদ্ধতি কি?

GET
🎉
POST
আবার চেষ্টা করুন!

সম্পদ

<form> উপাদান ।