HTML ফর্ম তৈরি করা: একটি গাইড

<input> এলিমেন্ট ওয়েবসাইটে কীভাবে দেখাবে তা type অ্যাট্রিবিউটের ওপর নির্ভর করে। উদাহরণস্বরূপ, যদি একটি ইনপুট ফিল্ড টেক্সট বক্স হয়, তবে সেটি রেডিও বাটন থেকে আলাদা দেখাবে।

<input> এলিমেন্টের সিন্ট্যাক্স নিচে দেওয়া হল:

<input type="type" id="elementId">

এই উদাহরণে, <input> দুটি অ্যাট্রিবিউট গ্রহণ করে। প্রথম অ্যাট্রিবিউট, যাকে type বলা হয়, হল ফর্ম ফিল্ড যে টাইপের ইনপুট গ্রহণ করবে। type অ্যাট্রিবিউটের অনেক ভ্যালু হতে পারে, কিন্তু সবচেয়ে কমন কিছু হল:

• button
• checkbox
• email
• text
• number
• radio

আমাদের উদাহরণে দ্বিতীয় অ্যাট্রিবিউট হল id। এই অ্যাট্রিবিউটটি ইনপুট এলিমেন্টকে অনন্যভাবে আইডেন্টিফাই করতে ব্যবহৃত হয়, এবং এটি ইউজার সাবমিট করা ডেটা অ্যাক্সেস করতে ব্যবহৃত হবে সেই স্ক্রিপ্ট দ্বারা যা আমরা ইউজারের ফর্ম ইনপুট প্রসেস করতে ব্যবহার করব।

চলুন Three Brothers Coffee House-এ ফিরে যাই। আমরা যে ফর্মটি বানাচ্ছি সেটি আমাদের ইউজার সম্পর্কে চারটি তথ্য গ্রহণ করতে হবে। প্রথম দুটি তথ্য হল ইউজারের নাম এবং ইমেইল অ্যাড্রেস।

আমরা এই দুটি তথ্য দুটি <input> ট্যাগ ব্যবহার করে সংগ্রহ করতে পারি:

<form> <label for="name">Name:</label><br/> <input type="text" id="name" name="name"><br /><br /> <label for="email">Email:</label><br/> <input type="email" id="email" name="email"> </form>

উপরের এডিটরে বাটনে ক্লিক করুন কোড রান করার জন্য।

আপনি দেখতে পাচ্ছেন, আমরা একটি ফর্ম তৈরি করেছি যা দুটি ভ্যালু গ্রহণ করে: ইউজারের নাম এবং ইউজারের ইমেইল অ্যাড্রেস। এই উদাহরণে, আমরা <label> এলিমেন্টও ব্যবহার করেছি। আমরা এই এলিমেন্ট শীঘ্রই আলোচনা করব।

HTML ফর্মে name অ্যাট্রিবিউট

HTML ফর্মের প্রতিটি ফর্ম এলিমেন্টে অবশ্যই একটি name অ্যাট্রিবিউট থাকতে হবে। এই অ্যাট্রিবিউটটি ফর্মের কন্টেন্ট সাবমিট করতে ব্যবহৃত হয়। আপনি যদি একটি ফর্ম এলিমেন্টে name অ্যাট্রিবিউট নির্দিষ্ট না করেন, তবে সেই এলিমেন্টের কন্টেন্ট সার্ভারে সাবমিট হবে না।

উপরের উদাহরণে, আমাদের “Name” ফিল্ডে name অ্যাট্রিবিউট আছে যার ভ্যালু name, এবং “Email” ফিল্ডে name অ্যাট্রিবিউট আছে যার ভ্যালু email।

HTML <label> এলিমেন্ট

আমাদের উপরের উদাহরণে, আমরা আমাদের ফর্মের প্রতিটি আইটেমে একটি HTML লেবেল যোগ করতে <label> এলিমেন্ট ব্যবহার করেছি। <label> ট্যাগ আমাদের একটি ফর্ম এলিমেন্টের উদ্দেশ্য এবং সেটি কী ডেটা গ্রহণ করবে তা স্পষ্টভাবে بیان করতে দেয়।

