HTML TUTORIAL IN BANGLA PART-6 :HTML Form

html এ Form কি?

সাইটের ব্যবহারকারীদের থেকে সরাসরি তথ্য নেয়ার যে মাধ্যম সেটাকে বলা হয় form। বিশেষ করে ডাইনামিক এবং ডাটাবেজ নির্ভর ওয়েব সাইটের লগ ইন সিস্টেম, ভোটিং সিস্টেম, কন্টাক্ট ফর্ম সহ ব্যবহারকারীর তথ্য সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়ে থাকে।

Form ট্যাগ দিয়ে user/visitor দের information collect করার পর আপনাকে Database এ backend script অর্থাৎ ASP, PHP or python ইত্যাদি দিয়ে process করে সংরক্ষন করতে পারবেন।

HTML এ <form>—</form> এই ট্যাগ এর মাধ্যমে code করতে হয়। Information process করতে বিভিন্ন Tags & Attributes ব্যবহার করতে হয়। চলুন দেখা যাক-

Form Attributes

form তৈরী করার জন্য ব্যবহৃত <form> tag এ বহুল বেবহত Attributes গুলো হল-

• Action এই attribute এর মাধ্যমে backend script এ data pass করে।

<form action="/process.php">
 
</form>

• Note:এখানে action attribute দিয়ে data গুলো কে Server এ process.php এর মাধ্যমে pass করা হয়।
• Method এই attribute এর মাধ্যমে data কে সার্ভার এ কোন method এ পাস করা হবে সেটা নির্ধারণ করা হয়, যেটা সাধারনত get এবং post method এর মাধ্যমে হয়।
  
  

GET এবং POST এর মধ্যে পার্থক্য কি?

GET এবং POST এর মধ্যে অনেক গুলো পার্থক্য বিদ্যমান , নিচের Table এ সবগুলো পার্থক্য আলোচনা করা হয়েছে :

GET Method	POST Method
GET Method এর মাধ্যমে পাঠানো data ব্রাউজারে Cache করা যায়।	POST Method এর মাধ্যমে পাঠানো data ব্রাউজারে Cache করা যায় না ।
GET Method এর মাধ্যমে পাঠানো data ব্রাউজারের history তে থাকে।	POST Method এর মাধ্যমে পাঠানো data ব্রাউজারের history তে থাকে না ।
GET Method এর মাধ্যমে পাঠানো data বুকমার্ক করা যায়।	POST Method এর মাধ্যমে পাঠানো data বুকমার্ক করা যায় না ।
GET Method এর মাধ্যমে পাঠানো data ব্রাউজারের URL এ দেখা যায়। সুতরাং যেকোনো sensetive বা গোপন তথ্য GET Method এর মাধ্যমে না পাঠানো উচিত।	POST Method এর মাধ্যমে পাঠানো data ব্রাউজারের URL এ দেখা যায় না । সুতরাং যেকোনো sensetive বা গোপন তথ্য POST Method এর মাধ্যমে পাঠানো যেতে পারে ।
GET Method এর মাধ্যমে বেশি ডাটা পাঠানো যায়না।	POST Method এর মাধ্যমে যত ইচ্ছা ডাটা পাঠানো যায়।
GET Method তুলনা মূলক POST Method থেকে দ্রুত গতিতে data পাঠাতে পারে।	POST Method তুলনা মূলক GET Method থেকে slow হয় ।
GET Method এর মাধ্যমে সার্ভার এ File Upload করা যায়না।	POST Method এর মাধ্যমে সার্ভার এ File Upload করা যায়।

<form action="/process.php" method="GET">
 
</form>

• Target এই attribute এর কাজ হল database এ pass হওয়া result টি new tab (window), frame অথবা current window তে show সেটাকে specify করা। এর value গুলো হল _self, _blank, _top এবং _parent

এদের মধ্যে _selfএর কাজ হচ্ছে current window তে result দেখাবে। Default ভাবেই _self valueটি থাকে, অর্থাৎ _self ব্যাবহার না করলেও এটি default ভাবে result কে current window তে show করবে। আর _blank এর কাজ হচ্ছে new window তে result দেখাবে। অর্থাৎ এই value ব্যাবহার করলে browser এর new tab এ result show করবে। এছাড়াও _top ও _parent value গুলো ব্যাবহার করতে পারেন, যদিও এগুলার ব্যাবহার খুব একটা হয় না।

