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 শুরু করতে চায়, তাদের কে আমাদের এই কোর্স্টা রেফার করতে পারেন। হেপি কোডিং