ওয়েব ডিজাইন (পর্ব ০৬) ফরম ডিজাইন

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

ফরমের কাজ ও ব্যবহারঃ

আমাদের ওয়েব সাইটে ভিজিটরদের তথ্য নেওয়ার জন্য ফর্ম ব্যবহার করতে পারি।ফরমের কাজের জন্য আমরা <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>

ড্রপ ডাউনলিস্টঃ

আমরা যখন আমাদের ফর্মের নির্দিষ্ট কোনো তথ্য ইউজারের কাছ থেকে নিতে চায় তখন আমরা এই ড্রপ ডাউন লিস্ট ইউজ করতে পারি।
          <form action="/action_page.php">
  <label for="test">Choose Option:</label>
  <select id="tests" 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>
  <input type="submit">
</form>

রেডিও বাটনঃ

এই রেডিও বাটন কোনো অপশন ইউজ করতে ব্যবহার করা হয়।ইউজার এর কাছ থেকে অল্প সংখ্যক অপশন থেকে ডেটা নেওয়ার জন্য এইটা ব্যবহার করা হয় যেমন জেন্ডার নির্বাচন করতে এই রেডিও বাটন বেশি ইউজ করা হয়ে থাকে।
 <form>
  <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>
</form>

Textarea টেক্সট বক্সঃ

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

    <form action="/action_page.php">
  <textarea name="message">This is...</textarea>
  <br><br>
  <input type="submit">
</form>

বাটন এলিমেন্টঃ

অনেক সময় আমাদের অনেক কাজে ব্যবহার এর জন্য বাটন লাগে।এই বাটনগুলো ফর্ম ছাড়াও ব্যবহার করা যায়।আমরা আমাদের বাটন কাজ করতেছে কিনা তা বুঝার জন্য এই কোডটি দিয়ে চেক করতে পারি।

    <button type="button" onclick="alert('I am Rady')">Test Button</button>

সাবমিট বাটনঃ

আমাদের ফরমের গুরুত্বপূর্ন একটা অংশ হলো বাটন কারন আমরা ফরম পূরণ করার পর লাস্টে যেখানে ক্লিক করি তারমাধ্যমে ফরমের সকল ডাটা ওয়েব এডমিনের কাছে চলে যায়।
 
   <form action="/action_page.php">
  <label>First name:</label><br />
  <input id="fname" name="fname" type="text" value="John" /><br />
  <label>Last name:</label><br />
  <input id="lname" name="lname" type="text" value="Doe" /><br /><br />
  <input type="submit" value="Submit" />
</form>

গেট মেথডঃ

আমাদের ডেটা ট্রান্সফার এর জন্য গেট টা ইউজ করে থাকি এই গেট মেথড এর মাধ্যমে ওয়েব ইউআরএল এ দেখানোর মাধ্যমে ডেটা ট্রান্সফার করে থাকে। এই মেথডটা দুইভাবে ইউজ করা যায়, যেমন,method="get" ও method="post"


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





Samrat Raihan

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time.If you can learn something from this blog, then I will be successful.