<form action="/process.php" method="GET" target="_blank">
 
</form>

• Enctype এই attribute টি data কে কিভাবেserver এ submit/পাঠানোর পূর্বে encode করে সেটাই নির্ধারণ করে। এটার সম্ভাব্য value গুলো হল-

1. application/x-www-form-urlencoded যা সাধারণত simple form গুলোতে ব্যাবহার হয়ে থাকে। যেটা default ভাবেই encoded থাকে।
2. mutlipart/form-data এই value data গুলো কে encode করে binary আকারে upload করে। যা সাধারণত image, word file ইত্যাদিতে বেবহত হয়।

<form action="/process.php" method="GET" target="_blank" enctype="mutlipart/form-data">
 
</form>

Form Controls

Visitor দের Data collect করার জন্য কিছু form control আছে, যেখানে input type পরিবর্তন এর মাধ্যমে কি কি ধরনের data কিভাবে collect করবেন সেটা নির্ধারণ করতে পারবেন। চলুন দেখা যাক-

1. Text Input Controls
2. Checkboxes Controls
3. Radio Box Controls
4. Select Box Controls
5. File Select boxes
6. Hidden Controls
7. Clickable Buttons
8. Submit and Reset Button

Text Input Controls সাধারণত তিন ধরনের হয়ে থাকে যা আপনি HTML FORM এ ব্যাবহার করতে পারবেন।

1. Single-line text input controls
2. Password input controls
3. Multiple-Line Text Input Controls

Single-line text input controls

এই Control টি user থেকে শুধু মাত্র এক লাইনে input নেওয়ার জন্য ব্যবহৃত হয়। যেমন, সার্চ বাক্স, নাম ইত্যাদি। আর এটি তৈরী করতে হয় HTML এর <input> tag ব্যবহার করার মাধ্যমে। চলুন একটা উদাহরণ দেখা যাক:

<!DOCTYPE html>
<html>
 
   <head>
      <title>Text Input Control</title>
   </head>
     
   <body>
       
 
 
<form >
         First name: <input type = "text" name = "first_name" />
          
         Last name: <input type = "text" name = "last_name" />
      </form>
 
 
 
   </body>
     
</html>

Output

First name: Last name:

Single-line text input controls এর attributes কি কি?

নিম্নের attribute গুলো Single-line text input controls ব্যবহৃত হয়।

Sr.No	attribute এর নাম এবং তার ব্যবহার
১	type কি টাইপের input control সেটি নির্ধারণ করার জন্য ব্যবহৃত হয়। সাধারণত এটার value হিসেবে text</ b> সেট করা হয় ।
২	name Input Control এ দেওয়া value টি সার্ভার এ কি নামে যাবে, বা সার্ভার থেকে কি নামে গ্রহণ হবে সেটা নির্ধারণের জন্য ব্যবহৃত হয়।
৩	value সার্ভার এ কোনো initial বা default value পাঠানোর জন্য ব্যবহৃত হয়।
৪	size characters এর ভিত্তিতে input control এর size নির্ধারণের জন্য ব্যবহৃত হয়।
৫	maxlength Text Controle এ সর্বোচ্চ কতগুলো chracter ইনপুট দিতে পারবে, তা নির্ধারণের জন্য ব্যবহৃত হয়।

Note: এ ছাড়াও HTML 5 এ আরো অনেক গুলো single Line input ট্যাগ যেমন : color, date, datetime-local, email, month, number, range, search, tel, time, url, week ইত্যাদি এসেছে। নিচের উদাহরণ দেখুন:

<!DOCTYPE html>
<html>
 
   <head>
      <title>HTML 5 Single Line Input Controls</title>
   </head>
     
   <body>
      <form >
          Input Type color:  <input type="color" name="favcolor"><br>
          Input Type Date:  <input type="date" name="bday"><br>
          Input Type (date and time):  <input type="datetime-local" name="bdaytime"><br>
          Input Type E-mail:   <input type="email" name="email"><br>
          Input Type Month: <input type="month" name="bdaymonth"><br>
          Input Type Number: <input type="number" name="quantity" min="1" max="5"><br>
          Input Type Range: <input type="range" name="points" min="0" max="10"><br>
          Input Type Search: <input type="search" name="googlesearch"><br>
          Input Type Telephone: <input type="tel" name="usrtel"><br>
          Input Type Time:  <input type="time" name="usr_time"><br>
          Input Type URL: <input type="url" name="homepage"><br>
          Input Type Week:  <input type="week" name="week_year">
      </form>
   </body>
     
