এইচটিএমএল ফর্ম

ওয়েবসাইটের জন্য এইচটিএমএল ফর্ম খুবই গুরুত্বপূর্ণ । কোন ওয়েবসাইট এ নিবন্ধন প্রক্রিয়া যুক্ত করার জন্য এইচটিএমএল ফর্ম ব্যবহার করা হয় । এছাড়া, ওয়েবসাইট এ সার্চ বক্স যুক্ত করার করার জন্য এইচটিএমএল ফর্ম ব্যবহার করা হয় । এইচটিএমএল ফর্ম নতুনদের জন্য প্রথমে কিছুটা কঠিন মনে হতে পারে । তবে, ভাল করে প্র্যাকটিস করলে আর মনোযোগ দিয়ে টিউটোরিয়ালটি পড়লে সহজ হয়ে যাবে – ইনশাল্লাহ্‌ ।

এইচটিএমএল ফর্ম তৈরি করার জন্য <form>…</form> ট্যাগ ব্যবহার করা হয় এবং <form>…</form> ট্যাগ এর ভিতরে বেশ কিছু ট্যাগ ব্যবহার করা হয় ।

টেক্সট ফিল্ড

ওয়েবসাইট এ ফর্ম পূরণ করার সময় ভিজিটরকে বেশ কিছু তথ্য (যেমন; নাম, ই-মেইল, ঠিকানা ইত্যাদি) দিয়ে ফর্ম সাবমিট করতে হয় । এসব কাজ আপনি টেক্সট ফিল্ড এর মাধ্যমে করতে পারেন ।

এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
 <title> HTML Form </title>
</head>
<body>
 <form>
 Name: <input type="text" /> <br />
 E-mail: <input type="text" /> <br />
 </form>
</body>
</html>

এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।

পাসওয়ার্ড ফিল্ড

ওয়েবসাইট এ ফর্ম পূরণ করার সময় ভিজিটরকে ইউজার নেম এবং পাসওয়ার্ড দিয়ে ফর্ম সাবমিট করতে হয় । এসব কাজ আপনি পাসওয়ার্ড ফিল্ড এর মাধ্যমে করতে পারেন ।

এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
 <title> HTML Form </title>
</head>
<body>
 <form>
 Password: <input type="password" /> <br />
 </form>
</body>
</html>

এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।

রেডিও বাটন

আপনি যদি এমন চান যে ভিজিটর একাধিক বিষয় থেকে একটি বিষয় বাছাই করে ফর্মটি সাবমিট করবে তাহলে রেডিও বাটন ব্যবহার করতে পারেন ।

এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
 <title> HTML Form </title>
</head>
<body>
 <form>
 Priority: <input type="radio" name="priority" Value="High" /> High <br />
 <input type="radio" name="priority" Value="Medium" /> Medium <br />
 <input type="radio" name="priority" Value="Low" /> Low <br />
 </form>
</body>
</html>

এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।

চেকবক্স

আপনি যদি এমন চান যে ভিজিটর একাধিক বিষয় থেকে এক বা একাধিক বিষয় বাছাই করে ফর্মটি সাবমিট করবে তাহলে রেডিও বাটন ব্যবহার করতে পারেন ।

এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
 <title> HTML Form </title>
</head>
<body>
 <form>
 Department:
 <input type="checkbox" name="department" Value="Sales" /> Sales
 <input type="checkbox" name="department" Value="Support" /> Support <br />
 </form>
</body>
</html>

এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।

ড্রপডাউন

ড্রপডাউন মেনু তৈরি করার জন্য সাধারণত এইচটিএমএল ড্রপডাউন ব্যবহার করা হয় ।

এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
 <title> HTML Form </title>
</head>
<body>
 <form>
 Marital Status: <select name="Status">
 <option> Married </option>
 <option> Unmarried </option>
 </select> <br />
 </form>
</body>
</html>

এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।

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

আপনি যদি চান যে ওয়েবসাইটের ব্যবহারকারী কোন ম্যাসেজ অর্থাৎ বার্তা লিখে আপনার কাছে পাঠাবে তাহলে আপনি টেক্সট এরিয়া ব্যবহার করবেন ।

এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
 <title> HTML Form </title>
</head>
<body>
 <form>
 Massage: <textarea rows="5" cols="30"> </textarea>
 </form>
</body>
</html>

এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।

সাবমিট বাটন

ওয়েবসাইটের ফর্ম সাবমিট করার জন্য সাবমিট বাটন ব্যবহার করতে হয় ।

এ সম্পর্কে আরও ভালোভাবে বুঝতে নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
 <title> HTML Form </title>
</head>
<body>
 <form>
 <input type="submit" value="Submit" />
 </form>
</body>
</html>

এবার index.html ফাইলটি একই ব্রাউজারে ওপেন করুন ।
এখন আমরা একটি এইচটিএমএল ফর্ম তৈরি করবো । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
<title> HTML Form </title>
</head>
<body>
<form>
Name: <input type="text" /> <br />
E-mail: <input type="text" /> <br />
Password: <input type="password" /> <br />
Marital Status: <select name="Status">
<option> Married </option>
<option> Unmarried </option>
</select> <br />
Priority: <input type="radio" name="priority" Value="High" /> High <br />
<input type="radio" name="priority" Value="Medium" /> Medium <br />
<input type="radio" name="priority" Value="Low" /> Low <br />
Department:
<input type="checkbox" name="department" Value="Sales" /> Sales
<input type="checkbox" name="department" Value="Support" /> Support <br />
Massage: <textarea rows="5" cols="30"> </textarea> <br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

কোড কপি না করে, অবশ্যই কোডটুকু নিজের হাতে লিখবেন । কোড কপি করে প্র্যাকটিস করলে আপনারা তেমন কিছু বুঝতে পারবেন না ।

এবার index.html ফাইলটি একটি ব্রাউজারে ওপেন করান তাহলে নিচের চিত্রের মত দেখতে পারবেন;

sshot-23

Series Navigation<< এইচটিএমএল টেবিলএইচটিএমএল এনটাইটি >>

Leave a Reply

Your email address will not be published. Required fields are marked *