Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

এইচটিএমএল ফর্ম - HTML Form


ফর্ম হল ওয়েব পেজ এর একটি গুরুত্বপূর্ণ বিষয়। প্রায় সকল ওয়েব পেজেই ফর্ম ব্যবহার করা হয়। ফর্ম হল ইউজার থেকে বিভিন্ন তথ্য বা উপাত্ত সংগ্রহের জন্য কয়েকটি ফিল্ডের সমাহার। ইউজার থেকে বিভিন্ন তথ্য বা উপাত্ত যেমন - মন্তব্য, অর্ডার, মেইল ইত্যাদি সংগ্রহের জন্য এইচটিএমএল ফর্ম ব্যবহার করা হয়।



First name:

Last name:





<form> এলিমেন্ট

ওয়েব পেজে ফর্ম তৈরি করার জন্য <form> ট্যাগ ব্যবহার করা হয়। ফর্ম ট্যাগ ব্যবহার করে আমরা ওয়েব পেজে শুধু ফর্ম তৈরি করতে পারি, ফর্মে ইনপুট দেয়া ডাঁটা সার্ভারে পাঠানো বা ডাঁটাগুলোকে প্রসেস করার জন্য আমাদের সার্ভার সাইড ল্যাঙ্গুয়েজ যেমন - পিএইচপি ব্যবহার করতে হবে।

উদাহরণ

<form> 
  .
  form elements
  . 
<form>
 

বিভিন্ন ধরনের বহুল বাবহ্রিত ফর্ম এলিমেন্ট গুলো হল ইনপুট, চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদি।


<input> এলিমেন্ট

এইচটিএমএল ফর্মে ব্যবহারের জন্য অনেক গুলো ফর্ম ট্যাগ আছে। তার মধ্যে বহুল ব্যাবহৃত একটি ট্যাগ হল ইনপুট ট্যাগ। ইনপুট ট্যাগের কোন ক্লোজিং ট্যাগ নেই, অর্থাৎ এটি একটি ডেপ্রিকেটেড ট্যাগ। ইনপুট ট্যাগ হল ফর্ম এর প্রান।

ইনপুট ফিল্ডের মধ্যে যে সকল জিনিস অন্তর্ভুক্ত থাকে সেগুলো হল টেক্সট ফিল্ড, পাসওয়ার্ড ফিল্ড, চেকবক্স, রেডিও বাটন, টেক্সট এরিয়া, বাটন, সাবমিট বাটন ইত্যাদি। নীচে এগুলো সম্পরকে দেখুন।

টাইপ বর্ণনা
<input type="text"> এক লাইনের একটি সাধারণ টেক্সট ইনপুট ফিল্ড তৈরি করে
<input type="radio"> একটি রেডিও বাটন ইনপুট ফিল্ড তৈরি করে (অনেকগুলো থেকে একটি পছন্দ করা)
<input type="submit"> ফর্ম সার্ভারে প্রেরনের জন্য একটি সাবমিট বাটন তৈরি করে।

নোট - ইনপুট টাইপ সম্পর্কে পরবর্তী অধ্যায় গুলোতে বিস্তারিত দেখান হয়েছে।


টেক্সট ইনপুট

বিভিন্ন ওয়েব সাইট এ রেজিস্ট্রেশন করতে গেলে প্রথমে একটি ফর্ম আসে যেখানে ফাস্ট নেম, লাস্ট নেম ইত্যাদি নামে বিভিন্ন টেক্সট ফিল্ড বা ঘর থাকে যেখানে ইউজারকে বিভিন্ন তথ্য বা ডাটা সার্ভারে প্রদানের সুযোগ করে দেয়া হয়। অর্থাৎ টেক্সট ফিল্ড হল এমন একটি ছোট ঘর বা আয়তক্ষেত্র যা ইউজারকে সার্ভারে কোন টেক্সট ইনপুট করতে দেয়।

টেক্সট ফিল্ড তৈরি করার জন্য <input> ট্যাগ ব্যবহার করা হয়। <input> ট্যাগের সাথে যে সকল এট্রিবিউট ব্যবহার করা হয় তা হল type, name, size, maxlength, value. নিচে এগুলোর বর্ণনা দেখুন।

সব এট্রিবিউটগুলো ব্যবহার করে নীচে একটি উদাহরন দেখুন।

উদাহরণ


<form>
  First name:< input type="text" size="20" maxlength="20" value="Here Your First name" name="firstname"> 
  Last name: <input type="text" size="20" maxlength="20" value="Here Your Lastname" name="lastname">
</form>

কোড এডিটর



submit বাটন

সার্ভারে তথ্য প্রেরনের জন্য সাবমিট বাটন তৈরি করা হয়। এর জন্য <input type="submit"> কোড ব্যাবহার করুন। সাবমিট বাটনে ক্লিক করার পর, সার্ভার ফর্মের ইনপুট তথ্য গুলোকে একটি .php এক্সটেনশন যুক্ত ফাইলের মাধ্যমে execute করে এবং ব্রাউজারে ফলাফল ফেরত পাঠায়।

উদাহরণ


<form action="/action_page.php"> 
First name:<br /> <input type="text" name="firstname" value="Mr."><br /> Last name:<br /> <input type="text" name="lastname" value="Bean"><br /><br /> <input type="submit" value="Submit"> </form>

কোড এডিটর



