X

X

X

HTML -এ ফরম এর ব্যবহার


HTML Form এর উদাহরণ

First name:

Last name:

নিজে নিজে চেষ্টা করুন »


<form> ইলামেন্ট

HTML <form> ইলামেন্ট ইউজারের তথ্য সংগ্রহ করার কাজে ব্যবহৃত হয়:

<form>
form elements
</form>

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


<input> Element

<input> element হচ্ছে সবচেয়ে বেশি গুরুত্বপূর্ণ ফরম ইলামেন্ট।

<input> element কে type attribute এর উপর ভিত্তি করে বিভিন্নভাবে উপস্থাপণ করা যায়।

নিচে কিছু উদাহরণ দেওয়া হলো:

ধরণ বর্ণনা
<input type=”text”> ইনপুট টেক্সট নেওয়ার জন্য ব্যবহার করা হয়।
<input type=”radio”> রেডিও বাটন তৈরি করার জন্য ব্যবহৃত হয়।
<input type=”submit”> ফরম সাবমিট করার জন্য সাবমিট বাটন তৈরিতে ব্যবহৃত হয়।

Text ইনপুট

একলাইনে  text input নেওয়ার জন্য <input type=”text”> ব্যবহার করা হয়:

Code Example

<form>
  First name:<br>
  <input type="text" name="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of a text input field is 20 characters.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের ফরমটি ব্রাউজারে দেখতে নিচের মত লাগবে:
First name:

Last name:

বি:দ্র: form ইলামেন্ট দৃশ্যমান নয়, বরং এটি এর child element গুলোকে প্রদর্শণ করে। লক্ষ্য করবেন টেক্সট ইলামেন্ট এর ডিফল্ট প্রস্থ ২০ ক্যারেক্টার পর্যন্ত দৃশ্যমান। তবে সিএসএস ব্যবহার করে এর দৈর্ঘ্য ও প্রস্থের পরিবর্তন করা যায়।


Radio বাটন ইনপুট

<input type=”radio”> দ্বারা radio button তৈরি করা হয়। এটি দ্বারা অনেকগুলো মান থেকে একটিকে সিলেক্ট করার জন্য ব্যবহৃত হয়। যেমন, মানুষের লিঙ্গ সিলেক্ট করার জন্য পুরুষ, নারী, অন্যান্য এর মধ্য থেকে যেকোনো একটি সিলেক্ট করা হয়। এটি রেডিও বাটন ব্যবহার করে HTML Form এ মান নেওয়া হয়।

নিচের উদাহরণটি দেখুন:

Code Example

<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> 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের ফরমটি ব্রাউজারে দেখতে নিচের মত লাগবে:

 পুরুষ
 মহিলা
 অন্যান্য


Submit বাটন

<input type=”submit”> দ্বারা ফরম সাবমিট বাটন তৈরি করা হয়। অর্থাৎ, যখন এই বাটনে ক্লিক করা হবে কাংঙ্খিত ফরমটি সাবমিট হবে। সাবমিটকৃত ফরমটি প্রসেস করার জন্য সার্ভারে একটি সার্ভার স্ক্রিপ্ট ব্যবহার করা হয়। এটি PHP, JavaScript (nodejs) , asp, java ইত্যাদি যেকোনো ভাষা দিয়ে করা হয়।

সার্ভারে ফরম প্রসেস করার জন্য কোন স্ক্রিপ্ট ব্যবহার করা হবে তা form-এর action attribute দিয়ে করা হয়।

Code Example

<form action="http://www.seicoder.com/resources/html/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> 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের কোডটি ব্রাউজারে দেখতে নিচের মত লাগবে:

First name:

Last name:


Action Attribute

action attribute দিয়ে বর্ণনা করা হয় ফরমটি কোন স্প্রিপ্ট এ সাবমিট হবে। সাধারণত যখন সাবমিট বাটনে ক্লিক করা হয় তখন ফরম ডাটা action attribute -এ ডিফাইন্ড স্ক্রিপ্ট এ সাবমিট হয়।

