HTML <form> এলিমেন্ট এমন একটি ফর্ম নির্ধারণ করে, যা ব্যবহারকারীর ইনপুট সংগ্রহ করতে ব্যবহৃত হয়:
<form>
.
form elements
.
</form>HTML ফর্মের উদাহরণ:
একটি HTML ফর্মে ফর্ম এলিমেন্ট থাকে।
ফর্ম এলিমেন্ট বিভিন্ন ধরনের ইনপুট এলিমেন্ট, যেমন টেক্সট ফিল্ড, চেকবক্স, রেডিও বাটন, সাবমিট বাটন এবং আরও অনেক কিছু।
<input> এলিমেন্ট সবচেয়ে গুরুত্বপূর্ণ ফর্ম এলিমেন্ট।
<input> এলিমেন্ট type অ্যাট্রিবিউটের উপর নির্ভর করে বিভিন্নভাবে প্রদর্শিত হতে পারে।
এখানে কিছু উদাহরণ দেওয়া হলো:
| Type | বিবরণ |
|---|---|
| <input type="text"> | একটি এক-লাইনের টেক্সট ইনপুট ফিল্ড নির্ধারণ করে |
| <input type="radio"> | একটি রেডিও বাটন নির্ধারণ করে (একাধিক বিকল্প থেকে একটি বেছে নেওয়ার জন্য) |
| <input type="submit"> | একটি সাবমিট বাটন নির্ধারণ করে (ফর্ম জমা দেওয়ার জন্য) |
<input type="text"> টেক্সট ইনপুটের জন্য একটি এক-লাইনের ইনপুট ফিল্ড নির্ধারণ করে।
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>ব্রাউজারে এটি এভাবে দেখাবে:
মনে রাখবেন: ফর্মটি নিজে দৃশ্যমান নয়। এটাও লক্ষ্য করুন যে একটি টেক্সট ফিল্ডের ডিফল্ট প্রস্থ 20 অক্ষর।
<input type="radio"> একটি রেডিও বাটন নির্ধারণ করে।
রেডিও বাটন ব্যবহারকারীকে সীমিত সংখ্যক বিকল্প থেকে ঠিক একটি বেছে নিতে দেয়:
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="submit"> ফর্ম ডেটা একটি ফর্ম-হ্যান্ডলারে জমা দেওয়ার জন্য একটি বাটন নির্ধারণ করে।
ফর্ম-হ্যান্ডলার সাধারণত একটি সার্ভার পেজ, যেখানে ইনপুট ডেটা প্রসেস করার একটি স্ক্রিপ্ট থাকে।
ফর্মের action অ্যাট্রিবিউটে ফর্ম-হ্যান্ডলার উল্লেখ করা হয়:
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
action অ্যাট্রিবিউট ফর্ম জমা দেওয়ার সময় কী কাজ করা হবে তা নির্ধারণ করে।
সাধারণত, ব্যবহারকারী সাবমিট বাটনে ক্লিক করলে ফর্ম ডেটা সার্ভারের একটি ওয়েব পেজে পাঠানো হয়।
উপরের উদাহরণে, ফর্ম ডেটা সার্ভারের "/action_page.php" নামের একটি পেজে পাঠানো হয়। এই পেজে একটি সার্ভার-সাইড স্ক্রিপ্ট থাকে, যা ফর্ম ডেটা প্রসেস করে:
<form action="/action_page.php">action অ্যাট্রিবিউট বাদ দেওয়া হলে, action-এর মান বর্তমান পেজে সেট হয়ে যায়।
target অ্যাট্রিবিউট নির্ধারণ করে যে জমা দেওয়া ফলাফল একটি নতুন ব্রাউজার ট্যাবে, একটি ফ্রেমে, নাকি বর্তমান উইন্ডোতে খুলবে।
ডিফল্ট মান হলো "_self", যার মানে ফর্মটি বর্তমান উইন্ডোতেই জমা হবে।
ফর্মের ফলাফল একটি নতুন ব্রাউজার ট্যাবে খুলতে, "_blank" মান ব্যবহার করুন:
<form action="/action_page.php" target="_blank">অন্যান্য বৈধ মান হলো "_parent", "_top", অথবা একটি iframe-এর নাম নির্দেশক কোনো নাম।
method অ্যাট্রিবিউট ফর্ম ডেটা জমা দেওয়ার সময় কোন HTTP মেথড (GET বা POST) ব্যবহার করা হবে তা নির্ধারণ করে:
<form action="/action_page.php" method="get">অথবা:
<form action="/action_page.php" method="post">ফর্ম ডেটা জমা দেওয়ার ডিফল্ট মেথড হলো GET।
তবে, GET ব্যবহার করলে, জমা দেওয়া ফর্ম ডেটা পেজের অ্যাড্রেস ফিল্ডে দৃশ্যমান হবে:
/action_page.php?firstname=Mickey&lastname=MouseGET সম্পর্কে কিছু কথা:
ফর্ম ডেটায় স্পর্শকাতর বা ব্যক্তিগত তথ্য থাকলে সবসময় POST ব্যবহার করুন। POST মেথড জমা দেওয়া ফর্ম ডেটা পেজের অ্যাড্রেস ফিল্ডে দেখায় না।
POST সম্পর্কে কিছু কথা:
প্রতিটি ইনপুট ফিল্ড জমা দেওয়ার জন্য তার একটি name অ্যাট্রিবিউট থাকতে হবে।
name অ্যাট্রিবিউট বাদ দেওয়া হলে, সেই ইনপুট ফিল্ডের ডেটা একেবারেই পাঠানো হবে না।
এই উদাহরণে শুধু "Last name" ইনপুট ফিল্ডটি জমা হবে:
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>একটি ফর্মে সম্পর্কিত ডেটা গ্রুপ করতে <fieldset> এলিমেন্ট ব্যবহার করা হয়।
<legend> এলিমেন্ট <fieldset> এলিমেন্টের জন্য একটি ক্যাপশন নির্ধারণ করে।
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
এখানে সব <form> অ্যাট্রিবিউটের তালিকা দেওয়া হলো:
| অ্যাট্রিবিউট | বিবরণ |
|---|---|
| accept-charset | জমা দেওয়া ফর্মে ব্যবহৃত charset নির্ধারণ করে (ডিফল্ট: পেজের charset)। |
| action | ফর্ম কোথায় জমা দিতে হবে তার একটি ঠিকানা (url) নির্ধারণ করে (ডিফল্ট: যে পেজ থেকে জমা দেওয়া হচ্ছে)। |
| autocomplete | ব্রাউজার ফর্ম অটোকমপ্লিট করবে কিনা তা নির্ধারণ করে (ডিফল্ট: on)। |
| enctype | জমা দেওয়া ডেটার এনকোডিং নির্ধারণ করে (ডিফল্ট: url-encoded)। |
| method | ফর্ম জমা দেওয়ার সময় ব্যবহৃত HTTP মেথড নির্ধারণ করে (ডিফল্ট: GET)। |
| name | ফর্ম শনাক্ত করতে ব্যবহৃত একটি নাম নির্ধারণ করে (DOM ব্যবহারের জন্য: document.forms.name)। |
| novalidate | নির্ধারণ করে যে ব্রাউজার ফর্মটি ভ্যালিডেট করবে না। |
| target | action অ্যাট্রিবিউটের ঠিকানার টার্গেট নির্ধারণ করে (ডিফল্ট: _self)। |
পরবর্তী চ্যাপ্টারগুলোতে ফর্ম অ্যাট্রিবিউট সম্পর্কে আরও জানবেন।