ওয়েব ডিজাইন (পর্ব ০৯) এইচটিএমএল ফর্ম

আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো, এইচটিএমএল ফর্ম।

ফরমের কাজ ও ব্যবহারঃ(Form work and use)

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

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

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

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

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

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

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Samrat"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Raihan">
</form>

ড্রপ ডাউনলিস্টঃ(Dropdown List)

আমরা যখন আমাদের ফর্মের নির্দিষ্ট কোনো তথ্য ইউজারের কাছ থেকে নিতে চায় তখন আমরা এই ড্রপ ডাউন লিস্ট ইউজ করতে পারি।

  <label for="test">Choose Option:</label>
  <select id="test" name="Tests">
    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3">Test 3</option>
    <option value="test4">Test 4</option>
  </select>

রেডিও বাটনঃ(Radio Button)

এই রেডিও বাটন কোনো অপশন ইউজ করতে ব্যবহার করা হয়।ইউজার এর কাছ থেকে অল্প সংখ্যক অপশন থেকে ডেটা নেওয়ার জন্য এইটা ব্যবহার করা হয় যেমন জেন্ডার নির্বাচন করতে এই রেডিও বাটন বেশি ইউজ করা হয়ে থাকে।

  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>

Textarea টেক্সট বক্সঃ(Textarea box)

টেক্স এরিয়া কোড ইউজ হয় যখন আমরা ইউজার এর কাছ থেকে কোনো বিস্তারিত তথ্য নেওয়ার প্রয়োজন হয় তখন।

<textarea name="message">This is...</textarea>

সাবমিট বাটনঃ(Submit Button)

আমাদের ফরমের গুরুত্বপূর্ন একটা অংশ হলো বাটন কারন আমরা ফরম পূরণ করার পর লাস্টে যেখানে ক্লিক করি তারমাধ্যমে ফরমের সকল ডাটা ওয়েব এডমিনের কাছে চলে যায়।

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

এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।