এইচটিএমএল ফর্ম টিউটোরিয়াল ( HTML Form Tutorial in Bangla)

 

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

1.<form action="processor.php" method="post">

2.<input type="text" name="first_name" />

3.<input type="text" name="last_name" />

4.<input type="submit" name="submit" value="Submit" />

5.</form>

form এর একটা আবশ্যিক এট্রিবিউট হচ্ছে action. এখানে ফর্মটি সাবমিট করলে কোন ফাইলে ফর্মের ডেটাগুলি প্রসেস করতে নিয়ে যাবে সেই ফাইলটিতে নিয়ে যায়।

আর method এট্রিবিউট দিয়ে কোন পদ্ধতিতে ডেটা যাবে সেটা বলে দেয়া হয় যেমন আমি দিয়েছি post. post মেথডে ডেটা পাঠালে ডেটা লুকানো থাকে তবে যেখানে ডেটা লুকানোর দরকার নেই সেখানে get নামের অপর মেথডটি ব্যবহার করা হয় (method="get")। যেমন Google search এ get method ব্যবহার করেছে কারন এখানে ডেটা লুকানোর পরিবর্তে দেখানোই উপকার। google এ কোন কিছু সার্চ দিলেই ব্রাউজারের address বারে দেখবেন যেটা লিখে সার্চ দিয়েছেন সেগুলি দেখাচ্ছে। যাইহোক এগুলি পিএইচপিতে বিস্তারিত আলোচনা আছে।

এরপর input এলিমেন্ট দিয়ে দুটি text ফিল্ড তৈরী করেছি যেখানে ইউজার তার নাম লিখতে পারবে। input ট্যাগের type এট্রিবিউটটি দিয়ে ঠিক করা যায় ফিল্ডটি কোন ধরনের ডেটা নিবে।

type="text" দিলে টেক্সট ফিল্ড হবে এবং ব্রাউজারে টেক্সট লেখার মত একটি ফিল্ড দেখাবে। আবার type="submit" দিয়ে উপরে দেখুন সাবমিট বাটন বানিয়েছি।

input এর name এট্রিবিউট দিয়ে ফিল্ডটির নাম দেয়া যায়। প্রত্যেকটি ফিল্ডের name এট্রিবিউটের মান ভিন্ন দিতে হয় কেননা এই মান ধরেই পিএইচপি ডেটা প্রসেস করে তাই একই নামের দুটি ফিল্ড এর ডেটা দুরকম ভাববে।

সাবমিট বাটনের জন্য value এট্রিবিউট দিয়ে যে মানটি দিবেন সেটা বাটনের উপর লেখা হিসেবে দেখাবে।

 

** id, style, class ইত্যাদি যেকোন গ্লোবাল এট্রিবিউট form এলিমেন্টে ব্যবহার করতে পারেন।

চেকবক্স

=================

ইউজারকে চেকবক্স এবং রেডিও বাটন দিয়ে টিকমার্ক সংক্রান্ত ফর্ম ফিল্ড তৈরী করে দিতে পারেন যেমন ইউজার কোন কোন বিষয় পড়েছে সেটার  জন্য ফর্ম দিতে চাই তাহলে

1.<input type="checkbox" name="prob" value="1">probability

2.<input type="checkbox" name="fotran" value="1">fortran

3.<input type="checkbox" name="o_stat" value="1">order statistics

প্রদর্শন

probability fortran order statistics

 

ফর্ম সংক্রান্ত যেকোন এলিমেন্ট সব <form></form> এর ভিতরে থাকতে হবে। উপরের উদাহরনের সময় বাচানোর জন্য যেভাবে দিয়েছি এভাবে ফর্ম তৈরী করলে ব্রাউজারে দেখাবে ঠিকই কিন্তু কাজ করবেনা।