ফর্ম action এট্রিবিউট

সাবমিট বাটনে ক্লিক করার পর action এট্রিবিউটটি কাজ করে। সাবমিট বাটনে ক্লিক করার ফলে ওয়েব পেজ থেকে ফর্মের ইনপুট করা তথ্য গুলো সার্ভারে প্রেরন করা হয়।

নিচের উদাহরনে ফর্মের তথ্য গুলো "/action_page.php" নামে একটি পেজে যায়, এই পেজটি সার্ভার-সাইড স্ক্রিপ্ট, যেমন - PHP কোড ধারন করে যা ফর্মের তথ্য গুলো প্রসেস করে।

নিম্নে একটি ব্যবহার দেখানো হলো।

উদাহরণ


<form action="/action_page.php">

কোড এডিটর


নোট - যদি action এট্রিবিউট বাদ দেয়া হয় বা omite করা হয় তবে, action টি বর্তমান ওয়েব পেজে কাজ করে।


ফর্ম Target এট্রিবিউট

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 মেথডটি হল কোন এইচটিএমএল ফরমের পূর্ব-নির্ধারিত বা default মান। অর্থাৎ কোন মান নিরধারন না করলে default ভাবে এটি get মেথড অনুসারে কাজ করবে। তবে ফর্মের তথ্যগুলো যদি স্পর্শকাতর, যেমন - ইউজারের নাম, পাসওয়ার্ড অথবা ব্যাংক সংক্রান্ত কোন তথ্য হয়ে থাকে সেক্ষেত্রে কোন ভাবেই get মেথড ব্যবহার করা উচিত না। কারণ যখন get মেথড ব্যবহার করে ফর্মের তথ্য সার্ভারে প্রেরন করা হয়ে থাকে তখন প্রেরিত তথ্যগুলো ওয়েব পেজের এড্রেস বা URL এর সাথে দেখা যায়। নিছে একটি উদাহরন দেখুন।

উদাহরণ


/action_page.php?firstname=Mr.&lastname=Bean

নোট -


কখন post ব্যবহার করবো?

কোন ফর্মের তথ্য যদি স্পর্শকাতর হয় সেক্ষেত্রে অতি অবশ্যই post মেথড ব্যবহার করা উচিত। কারণ যখন get মেথড ব্যবহার করে ফর্মের তথ্যগুলো সার্ভারে পাঠান হয় তখন ফর্মের প্রেরিত সকল তথ্য গুলো ওয়েব পেজের URL এ দেখা যায়, কিন্তু POST মেথড ব্যবহার করে ফর্মের তথ্য গুলো সার্ভারে প্রেরন করলে, ফর্মের তথ্য গুলো ওয়েব পেজের URL প্রদর্শিত হয় না। নিছে একটি উদাহরন দেখুন। এখানে POST মেথড ব্যবহার করা হয়েছে বলে নিচের মত ওয়েব পেজের এড্রেস দেখা যাবে।

উদাহরণ


http://action_page.php

নোট -


<fieldset> ব্যবহার করে তথ্য বিন্যাস

<fieldset> এলিমেন্ট ব্যবহার করে কোন ফর্মের একই রকম তথ্য গুলো গ্রুপ করা হয়।

<legend> এলিমেন্ট, <fieldset> এলিমেন্টের ক্যাপশন তৈরি করে।

উদাহরণ


<form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br />
    <input type="text" name="firstname" value="Mr."><br />
    Last name:<br />
    <input type="text" name="lastname" value="Bean"><br /><br />
    <input type="submit" value="Submit">
  </fieldset>
</form>

কোড এডিটর



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

এট্রিবিউটবর্ণনা
accept-charset সাবমিট করা ফর্মের জন্য ক্যারেক্টার সেট ডিফাইন করে। স্বয়ংক্রিয় মান হল ওয়েব পেজের ক্যারেক্টার সেট।
action ফর্ম কোথায় সাবমিট করা হবে অর্থাৎ URL তা ডিফাইন করে। স্বয়ংক্রিয় মান হল সাবমিট করা ওয়েব পেজ।
autocomplete ব্রাউজার ফর্মের ভ্যালু স্বয়ংক্রিয়ভাবে সম্পূর্ন করবে কিনা তা ডিফাইন করে। স্বয়ংক্রিয় মান হল on.
enctype সাবমিটকৃত ডেটার জন্য এনকোডিং ডিফাইন করা হয়। স্বয়ংক্রিয় মান হল url-encoded.
method তথ্য সাবমিটের জন্য নির্দিষ্ট এইচটিটিপি (HTTP) মেথড ডিফাইন করা হয়। স্বয়ংক্রিয় মান হল GET.
name ফর্মের ফিল্ড গুলোকে সনাক্ত করতে একটি নাম ব্যবহৃত হয়।(ডোমে ব্যবহারের জন্য: document.forms.name)
novalidate ব্রাউজার ফর্মের বৈধতা বা validate যাচাই করবে না তা ডিফাইন করে।
target action এট্রিবিউটের মাধ্যমে তথ্য প্রক্রিয়া করার জন্য সার্ভার ফাইলটি ডিফাইন করে। স্বয়ংক্রিয় মান হল_self.

এইচটিএমএল <form> ট্যাগ সম্পর্কে জানতে W3C এর 4.3.10.1 The form element ওয়েব পেজটি ব্রাউজ করুন।