এইচটিএমএল ফর্ম- HTML Form
এক নজরে পরিচ্ছেদ
| প্রসঙ্গ | বর্ণনা |
|---|---|
| form ট্যাগ | ব্যবহারকারীর তথ্য সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয় |
| input ট্যাগ | ফর্মের তথ্য সংগ্রহ করার জন্য বিভিন্ন ইনপুট ট্যাগ ব্যবহার করা হয় |
| action এট্রিবিউট | ওয়েব পেজ থেকে ফর্মের তথ্য সার্ভারে পাঠায় |
| method এট্রিবিউট | ফর্ম সাবমিটের জন্য এইচটিটিপি(HTTP) মেথড নির্ধারণ করে |
| name এট্রিবিউট | ইনপুট ফিল্ডের ভ্যালু সার্ভারে সঠিক ভাবে সাবমিট করে |
| fieldset এট্রিবিউট | ফর্মের তথ্যকে বিভিন্ন অংশে বিভক্ত করে |
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল ফর্ম উদাহরণ</title>
</head>
<body>
<form method="post" action="action_page.php">
প্রথম নামঃ <input type="text" name="firstname" value="শিল্পী"><br>
শেষের নামঃ <input type="text" name="lastname" value="দেবনাথ"><br>
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
যখন আপনি সাবমিট বাটনে ক্লিক করবেন, তখন সার্ভার আপনার ইনপুট গুলোকে "action_page.php" ফাইলের মাধ্যমে প্রক্রিয়াজাত করে এবং ফলাফল ফেরত দেয়।
ফলাফল
বিঃদ্রঃ এই টিউটোরিয়ালটি আপনাকে শিখাবে না কিভাবে সার্ভার ফাইল প্রক্রিয়া করে। তা শিখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
এইচটিএমএল <form> এলিমেন্ট
ব্যবহারকারীর তথ্য সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়।
একটি এইচটিএমএল ফর্মকে <form> এলিমেন্ট দিয়ে ডিফাইন করা হয়।
উদাহরণ
<form>
...
ফর্ম এলিমেন্ট
...
</form>
ফর্ম এলিমেন্ট বিভিন্ন ধরনের হয়ে থাকে। যেমনঃ ইনপুট এলিমেন্ট, চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদি।
ফর্ম <input> এলিমেন্ট
ফর্ম এলিমেন্টের মধ্যে সবচেয়ে গুরুত্বপূর্ণ এবং বহুল ব্যবহৃত হচ্ছে <input> এলিমেন্ট। আমরা <input> এলিমেন্টে type এট্রিবিউট ব্যবহারের মাধ্যমে <input> এলিমেন্টকে বিভিন্ন প্রয়োজনে ব্যবহার করতে পারি।
এই টিউটোরিয়ালে আমরা type এট্রিবিউটে নিম্নের তিনটি ভ্যালুর ব্যবহার দেখবোঃ
| টাইপ | বর্ণনা |
|---|---|
| text | সাধারণ টেক্সট ইনপুট ডিফাইন করে |
| radio | রেডিও বাটন ইনপুট ডিফাইন করে |
| submit | ফর্ম সার্ভারে প্রেরনের জন্য ডিফাইন করা হয় |
ফর্ম text টাইপ ইনপুট
এক লাইনের একটি বক্সের মাধ্যমে তথ্য সংগ্রহের জন্য <input type="text"> ডিফাইন করতে হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>টেক্সট টাইপ ইনপুট</title>
</head>
<body>
<form>
প্রথম নামঃ <input type="text" name="firstname"><br>
শেষের নামঃ <input type="text" name="lastname"><br>
</form>
</body>
</html>
ফলাফল
পরামর্শঃ টেক্সট ইনপু্টের ডিফল্ট দৈর্ঘ্য ২০ ক্যারেক্টারের বেশি হয় না।
ফর্ম radio টাইপ ইনপুট
ইনপুট এলিমেন্ট দ্বারা রেডিও টাইপ বাটন তৈরি করার জন্য <input type="radio"> ডিফাইন করতে হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>রেডিও টাইপ ইনপুট</title>
</head>
<body>
<form>
<input type="radio" name="company" value="dell" checked> Dell <br>
<input type="radio" name="company" value="apple"> Apple <br>
<input type="radio" name="company" value="lenovo"> Lenovo
</form>
</body>
</html>
নিম্নের রেডিও বাটনে ব্যবহারকারী যেকোন একটিকে সিলেক্ট করতে পারবেঃ
ফলাফল
ফর্ম submit টাইপ ইনপুট
সার্ভারে তথ্য প্রেরনের জন্য সাবমিট বাটন তৈরি করতে <input type="submit"> ডিফাইন করতে হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সাবমিট টাইপ ইনপুট</title>
</head>
<body>
<form action="action_page.php">
প্রথম নামঃ <input type="text" name="firstname" value="শিল্পী"><br>
শেষের নামঃ <input type="text" name="lastname" value="দেবনাথ"><br>
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
যখন আপনি সাবমিট বাটনে ক্লিক করবেন, তখন সার্ভার আপনার ইনপুট গুলোকে "action_page.php" ফাইলের মাধ্যমে প্রক্রিয়াজাত করে এবং ফলাফল ফেরত দেয়।
ফলাফল
বিঃদ্রঃ এই টিউটোরিয়ালটি আপনাকে শিখাবে না কিভাবে সার্ভার ফাইল প্রক্রিয়া করে। তা শিখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
ফর্ম action এট্রিবিউট
সাবমিট বাটনে ক্লিক করার পর action এট্রিবিউটটি তার কার্য সম্পাদন করে। সাবমিট বাটনে ক্লিকের মাধ্যমে ওয়েব পেজ থেকে ফর্মের তথ্য সার্ভারে সাবমিট করা হয়।
নিম্নে একটি ব্যবহার দেখানো হলোঃ
<form action="action_page.php">
ফর্ম method এট্রিবিউট
ফর্ম সাবমিটের জন্য এইচটিটিপি(HTTP) মেথড GET অথবা
POST ব্যবহার হয়। নিম্নে ফর্মে মেথড এট্রিবিউট ডিফাইন করা হলঃ
<form action="action_page.php" method="get">
অথবাঃ
<form action="action_page.php" method="post">
কখন get ব্যবহার করবো?
ডিফল্টভাবে আপনি get মেথড ব্যবহার করতে পারেন। তবে ফর্মের তথ্য যদি সেন্সিটিভ(ইউজারের নাম অথবা পাসওয়ার্ড) হয় সেক্ষেত্রে get মেথড ব্যবহার করা উচিত না। কারণ আপনি যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান সেক্ষেত্রে আপনার প্রেরিত তথ্যটি নিম্নের মত পেজের এড্রেসের সাথে দেখা যাবেঃ
http://action_page.php?firstname=শিল্পী&lastname=দেবনাথ
কখন post ব্যবহার করবো?
আপনার ফর্মের তথ্য যদি সেন্সিটিভ হয় সেক্ষেত্রে অবশ্যই আপনার post মেথড ব্যবহার করা উচিত। কারণ আপনি যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান সেক্ষেত্রে আপনার প্রেরিত তথ্যটি নিম্নের মত পেজের এড্রেসের সাথে দেখা যাবে নাঃ
http://action_page.php
ফর্ম name এট্রিবিউট
প্রতিটি ইনপুট ফিল্ডের ভ্যালু সার্ভারে সঠিক ভাবে সাবমিট করার জন্য অবশ্যই name এট্রিবিউটটি সঠিক ভাবে ব্যবহার করতে হবে। কারণ name এট্রিবিউট ব্যাতিত সার্ভার আপনার প্রেরিত তথ্য গ্রহন করতে পারবে না।
নিম্নের উদাহরণে ফর্ম সাবমিট করার পর "প্রথম নাম" ইনপুট ফিল্ডের তথ্য সার্ভার গ্রহন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>ফর্ম name এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
প্রথম নামঃ
<input type="text" name="firstname" value="শরীফ">
<br>
শেষের নামঃ
<input type="text" value="গাজী">
<br><br>
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
লক্ষ্য করুনঃ "শেষের নাম" এই ইনপুট এলিমেন্টের ভ্যালু সার্ভারে সাবমিট হবে না, কারণ ইনপুট এলিমেন্টে কোনো name এট্রিবিউট নেই।
ফলাফল
বিঃদ্রঃ এই টিউটোরিয়ালটি আপনাকে শিখাবে না কিভাবে সার্ভার ফাইল প্রক্রিয়া করে। তা শিখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
ফর্ম <fieldset> এর মাধ্যমে ফর্মের তথ্য বিন্যাস
ফর্মের তথ্যকে বিভিন্ন ভাগে বিভক্ত করার জন্য <fieldset> এলিমেন্ট ব্যবহার করা হয় এবং <fieldset> এলিমেন্টের মধ্যে <legend> এলিমেন্ট ব্যবহারের মাধ্যমে একটি ক্যাপশন বা শিরোনাম নির্ধারণ করা যায়
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল ফর্ম</title>
</head>
<body>
<form action="action_page.php">
<fieldset>
<legend> ব্যক্তিগত তথ্য:</legend>
প্রথম নামঃ
<input type="text" name="firstname" value="শিল্পী">
<br>
শেষের নামঃ
<input type="text" name="lastname" value="দেবনাথ">
<br>
<input type="submit" value="সাবমিট">
</fieldset>
</form>
</body>
</html>
ফলাফল
বিঃদ্রঃ এই টিউটোরিয়ালটি আপনাকে শিখাবে না কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে। তা শিখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
এইচটিএমএল ফর্ম এট্রিবিউট
নিম্নে ফর্মের সকল সম্ভাব্য এট্রিবিউটের সেটসহ একটি এইচটিএমএল <form> এলিমেন্ট দেখানো হলোঃ
উদাহরণ
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8" enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
...
ফর্ম এলিমেন্ট
...
</form>
নিন্মে <form> এলিমেন্টের এট্রিবিউট সমুহের তালিকা দেওয়া হলোঃ
| এট্রিবিউট | বর্ণনা |
|---|---|
| accept-charset | ফর্মের জন্য ক্যারেক্টার সেট ডিফাইন করে। |
| action | ফর্ম কোথায় সাবমিট করা হবে তা ডিফাইন করে। |
| autocomplete | ব্রাউজার ফর্মের ভ্যালু স্বয়ংক্রিয়ভাবে সম্পূর্ন করবে কিনা তা ডিফাইন করে। |
| enctype | সাবমিটকৃত ডেটার জন্য এনকোডিং ডিফাইন করা হয়।(ডিফল্টঃ url-encoded) |
| method | ডেটা সাবমিটের জন্য নির্দিষ্ট এইচটিটিপি(HTTP) মেথড ডিফাইন করা হয়। |
| name | ফর্মকে সনাক্ত করতে একটি নাম ব্যবহৃত হয়।(ডোমে ব্যবহারের জন্যঃ document.forms.name) |
| novalidate | ব্রাউজার ফর্মের বৈধতা যাচাই করবে না তা ডিফাইন করে। |
| target | action এট্রিবিউটের মাধ্যমে তথ্য প্রক্রিয়া করার জন্য সার্ভার ফাইলটি ডিফাইন করে। |