একটি <label> ট্যাগ আমাদের সক্রিন রিডার ব্যবহারকারীকে কম্পিউটার কী টেক্সট পড়বে তা ডিফাইন করতেও দেয়। কারণ স্ক্রিন রিডার লেবেলটি পড়বে যখন সেটি ওয়েব পেজে ইনপুট ফিল্ডের সাথে মুখোমুখি হবে।

HTML লেবেলের সিন্ট্যাক্স:

<form> <label for="name">Name:</label><br/> <input type="text" id="name" name="name"> </form>

উপরের উদাহরণে, আমরা একটি ফর্ম তৈরি করেছি যা একটি ইউজারের নাম সংগ্রহ করে। আমরা <label> ট্যাগ ব্যবহার করে ফর্মে Name: লেবেল যোগ করেছি। লক্ষ্য করুন যে আমরা আমাদের <label> এলিমেন্টে for নামক একটি অ্যাট্রিবিউটও নির্দিষ্ট করেছি। এই অ্যাট্রিবিউটটি সেটি যে input এলিমেন্টের সাথে লিঙ্ক করা আছে সেটির id অ্যাট্রিবিউটের সমান হওয়া উচিত, কারণ এটি একটি ফর্মকে এর সংশ্লিষ্ট লেবেলের সাথে বাঁধে।

HTML ফর্ম এলিমেন্ট

Three Brothers Coffee House-এ ফিরে যাই। এই টিউটোরিয়ালের শুরুতে আমরা বলেছিলাম যে আমরা চারটি তথ্য সংগ্রহ করতে চাই: ইউজারের নাম, তাদের ইমেইল অ্যাড্রেস, তারা কি কাস্টমার, এবং কফি হাউসকে পাঠাতে চান এমন মেসেজ।

এখন পর্যন্ত, আমরা দুটি ফর্ম ফিল্ড তৈরি করেছি: নাম ফিল্ড এবং ইমেইল ফিল্ড। চলুন আলোচনা করি আমরা বাকি ফর্মটি কীভাবে তৈরি করব।

রেডিও বাটন

রেডিও বাটন HTML ফর্মে ব্যবহৃত একটি সাধারণ ইনপুট টাইপ। একটি রেডিও বাটন একটি ইউজারকে সীমিত সংখ্যক অপশন থেকে একটি ভ্যালু সিলেক্ট করতে দেয়। প্রায়শই রেডিও বাটন জেন্ডার তথ্য, বয়সের পরিসর, বা হ্যা/না রেসপন্স সংগ্রহ करने वाले ফর্মে ব্যবহৃত হয়।

রেডিও বাটনের সিন্ট্যাক্স নিচে দেওয়া হল:

<input type="radio" name="radio_button">

আমাদের ফর্মে, আমরা ইউজারকে জিজ্ঞেস করতে চাই যে তারা কি Three Brothers Coffee House-এর কাস্টমার। আমরা এটি করতে একটি রেডিও বাটন ব্যবহার করতে পারি। এখানে সেটা করার কোড:

<form> <p>Are you a customer of the Three Brothers Coffee House?</p> <input type="radio" id="yes" name="customer" value="yes"> <label for="yes">Yes</label><br /> <input type="radio" id="no" name="customer" value="no"> <label for="no">No</label><br /> </form>

উপরের এডিটরে বাটনে ক্লিক করুন কোড রান করার জন্য।

আমাদের ইউজার তারপর দুটি ভ্যালুর একটি সাবমিট করতে পারবে: yes বা no।

চলুন আমাদের কোড ভাঙন করি। প্রথমে, আমরা একটি <form> ডিফাইন করি। তারপর আমরা <p> ট্যাগ ব্যবহার করে ইউজারের জন্য এক্সপ্লানেটরি টেক্সট যোগ করি।

পরবর্তী লাইনে, আমরা একটি রেডিও বাটন তৈরি করি যার ভ্যালু yes। তারপর আমরা এই বাটনের জন্য একটি লেবেল তৈরি করি, যেটি “Yes” টেক্সট দেখাবে। পরে, আমরা no ভ্যালু دار একটি রেডিও বাটন তৈরি করি এবং সেটির জন্য একটি লেবেল তৈরি করি, যেটি “No” টেক্সট দেখাবে।