উপরের উদাহরণে ফরম ডাটাগুলো সার্ভারে অবস্থিত “/action_page.php” পেজ এ সাবমিট হয়েছে। এই পেজে একটি সার্ভার সাইড স্ক্রিপ্ট রয়েছে যেটি ফরম ডাটাগুলোকে প্রসেস করে।

<form action=”http://www.seicoder.com/resources/html/action_page.php“>

যদি action attribute উল্লেখ্য করা না হয়, তবে action এর মান হিসেবে কারেন্ট পেজ ডিফাইন্ড হবে।


Method Attribute

method attribute দ্বারা HTTP method (GET  অথবা POST) ডিফাইন করা হয়। অর্থাৎ, ডাটা কি হিসেবে সাবমিট হয় সেটি এটি দ্বারা বর্ণনা করা হয়:

<form action=”http://www.seicoder.com/resources/html/action_page.php” method=”get”>

or:

<form action=http://www.seicoder.com/resources/html/action_page.php” method=”post”>

কখন GET মেথড ব্যবহার করবেন?

ফরম মেথড ডিফল্ট অবস্থায় GET মেথডে সাবমিট হয়।

যখন GET মেথড দ্বারা ডাটা সাবমিট করা হয় তখন ডাটাগুলো লিংকে দেখা যায়।

http://www.seicoder.com/resources/html/action_page.php?firstname=Mickey&lastname=Mouse

বি:দ্র: যখন গুরুত্বপূর্ণ ডাটা সার্ভারে সাবমিট করা হয়, সেক্ষেত্রে GET মেথড ব্যবহার করা উচিৎ নয়। কেননা সব ডাটা ব্রাউজারের এড্রেসবারে দেখা যায়। আবার অনেকগুলো ডাটা পাঠানো যায় না।


কখন POST মেথড ব্যবহার করবেন?

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


Name Attribute

প্রত্যেক ইনপুট ইলামেন্টের name attribute থাকা বাধ্যতামূলক। কেননা ডাটাগুলো name => value জোড়ায় জোড়ায় সার্ভারে ডাটা পাঠায়। যদি কোনো কারণে name attribute ডিফাইন না করা হয়, তবে উক্ত ফরম ইলামেন্টের ডাটা সার্ভারে সেন্ড হবে না।

নিচের উদাহরণে শুধুমাত্র Last Name ডাটা সার্ভারে সেন্ড হবে। কেন , উপরে ব্যাখ্যা করা হয়েছে।


<fieldset> এর দ্বারা ফরম ডাটা গ্রুপিং করার নিয়ম

<fieldset> ইলামেন্ট দ্বারা ফরম ডাটা গ্রুপিং করা হয়।

 <legend> ইলামেন্টে দ্বারা <fieldset> ইলামেন্ট এর ক্যাপশন দেওয়া হয়।

Code Example

<form action="http://www.seicoder.com/resources/html/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>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের ফরমের আউটপুট নিচের মত দেখাবে।

Personal information:

First name:

Last name:



নিচে সকল <form> attribute এর বর্ণনা দেওয়া হলো:

Attribute বর্ণনা
accept-charset ফরম এর ক্যারেক্টার সেট বর্ণনা করে।
action কোথায় ফরম ডাটা সাবমিট করা হবে, তা এটি দ্বারা বর্ণনা করা হয়।
autocomplete ইনপুট ইলামেন্টের ডাটা স্বয়ংক্রিয়ভাবে সাজেশন দিবে কিনা তা এটি দ্বারা বর্ণনা করা হয়।
enctype সাবমিট ডাটার এনকোডিং বর্ণনা করে। (default: url-encoded).
method ফরম ডাটা কোন মেথডে সাবমিট হবে তা এটি দ্বারা বর্ণনা করা হয়। (default: GET).
name ফরমকে চিহ্নিত করার জন্য এটি ব্যবহার করা হয়। (DOM এ ব্যবহারের জন্য document.forms.name ব্যবহৃত হয়)
novalidate এটি দ্বারা ব্রাউজারকে নির্দেশনা দেওয়া হয় যাতে ফরম ডাটা ভ্যালিডেট না হয়।
target ডাটা সাবমিট কি একই পেজ থেকে হবে নাকি আলাদা পেজ থেকে হবে তা এটি দ্বারা বর্ণনা করা হয়। (default: _self).