How to learn ফর্ম (Form) in HTML | SP Foundationbd

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

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

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

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

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

</form>

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

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

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

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

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

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

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

Checkbox

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

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

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

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

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

প্রদর্শন

probability fortran order statistics

 

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