লক্ষ্য করুন যে আমাদের কোডে রেডিও বাটনগুলোর value অ্যাট্রিবিউট নির্দিষ্ট করা আছে। এই ভ্যালু হল वो ডেটা যা সার্ভারে পাঠানো হবে যখন ইউজার ফর্ম সাবমিট করবে। তাই, যদি ইউজার “Yes” রেডিও বাটনে ক্লিক করে, তবে yes ভ্যালু সার্ভারে পাঠানো হবে।

HTML <textarea> এলিমেন্ট

আমাদের ফর্মে আমাদের একটি আরো ইনপুট এলিমেন্ট যোগ করতে হবে: একটি টেক্সট এরিয়া। এখন পর্যন্ত, আমরা একটি ইউজারের নাম, তাদের ইমেইল অ্যাড্রেস, এবং তারা কি কাস্টমার তা সংগ্রহ করেছি। এখন আমরা একটি ফর্ম এলিমেন্ট যোগ করতে চাই যা তাদের কফি হাউসকে একটি মেসেজ পাঠাতে দেবে।

আমরা এটি <textarea> এলিমেন্ট ব্যবহার করে করতে পারি, নিচের মতো:

<form> <label for="message">Message:</label><br /> <textarea id="message" name="message"> What message do you want to send to the Three Brothers Coffee House? </textarea> </form>

আমাদের কোডে, আমরা একটি label ডিফাইন করি যা “Message:” ভ্যালু দেখায়।

তারপর আমরা <textarea> ট্যাগ ব্যবহার করে একটি টেক্সট এরিয়া ডিফাইন করি। আমরা এই টেক্সট এরিয়ার জন্য দুটি অ্যাট্রিবিউট নির্দিষ্ট করি:

1. id. এটি ইউজার তাদের রেসপন্স সাবমিট করার পর আমাদের ফর্মের কন্টেন্ট রেফারেন্স করতে ব্যবহৃত হবে।
2. name. আমাদের ফর্মের কন্টেন্ট সাবমিট হতে হলে এটি আবশ্যক।

শেষে, আমরা What message do you want to send to the Three Brothers Coffee House? মেসেজটি আমাদের ওপেনিং এবং ক্লোজিং <textarea> ট্যাগের মাঝপথে যোগ করি। এটি ডিফল্ট মেসেজ যা ইউজার দেখবে।

আমাদের কোডের ফলাফল নিচে:

উপরের এডিটরে বাটনে ক্লিক করুন কোড রান করার জন্য।

এখন আমাদের একটি টেক্সট এরিয়া ফিল্ড আছে। ইউজাররা এই ফিল্ড ব্যবহার করে কফি হাউসকে মেসেজ সাবমিট করতে পারবে।

HTML submit বাটন

এখন যেহেতু আমরা আমাদের ফর্মের কন্টেন্ট ডিফাইন করেছি, আমরা একটি submit বাটন যোগ করার জন্য প্রস্তুত। submit বাটনের সিন্ট্যাক্স:

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

Submit বাটন একটি ফর্মের কন্টেন্ট একটি ফর্ম হ্যান্ডলারে সাবমিট করতে ব্যবহৃত হয়। (একটি ফর্ম হ্যান্ডলার সাধারণত ওয়েব সার্ভারে একটি পেজ যা ফর্মের কন্টেন্ট প্রসেস করতে পারে।) submit বাটন ফর্ম হ্যান্ডলারের সাথে লিঙ্ক করা থাকে। আপনাকে ফর্ম হ্যান্ডলার নির্দিষ্ট করতে হবে <form> ট্যাগের action অ্যাট্রিবিউট ব্যবহার করে।

ধরা যাক আমরা কফি হাউসের ওয়েব ফর্মে একটি submit বাটন যোগ করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:

