HTML Form Example
এতক্ষন যত HTML ট্যাগ আপনি দেখেছেন, সব গুলো শুধু পড়তে পারা যায়। এখন আমরা form ট্যাগ নিয়ে কথা বলব যেখানে আপনি কীবোর্ড থেকে ইনপুট দিতে পারবেন। form এর ভেতরে অনেক গুলো input element মিলে একটি form তৈরি হয়, যেমনঃ নাম, ইমেইল, পাসওয়ার্ড, জন্ম তারিখ ইত্যাদি মিলে একটি form তৈরি হতে পারে। একটি form এ যত ধরনের input element থাকে সবগুলো নিচে ধারাবাহিকভাবে আলোচনা করা হল। বেশিরভাগ ইনপুট ই input ট্যাগ দিয়ে তৈরি। এই ট্যাগের ভেতরে type নামে একটি attribute এর মান পরিবর্তন করে দিলেই বিভিন্ন টাইপের ইনপুট তৈরি হয়।
- text টাইপের ইনপুটঃ
<input type="text" > অথবা <input type="text" /> অর্থাৎ '>' এর আগে '/' দিতে পারেন আবার না দিলেও সমস্যা নাই।- password টাইপের ইনপুটঃ
<input type="password" > অথবা <input type="password" /> লক্ষ্য করুন, type=”password”- হবার কারনে আপনি উপরের ইনপুট এ যাই টাইপ করেন তা . হয়ে যাচ্ছে।
- number টাইপের ইনপুটঃ শুধু নাম্বার ইনপুট দিতে পারবেন
- color টাইপের ইনপুটঃ ক্লিক করলে কালার পিকার ওপেন হবে এবং কালার সিলেক্ট করা যাবে।
- date টাইপের ইনপুটঃ mm/dd/yyyy (যেমনঃ 31/12/2019) এই ফরম্যাটে ইনপুট দেওয়ার ইনপুট ফিল্ড তৈরি হবে।
- time টাইপের ইনপুটঃ hh:mm AM/PM (যেমনঃ 12:20 AM) এই ফরম্যাটে ইনপুট দেওয়ার ইনপুট ফিল্ড তৈরি হবে।
- datetime-local টাইপের ইনপুটঃ mm/dd/yyyy hh:mm AM/PM (যেমনঃ 31/12/2019 8:30 PM) এই ফরম্যাটে ইনপুট দেওয়ার ইনপুট ফিল্ড তৈরি হবে।
- range টাইপের ইনপুটঃ drag করে পরিবর্তন করার মত একটি স্লাইডার দেখতে পাবেন। প্রতিধাপে মান ১ করে বাড়বে।
- File টাইপের ইনপুটঃ এই ইনপুটের জন্য ফাইল ব্রাউজ করার মত একটি বাটন তৈরি হবে।
- submit টাইপের ইনপুটঃ form এ ইনপুট দিলেন, এখন এই ইনপুটগুলো সাবমিট করতে হবে না? সাবমিট করার জন্য submit টাইপের ইনপুট দরকার।
- email টাইপের ইনপুটঃ এই ইনপুট দেখতে text টাইপের ইনপুটের মত। তারপরেও কেন ব্যবহার করবেন? কারন আপনি যখন email না লিখে হাবিজাবি লিখে submit করার চেষ্টা করবেন তখন আপনাকে warning দিবে।
email না লিখে হাবিজাবি লিখে submit বাটনে ক্লিক করে দেখুন কত চমৎকারভাবে error মেসেজ দিচ্ছে।
- checkbox টাইপ ইনপুটঃ type=”checkbox” দিয়ে এই ইনপুট তৈরি হয়। এই ইনপুটে একটি checkbox তৈরি হয়।
- radio টাইপ ইনপুটঃ type=”radio” দিয়ে এই ইনপুট তৈরি হয়। এই ইনপুটে একটি radio button তৈরি হয়।
কোন সমস্যা দেখতে পাচ্ছেন? হ্যাঁ আপনি ঠিকই ধরেছেন- আপনি একবার male সিলেক্ট করলেন সেটি সিলেক্ট হল, আবার female সিলেক্ট করলেন সেটিও সিলেক্ট হল। আসলে কী হবার কথা? একটি সিলেক্ট করলে অন্যটির সিলেকশন স্বয়ংক্রিয়ভাবে উঠে যাবে। আমি আসলে name এট্রিবিউট নিয়ে কথা বলতে চাই নি। কিন্তু এই ইনপুটের জন্য আপনাকে name এট্রিবিউট ব্যবহার করতে হবে এবং এর মান একই রাখতে হবে। নিচের কোড আপনার মনের মত কাজ করবেঃ
name এট্রিবিউটটা অনেক গুরুত্বপূর্ন ফর্ম প্রসেসিং এর ক্ষেত্রে। তারপর এই আলোচনা এড়িয়ে যাচ্ছি, কারন এটা বুঝতে হলে php বুঝতে হবে ভাল করে। তাই এই আলোচনা টা php নিয়ে টিউটরিয়ালে করব।
- textarea টাইপের ইনপুটঃ এই ইনপুটে অনেক বড় ধরনের লেখা ইনপুট দেওয়া হয়। যেমনঃ কমেন্ট করার জন্য এই ইনপুট ব্যবহার করা যেতে পারে। textarea নামে ওপেনিং ও ক্লোজিং ট্যাগ নিয়ে এই ইনপুট তৈরি হয়।
- select বা dropdown টাইপের ইনপুটঃ
- এই ইনপুট select এবং option এই দুইটি ট্যাগ নিয়ে গঠিত।
লক্ষ্য করুন, প্রতিটি option এ value নামে একটি attribute আছে। মনেকরুন, আপনি C programming অপশনটি সিলেক্ট করলেন, তাহলে form টি যেখানে প্রসেস করা হবে সেখানে “c” মানটি জমা হবে। এ বিষয়টি নিয়ে ভাল ধরনা পাবেন PHP নিয়ে আলোচনা করার সময়। select এর ভেতর multiple, attribute টি লিখে দিলে আপনি একাধিক অপশন যোগ করতে পারবেনঃ
একাধিক অপশন সিলেক্ট করার জন্য Ctrl চেপে ধরে সিলেক্ট করুন।
HTML নিয়ে নতুনদের জন্য আমাদের টিউটরিয়াল এখানেই শেষ করছি। আশা করছি, HTML নিয়ে আমাদের টিউটরিয়ালের এই প্রাথমিক ধারনা- আপনার HTML শেখাটাকে আনন্দময় করে তুলবে। আমাদের প্রতিটি সিরিজই এভাবে তৈরি, কম সময়ে- সহজবোধ্যভাবে আপনার শেখার পথটা কে সহজ করে দেওয়া। যারা নতুন করে HTML শুরু করতে চায়, তাদের কে আমাদের এই কোর্স্টা রেফার করতে পারেন। হেপি কোডিং