বেসিক এইচটিএমএল(HTML)শিখুন টিউটোরিয়াল [পর্ব-৯] : এইচটিএমএল ফর্ম (HTML Form)

জকে আমরা এইচটিএমএল ফর্ম কি এবং এর ব্যবহার সম্পর্কে জানবো। এইচটিএমএলhow-to-learn-html-css-and-javascript-how-to-learn-html5-how-to-learn-html-quickly-learn-html-codes-how-to-learn-html-and-css-learn-basic-html-how-to-learn-html-pdf-ho এ ফর্ম একটি গুরুত্বপূর্ণ বিষয় সাধারনত কোন ব্যক্তির কাছ থেকে তার তথ্য গ্রহণ (ইনপুট) করতে এইচটিএমএল ফর্ম ব্যবহৃত হয়। আমরা যখন নেটে বিভিন্ন সাইটে একাউন্ট খুলতে যাই  অবশ্যই বিভিন্ন ধরণের ফর্ম পুরণ করতে হয়। যেমন- ফেসবুক, জিমেইল। আজ সেসব ফর্ম এর বিভিন্ন অংশ তৈরি করা শিখব।

 

 

 

 

একটি এইচটিএমএল ফর্ম বেশ কিছু উপাদানের সমন্বয়ে গঠিত হয়।

  • টেক্সট ফিল্ড
  • সাবমিট বাটন
  • রেডিও বাটন
  • টেক্সট এরিয়া
  • চেক বক্স
  • ড্রপ-ডাউন বক্স  টেক্সট ফিল্ডঃ

    সাইট এ ফর্ম পূরণ করার সময় কিছু তথ্যের উত্তর দিতে হয়। আমরা যে জায়গায় তথ্যের উত্তর দিচ্ছি সেটি-ই হচ্ছে টেক্সট ফিল্ড। যেমনঃ Your name: (এখানে নিজের নাম লিখতে হয় )

    নিচের কোডগুলো এডিটরে লিখুন

    <!DOCTYPE HTML><html>

    <head>

    <title>Text Field</title>

    </head>

    <body>

    <form>

    Your Name:

    <input type=”text” name=”yourname”/>

    </br>

    Father Name:

    <input type=”text” name=”fathername”/>

    </form>

    </body>

    </html>

    এরপর text-filled.html নামে সেভ করুন এবং ফাইলটি একটি ব্রাউজারে ওপেন করে আউটপুট দেখুন।

  • Screenshot_2     এখানে কোডটিতে <form> ট্যাগ ব্যবহার করা হয়েছে, যেটি ফর্মকে নির্ধারণ করছে এবং ইনপুট ফিল্ড নির্ধারনের জন্য ইনপুট ট্যাগ ব্যবহার করা হয়েছে। এছাড়া ইনপুট ট্যাগ এর ভিতরে ইনপুট টাইপটি কি ধরণের হবে তাও বলে দেওয়া হয়েছে।

    সাবমিট বাটনঃ

এবার আমরা দেখব কিভাবে সাবমিট বাটন যুক্ত করা যায়। যেকোনো ফরম পূরণ শেষে ফরম সাবমিট করতে সাবমিট বাটন ব্যবহৃত হয়। আর এটি করার জন্য খুব বেশি কিছু করা লাগবে না। আমাদের পূর্বের কোডটিতে শুধুমাত্র এই লাইনটি যুক্ত করলে হবে-  <input type=”submit” value=”Submit”/>। নিচে সম্পূর্ন কোডটি দেওয়া আছে কোডটি এডিটরে লিখে সেভ করুন।

<!DOCTYPE HTML>

<html>

<head>

<title>Submit</title>

</head>

<body>

<form>

Your Name:

<input type=”text” name=”yourname”/>

</br>

Father Name:

<input type=”text” name=”fathername”/>

</br>

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

</form>

</body>

</html>

এর পর যেকোনো ব্রাউজারে ওপেন করলে নিচের মতো দেখতে পাবেন।

Screenshot_3

রেডিও বাটনঃ  

রেডিও বাটন সাধারণত ব্যবহার করা হয় যখন ইউজারকে যখন একাধিক অপশন থেকে যেকোন একটিকে নির্বাচন করতে হয় সেক্ষেত্রে। এবার নোটপ্যাড এ নিচের কোডটি টাইপ করে ফেলুন।

<!DOCTYPE HTML>

<html>

<head>

<title>Radio</title>

</head>

<body>

<form action=””>

Male

<input type=”radio” name=”Sex” value=”male”>

<br/>

Female

<input type=”radio” name=”Sex” value=”female”>

</form>

</body>

</html>

এর পর যেকোনো ব্রাউজারে ওপেন করলে নিচের মতো দেখতে পাবেন।

Screenshot_4

 

 

টেক্সট এরিয়াঃ

ব্যবহারকারী যেখানে তার ম্যাসেজ/বার্তা লিখবে সেটি হচ্ছে টেক্সট এরিয়া। নিচের কোডগুলো যেকোনো এডিটরে লিখে text-area.html নামে সেভ করুন।

<!DOCTYPE HTML>

<html>

<body>

<font face=”arial” size=”2″>

<center>

Your Massage:

</font>

</br>

<textarea rows=”5″ cols=”30″></textarea><br />

<font size=”2″>

</body>

</center>

</font>

</br>

</body>

</html>

এরপর ব্রাউজারে ওপেন করুন।

Screenshot_5

 চেক বক্সঃ

এবার দেখবো কীভাবে চেকবক্স তৈরি করতে হয়। সাধারণত যখন ইউজারকে একসাথে এক বা একাধিক অপশন বাছাই করতে হয় তখন চেকবক্স ব্যবহার করতে হয় ।

নিচের কোডগুলো যেকোনো এডিটরে লিখে checkbox.html নামে সেভ করুন আর ব্রাউজারে ওপেন করুন।

<!DOCTYPE HTML>

<html>

<head>

<title>check Box</title>

</head>

<body>

<p> Game you like to play </p>

<form action=””>

Football:

<input type=”checkbox” name=”game” value=”football”>

<br/>

Cricket:

<input type=”checkbox” name=”game” value=”cricket”>

<br/>

Baseball:

<input type=”checkbox” name=”game” value=”baseball”>

<br/>

Volleyball

<input type=”checkbox” name=”game” value=”volleyball”>

<br/>

</body>

</html>

এবার আউটপুট দেখুন।

Screenshot_6

ড্রপ-ডাউন বক্সঃ 

একসাথে এক বা একাধিক অপশন থেকে একটি অপশন বাছাই বাকি অপশনগুলো আর দেখাবে না। এই পদ্ধতি-ই হচ্ছে ড্রপডাউন মেন্যু ।

নিচের কোডগুলো লিখে dropdown.html নামে সেভ করুনঃ

<!DOCTYPE HTML>

<html>

<body>

<font>

<center>

Related Service

</font>

<select name=”Services”>

<option>Web Design </option>

<option> Web Development </option>

<option> SEO </option>

<option> Hosting </option>

<option> Domain </option>

</select>

</body>

</center>

</font>

</html>

এবার সেভ করা ফাইলটি একটি ব্রাউজারে ওপেন করুন। এবার আউটপুট দেখুন।

Screenshot_7

 

 

 

আশা করি টিউটোরিয়ালটি ভালো লাগবে। আগামী পর্ব দেখার আমন্ত্রণ জানিয়ে এখানেই শেষ করছি।

আরো পোস্ট দেখুন

comments