</html>

Output

Input Type color:
Input Type Date:
Input Type (date and time):
Input Type E-mail:
Input Type Month:
Input Type Number:
Input Type Range:
Input Type Search:
Input Type Telephone:
Input Type Time:
Input Type URL:
Input Type Week:

Password input controls

এইটাও একটা single-line text input , এটা User দের Password collect করার জন্য ব্যবহৃত হয়, এই input control টি ব্যবহারের ফলে user দের input করা character গুলা mask হয়ে যায় অর্থাৎ character/অক্ষর গুলি dot এর মত আসে যা আমরা সাধারণত password বক্স এ দেখতে পাই। এটি <input type=”password”>দিয়ে ডিফাইন করা হয়। চলুন একটা উদাহরণ দেখা যাক:

<!DOCTYPE html>
<html>
 
   <head>
      <title>Password Input Control</title>
   </head>
     
   <body>
       
 
<form >
         Password: <input type = "password" name = "password" />
      </form>
 
 
   </body>
     
</html>

Output

Password:

Password input controls এর attributes কি কি?

নিম্নের attribute গুলো password input controls ব্যবহৃত হয়।

Sr.No	attribute এর নাম এবং তার ব্যবহার
১	type কি টাইপের input control সেটি নির্ধারণ করার জন্য ব্যবহৃত হয়। সাধারণত এটার value হিসেবে password</ b> সেট করা হয় ।
২	name Password Input Control এ দেওয়া value টি সার্ভার এ কি নামে যাবে, বা সার্ভার থেকে কি নামে গ্রহণ হবে সেটা নির্ধারণের জন্য ব্যবহৃত হয়।
৩	value সার্ভার এ কোনো initial বা default value পাঠানোর জন্য ব্যবহৃত হয়।
৪	size characters এর ভিত্তিতে input control এর size নির্ধারণের জন্য ব্যবহৃত হয়।
৫	maxlength Password Input Controle এ সর্বোচ্চ কতগুলো chracter ইনপুট দিতে পারবে, তা নির্ধারণের জন্য ব্যবহৃত হয়।

Multiple-Line Text Input Controls

একাধিক লাইনের input প্রধানের জন্য এই input method টি ব্যবহৃত হয়। এটি <textarea></textarea>দিয়ে define করা হয়। চলুন একটা উদাহরণ দিয়ে দেখা যাক :

<!DOCTYPE html>
<html>
 
   <head>
      <title>Multiple-Line Input Control</title>
   </head>
     
   <body>
       
 
<form>
         Description : 
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
 
 
   </body>
     
</html>

Output

Description : Enter description here…

Multiple-Line Text Input Controls এর attributes কি কি?

নিম্নের attribute গুলো Multiple-Line Text Input Controls ব্যবহৃত হয়।

Sr.No	attribute এর নাম এবং তার ব্যবহার
১	name Input Control এ দেওয়া value টি সার্ভার এ কি নামে যাবে, বা সার্ভার থেকে কি নামে গ্রহণ হবে সেটা নির্ধারণের জন্য ব্যবহৃত হয়।
২	rows input field টি কত row এর সমান height হবে তা নির্ধারণ করে।
৩	cols input field টি কত colum এর সমান width হবে তা নির্ধারণ করে।

Checkbox Control

অনেকগুলি option থেকে একের অধিক option select করার জন্য এটি ব্যবহার হয়ে থাকে। চলুন একটা উদাহরণ দিয়ে দেখা যাক :

<!DOCTYPE html>
<html>
   <head>
      <title>Checkbox Control</title>
   </head>
     
   <body>
       
 
<form>
         <input type = "checkbox" name = "bangla" value = "on"> Bangla
         <input type = "checkbox" name = "english" value = "on"> English
      </form>
 
 
   </body>
     
</html>

Output

Bangla English

Checkbox Control এর attributes কি কি?

নিম্নের attribute গুলো Checkbox Control এ ব্যবহৃত হয়।

