এইচটিএমএল ফর্ম কি এবং কেমন করে তৈরি করতে হয়-পার্ট ২

পূর্বের তৈরি করা ফর্মটি

এর আগের পোস্টে আমরা একটি ফর্ম তৈরি করেছিলাম । আমি প্রথমেই ফর্মটির ব্যাখা প্রদান করিনি কারণ অনেকেই হয়ত বিষয়টি বুঝতে পারতেন না। কিন্তু এখন আমি ফর্মটি কিভাবে তৈরি করেছি তা এখানে বর্ণনা করব। প্রথমে আমি ফর্মের ট্যাগ(<form></form>)  নিয়েছি। এরপর আমি ফর্মটির বিভিন্ন ফিল্ড নিয়েছি।

১। প্রথমেই আসি First Name:

First Name এর জন্য আমি নিয়েছি <input তারপর এর একটা type দেওয়া হয়েছে। জেনে রাখা ভাল যে ফর্মে নাম,কোন কিছুর বর্ণনা ইত্যাদি দেওয়ার জন্য type সব সময় text দিতে হয়। এরপর আমি এই ফিল্ডের একটা নাম দিয়েছি (এই নাম গুলো ইচ্ছা মত প্রদান করা যায়)। Placeholder ব্যবহার করা হয়েছে এবং এরপর ডাবল কোটেশন ব্যবহার এর মধ্যে জাস্ট বক্সে কি করতে হবে সেটা উল্লেখ করা হয়েছে।  এরপরেই /> এর মাধ্যমে input ক্লোস করা হয়েছে।

২। পরের Last Name টাও একই নিয়মে করা হয়েছে।
৩। এরপর আসা যাক Gender ফিল্ডে। আমরা সাধারণত জানি Gender দুই ধরনের হয়ে থাকে(এর অধিক যদিও আছে। তবে আমি দুই ধরনের Gender ধরেই কাজ্ করেছি) । Gender কখনোই একসাথে দুইটা হতে পারবেনা বা  একসাথে দুইটি সিলেক্ট করার কোন রকম সু্যোগ নেই। এজন্য আমাদের এমন পরিস্থিতি input type নিতে হবে radio । এর ফলে  ফর্মে রেডিও বাটন তৈরি হবে। তবে লক্ষ্যনীয় বিষয় হল আমাদের যতগুলো আমরা যতগুলো অপশন নিব সব সময়ই name টা একই থাকবে। কোণ কারণে name চেঞ্জ হয়ে গেলে ডাটা আর ডাটাবেসে পাস হবে না। আমাদের রেডিও বাটনে value দেওয়ার সময় খেয়াল রাখব যাতে ইউজার যে বাটনে ক্লিক করছে তার সাথে ফর্মে শো করা নামের মিল আছে কিনা।  তবে আরো একটি লক্ষ্যণীয় বিষয় হল রেডিও বাটন ফিল্ডে কোণ রকম placeholder এর প্রয়োজন নেই।
৪। এরপর আসি Enter Your Qualification Section এ। এখানে রেডিও বাটনের মত কোন type ডিক্লেয়ার করার দরকার নেই। এখানে শুধু <select></select> ট্যাগের ভিতরে আপনি যত গুলো অপশন নিতে চান তা <option></option> ট্যাগের ভিতর নিতে হবে। এখানেও মনে রাখা জরুরি যে যতগুলোই অপশন নেওয়া হোক না কেন তার সবগুলোতেই তার ভ্যালু যেন শো করা ভ্যালুর সাথে না মিলে । তা না হলে ভূল ধরনের ডাটা দিয়ে ডাটাবেস ভর্তি হয়ে যাবে।
৫। এরপরে যে বিষয় রয়েছে তা হল চেক বক্স। চেক বক্স সাধারণত তখন ই ব্যবহার করা হয়ে থাকে যখন ইউজারের কাছ থেকে এক বা একাধিক ডাটা নেওয়ার প্রয়োজন পরে। মনে করা যাক করিম একটি আইটি কোম্পানিতে জয়েন করার জন্য অনলাইনে একটি এপ্লিকেশন পুরণ করতেছে। ঠিক সেই মুহূর্তে একটি অপশন আসল করিম কি কি যোগ্যতা অর্জন করেছে তা দেওয়ার জন্য। যেহেতু করিমের একাধিক যোগ্যতা রয়েছে সো সে যোগ্যতা গুলো উল্লেখ করার জন্য একাধিক অপশন এ টিক দিয়ে দিল। এই যে টিক দেওয়ার অপশন এটাই হল চেক বক্স। আশা করি আপনারা বিষয়টি ভাল ভাবে বুঝতে পেরেছেন।
৬। Text area হল এর পরের ধাপ। কোন ফর্ম থেকে বেশি পরিমাণ ডাটা তোলার প্রয়োজন হল তখন <textarea></textarea> ট্যাগটি ব্যবহার করা  হয়ে থাকে। এর মাধ্যমে সাধারণত কোন কিছুর বর্ণনা,মন্তব্য,অভিমত নেওয়া হয়ে থাকে। এখানে cols এবং rows ব্যবহার করা হয়েছে। আপনার এর পরিমাণ ইচ্ছামত কমিয়ে/বাড়িয়ে সহজেই আপনার ফর্মটিকে নিজের মত করে তৈরি করে নিতে পারেন। এখানে কিন্তু আবার ইউজার জানানোর জন্য placeholder ব্যবহার করা হয়েছে।
৭। সর্বশেষ যে ধাপ অর্থ্যাত ফর্মে ডাটা দেওয়ার পর আমাদেরকে ডাটা গুলো একটি নির্দিষ্ট জায়গায় প্রেরণ করতে হবে। এর জন্যই ফর্মে submit ব্যবহার করতে হয়।  submit এর ক্ষেত্রে name আপনি আপনার ইচ্ছামত দিতে পারবেন  কিন্তু type অবশ্যই submit দিতে হবে। এরপর আপনি চাইলে value দিতেও পারেন অথবা নাও দিতে পারেন। দিলে সেই ভ্যালুটিই শো করবে(সেটা হতে পারে send,click here,অথবা যেকোন কিছু), আর না দিলে default হিসেবে submit ই শো করবে। 

এইচটিএমএল ফর্ম সম্পর্কে বিস্তারিত জানতে নিচের ভিডিওটি দেখুন। আশা করি আপনাদের সমস্যা থাকবে না।

 

ফর্ম নিয়ে আপনাদের আরো কিছু প্রশ্ন মনে তৈরি হয়েছে আমি জানি। আপনার মনে তৈরি হওয়া এসব প্রশ্নের উত্তরের জন্য ভিসিট করুন আমাদের এই টিউটোরিয়াল টি