<form action="/post.php"> <label for="name">Name:</label> <br/> <input type="text" id="name" name="name"> <br /> <br /> <label for="email">Email:</label> <br /> <input type="email" id="email" name="email"> <br /> <p>Are you a customer of the Three Brothers Coffee House?</p> <input type="radio" id="yes" name="customer" value="yes"> <label for="yes">Yes</label> <br /> <input type="radio" id="no" name="customer" value="no"> <label for="no">No</label> <br /><br /> <label for="message">Message:</label><br /> <textarea id="message" name="message"> What message do you want to send to the Three Brothers Coffee House? </textarea> <input type="submit" value="Submit"> </form>

আপনি দেখতে পাচ্ছেন, আমরা আমাদের ফর্মে একটি সাবমিট বাটন যোগ করেছি। আমরা <form> ট্যাগে একটি action প্যারামিটারও নির্দিষ্ট করেছি। এই প্যারামিটার ফর্মটিকে তার কন্টেন্ট হ্যান্ডেল করার ফাইলের সাথে লিঙ্ক করে।

ওয়েব ফর্ম সাবমিট করা

HTML ফর্ম তৈরি করার পর, আপনাকে একটি হ্যান্ডলার তৈরি করতে হবে যা ইউজাররা আপনার ফর্মের মাধ্যমে সাবমিট করা ডেটা প্রসেস করবে। <form> এলিমেন্ট দুটি অ্যাট্রিবিউট প্রদান করে যা ফর্ম ডেটা সার্ভারে পাঠাতে ব্যবহৃত হয়: action এবং method।

ফর্ম action অ্যাট্রিবিউট

action অ্যাট্রিবিউট ফর্ম হ্যান্ডলার কোডের লোকেশন ডিফাইন করে। যখন আপনার ফর্ম সাবমিট হবে—যখন ইউজার submit বাটনে ক্লিক করবে—তখন সেটি সংগ্রহ করা ডেটা ফর্ম হ্যান্ডলারে পাঠাবে।

আমাদের উপরের উদাহরণে, যখন ফর্ম সাবমিট হবে, ফর্ম থেকে ডেটা post.php পেজে পাঠানো হবে, যেটি আমাদের ফর্ম হ্যান্ডলার কোড ধারণ করে। এখানে action অ্যাট্রিবিউট ডিফাইন করা একটি ফর্মের উদাহরণ:

<form action="/post.php"> </form>

যদি কোনো action অ্যাট্রিবিউট নির্দিষ্ট না থাকে, তবে ফর্ম বর্তমান পেজে সাবমিট হবে।

ফর্ম method অ্যাট্রিবিউট

method অ্যাট্রিবিউট বলে ফর্ম সাবমিট হওয়ার সময় কোন HTTP মেথড ব্যবহার করা উচিত। ডিফল্টভাবে, ফর্ম GET মেথড ব্যবহার করে, কিন্তু আপনি যেকোনো অন্য HTTP মেথড, যেমন POST ব্যবহার করতে পারেন।

ফর্ম method অ্যাট্রিবিউটের একটি উদাহরণ:

<form action="/post.php" method="POST"> </form>

যখন এই ফর্ম সাবমিট হবে, তখন সেটি সংগ্রহ করা ডেটা HTTP POST মেথড ব্যবহার করে সার্ভারে পাঠাবে। (বিকল্পভাবে, যদি আমরা GET রিকোয়েস্ট পাঠাতে চাই, তবে আমরা "GET" নির্দিষ্ট করতে পারতাম, অথবা খালি রেখে দিতে পারতাম কারণ GET ডিফল্ট মেথড।)

অধিকাংশ কেসে, আপনাকে ডেটা সাবমিট করতে HTTP POST মেথড ব্যবহার করা উচিত। কারণ GET মেথড ফর্ম ডেটাকে পেজের অ্যাড্রেস ফিল্ডে দৃশ্যমান করে। তাই, যদি আমরা একটি ফর্ম post.php-এ সাবমিট করতাম যেটিতে “name” নামে একটি ফিল্ড থাকে যার ভ্যালু “Pauline”, তবে নিচেরটি পাঠানো হতো:

/post.php?name=Pauline

এটি ডেটা পাঠানোর একটি অনিরাপদ পদ্ধতি। GET মেথড কখনো ব্যবহার করা উচিত নয় যদি আপনি সেনসিটিভ ইনফরমেশন হ্যান্ডেল করেন।

উপসংহার

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

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