Sr.No	attribute এর নাম এবং তার ব্যবহার
১	type কি টাইপের input control সেটি নির্ধারণ করার জন্য ব্যবহৃত হয়। সাধারণত এটার value হিসেবে checkbox</ b> সেট করা হয় ।
২	name checkbox Input Control এ দেওয়া value টি সার্ভার এ কি নামে যাবে, বা সার্ভার থেকে কি নামে গ্রহণ হবে সেটা নির্ধারণের জন্য ব্যবহৃত হয়।
৩	value সার্ভার এ কোনো initial বা default value পাঠানোর জন্য ব্যবহৃত হয়।
৪	checked বাই ডিফল্ট input control কে checked রাখার জন্য ব্যবহৃত হয়।

Radio Button Control

অনেকগুলি option থেকে শুধু মাত্র একটি option সিলেক্ট করতে বাধ্য করার জন্য এটি ব্যবহার হয়ে থাকে। চলুন একটা উদাহরণ দিয়ে দেখা যাক :

<!DOCTYPE html>
<html>
 
   <head>
      <title>Radio Box Control</title>
   </head>
 
   <body>
       
 
<form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
 
 
   </body>
</html>

Output

Maths Physics

radio Control এর attributes কি কি?

নিম্নের attribute গুলো radio Control এ ব্যবহৃত হয়।

Sr.No	attribute এর নাম এবং তার ব্যবহার
১	type কি টাইপের input control সেটি নির্ধারণ করার জন্য ব্যবহৃত হয়। সাধারণত এটার value হিসেবে radio</ b> সেট করা হয় ।
২	name radio Input Control এ দেওয়া value টি সার্ভার এ কি নামে যাবে, বা সার্ভার থেকে কি নামে গ্রহণ হবে সেটা নির্ধারণের জন্য ব্যবহৃত হয়।
৩	value সার্ভার এ কোনো initial বা default value পাঠানোর জন্য ব্যবহৃত হয়।
৪	checked বাই ডিফল্ট radio input control কে checked রাখার জন্য ব্যবহৃত হয়।

Select Box Control

Select Box এটাকে আবার ড্রপডাউন box ও বলা হয়ে থাকে , এটি আপনাকে অনেকগুলো option ড্রপডাউন লিস্ট আকারে প্রকাশ করে , আর সেই ড্রপডাউন লিস্ট থেকে আপনি এক বা একাধিক লিস্ট সিলেক্ট করতে পারবেন। চলুন একটা উদাহরণ দিয়ে দেখা যাক :

<!DOCTYPE html>
<html>
 
   <head>
      <title>Select Box Control</title>
   </head>
     
   <body>
       
 
<form>
         <select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
<option value="Bangla">Bangla</option>
         </select>
      </form>
 
 
   </body>
     
</html>

Output

Maths Physics Bangla

Note: তবে আপনি চাইলে Select এর Option গুলোকে <optgroup> </optgroup> tag এর মাধ্যমে group wise সাজাতে পারেন। নিচের উদাহরণ টি দেখুন:

Volvo Saab Mercedes Audi

Input List এবং datalist Control

Input field এ সার্চিং সুবিধা দেওয়ার জন্য এটি ব্যবহৃত হয়। এখানে আপনি একই সাথে দুটি সুবিধা পাবেন। প্রথমতঃ dropdown list এবং দ্বিতীয়ত real time সার্চিং সুবিধা। নিচের উদাহরণ টি দেখুন:

<!DOCTYPE html>
<html>
 
   <head>
      <title>HTML 5 input list and datalist</title>
   </head>
     
   <body>
      <form>
          <input list="browsers" name="browser">
            <datalist id="browsers">
               <option value="Internet Explorer">
               <option value="Firefox">
               <option value="Chrome">
               <option value="Opera">
               <option value="Safari">
            </datalist>
         <input type="submit">
      </form>
   </body>
     
</html>

Output

Select Control এর attributes কি কি?

নিম্নের attribute গুলো Select Control এ ব্যবহৃত হয়।

Sr.No	attribute এর নাম এবং তার ব্যবহার
১	name Select Input Control এ দেওয়া value টি সার্ভার এ কি নামে যাবে, বা সার্ভার থেকে কি নামে গ্রহণ হবে সেটা নির্ধারণের জন্য ব্যবহৃত হয়।
২	value সার্ভার এ value পাঠানোর জন্য ব্যবহৃত হয়।
৩	multiple একাধিক অপসন সিলেক্ট করার সুযোগ প্রধানের জন্য ব্যবহৃত হয়।
৪	Selected এক বা একাধিক অপসন কে বাই ডিফল্ট সিলেক্ট রাখার সুবিধা প্রধানের জন্য ব্যবহৃত হয়।

File Upload Box Controls

website এ user কে যেকোনো ধরণের file upload করার option allow করার জন্য এটি ব্যবহৃত হয়। এটাকে <input type=”file”>দিয়ে define করা হয়। চলুন একটা উদাহরণ দিয়ে বুঝে নেয়া যাক :

<!DOCTYPE html>
<html>
 
   <head>
      <title>File Upload Box</title>
   </head>
 
   <body>
       
 
<form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
 
 
   </body>
     
</html>

Output

File Upload Control এর attributes কি কি?

নিম্নের attribute গুলো File Upload Control এ ব্যবহৃত হয়।

Sr.No	attribute এর নাম এবং তার ব্যবহার
১	type কি টাইপের input control সেটি নির্ধারণ করার জন্য ব্যবহৃত হয়। সাধারণত এটার value হিসেবে file</ b> সেট করা হয় ।
২	name File Upload Control এ দেওয়া File টি সার্ভার এ কি নামে যাবে, বা সার্ভার থেকে কি নামে গ্রহণ হবে সেটা নির্ধারণের জন্য ব্যবহৃত হয়।
৩	accept কি ধরণের বা ফরম্যাটের ফাইল আপলোড allow করবে তা নির্ধারণ করে।

Button Controls

ওয়েবসাইট থেকে সার্ভা রিসেট করা , এবং html এর বিভিন্ন ক্লিকেবলে অ্যাকশন করার জন্য button tag ব্যবহৃত হয়। আর এই ট্যাগ টি দুইভাবেই তৈরী করা যায়। একটি হচ্ছে <input type=”button” /> আরেকটি হচ্ছে <button type=”button”> </button> আর এই type এর value যদি আপনি submit দেন তাহলে submit এর কাজ করবে। এবং value যদি reset দেন তাহলে form এর reset এর কাজ করবে। এ ছাড়া আপনি button type হিসেবে image ও ব্যবহার করতে পারেন, তবে এক্ষেত্রে আপনাকে src এর value হিসেবে image এর সোর্স বলতে হবে। চলুন সব গুলো বাটন এর একটা করে উদাহরণ দেখে নেয়া যাক :

<!DOCTYPE html>
<html>
 
   <head>
      <title>File Upload Box</title>
   </head>
     
   <body>
       
 
<form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset" value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "http://axilthemes.com/themes/papr/wp-content/themes/papr/assets/img/logo-black.svg" />
      </form>
 
 
   </body>
     
</html>

Output

Hidden Form Controls

ফর্ম থেকে কোনো ডাটা Hidden অবস্থায় Server পাঠানোর জন্য Hidden Form Control ব্যবহৃত হয়। HTML Hidden Form Control এর ডাটা browser এ দৃশ্যমান হয়না। চলুন একটা উদাহরণ দিয়ে দেখা যাক:

<!DOCTYPE html>
<html>
 
   <head>
      <title>File Upload Box</title>
   </head>
 
   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
     
</html>

Output

This is page 10

fieldset এবং legend

Form এর Element গুলোকে group করার কাজে fieldset tag টি ব্যবহৃত হয় , আর fieldset এর মধ্যে caption দেওয়ার জন্য legend ব্যবহৃত হয়। চলুন একটা উদাহরণ দিয়ে দেখা যাক:

<!DOCTYPE html>
<html>
 
   <head>
      <title>HTML Fieldset and Legend</title>
   </head>
     
   <body>
      <form>
         <fieldset>
            <legend>Personal Information:</legend>
             Name: <input type="text"><br>
             Email: <input type="text"><br>
             Date of birth: <input type="date">
         </fieldset>
      </form>
   </body>
     
</html>

Output

Personal Information:

Name:
Email:
Date of birth:

Output Input Control

দুটি input field এর calculation output দেখানোর জন্য <output> tag টি ব্যবহৃত হয়। তবে এ ক্ষেত্রে আপনাকে <form > tag এর মধ্যে একটা ছোট javascript code লিখতে হবে। চলুন উদাহরণ দিয়ে দেখা যাক:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Fieldset and Legend</title>
   </head>
   <body>
      <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
         <input type="range" id="a" value="50">100
         +<input type="number" id="b" value="50">
         =<output name="x" for="a b"></output>
      </form>
 
 
      </form>
   </body>
</html>

Output

0 100 + =