এইচটিএমএল ফর্ম - 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. নিচে এগুলোর বর্ণনা দেখুন।

Type - এই এট্রিবিউটের মাধ্যমে ফিল্ডে টেক্সট লেখা যাবে। এই এট্রিবিউটের মান বা value সবসময় text দিতে হবে। এটি লেখার নিয়ম টি হল - type-=”text”

Name - নাম এট্রিবিউটের সাহায্যে কোন টেক্সট ফিল্ডকে নির্দিষ্ট করে নাম দেয়া হয়। অর্থাৎ কোন টেক্সট ফিল্ডকে নির্দিষ্টভাবে চিহ্নিত করা হয়। পিএইচপি দিয়ে ফর্ম প্রসেস করার সময় এই এট্রিবিউটের ভ্যালুর নাম ধরেই ফর্ম কল করা হয়। এই এট্রিবিউটের লেখার নিয়মটি হল - name=”name_of_fild”

Size – টেক্সট ফিল্ডের অক্ষরের সংখ্যা নির্দিষ্ট করে দেয়ার জন্য এই এট্রিবিউট ব্যবহার করা হয়। এই এট্রিবিউট লেখার নিয়মটি হল - size=”neumerical_valu” উদাহরণসরুপ বলা যায় আপনি যদি size এট্রিবিউটের মান বা ভ্যালু ২০ দেন তবে এর ফলে আপনি ২০ অক্ষরের প্রস্বস্থ টেক্সট ফিল্ড পাবেন।

Maxlength – ইউসার টেক্সট ফিল্ডে সর্বোচ্চ কতগুলো টেক্সট ইনপুট করতে পারবে তা নির্দিষ্ট করে দেয়ার জন্য maxlength এট্রিবিউট ব্যবহার করা হয়। maxlength এট্রিবিউট ব্যবহার করার ফলে টেক্সট ফিল্ডে ইউজার ইচ্ছে মত টেক্সট লিখতে পারবে না।

maxlength এট্রিবিউট নির্দিষ্ট করা ছাড়া ইউজার তার ইচ্ছামত টেক্সট ইনপুট করতে পারে এমনকি আপনি যদি সাইজ নির্দিষ্ট করে দেন তারপরেও। অর্থাৎ টেক্সট ফিল্ডে ক্যারেক্টার ইনপুট সীমাবদ্ধ রাখার জন্যই maxlength এট্রিবিউট ব্যবহার করা হয়। size এবং maxlength এট্রিবিউটের value অবশ্যই একই হতে হবে। maxlength এট্রিবিউট লেখার নিয়মটি হল - maxlength=”neumerical_value”

উধাহরনসরুপ আপনি যদি ভ্যালু ২০ দেন তবে ইউসার টেক্সট ফিল্ডে ২০ টি ক্যারেক্টারের বেশি লিখতে পারবে না।

Value – টেক্সট ফিল্ড সম্পর্কে ইউসারকে কোন তথ্য সরবরাহ করার জন্য এই এট্রিবিউট ব্যবহার করা হয়। অর্থাৎ টেক্সট ফিল্ডে একটি ডিফল্ট তথ্য রাখার জন্য এই এট্রিবিউট ব্যবহার করা হয়। এই মান বা value পরিবর্তনযোগ্য। এই এট্রিবিউট লেখার নিয়মটি হল - value=”difolt_text”

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

উদাহরণ

<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"> বাটন ডিফাইন করতে হয়। যখন সাবমিট বাটনে ক্লিক করা হয়, তখন সার্ভার ফর্মের ইনপুট তথ্য গুলোকে "action_page.php" ফাইলের মাধ্যমে প্রক্রিয়াজাত করে এবং ব্রাউজারে ফলাফল ফেরত পাঠায়।

উদাহরণ

<form action="/action_page.php">
First name:<br />
<input type="text" name="firstname" value="Bugs"><br />
Last name:<br />
<input type="text" name="lastname" value="Bunny"><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 মেথড ব্যবহার করা যায়। তবে ফর্মের তথ্য যদি স্পর্শকাতর, যেমন -ইউজারের নাম অথবা পাসওয়ার্ড হয় সেক্ষেত্রে get মেথড ব্যবহার করা উচিত নয়। কারণ যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান হয় তখন প্রেরিত তথ্যটি নিচের মত ওয়েব পেজের এড্রেসের সাথে দেখা যায়।

উদাহরণ

/action_page.php?firstname=Bugs&lastname=Bunny


নোট -

একটি URL এর দৈর্ঘ্য সীমিত, 3000 ক্যারেক্টার মাত্র,
স্পর্শকাতর তথ্যের জন্য GET ব্যবহার করা উচিৎ নয়, কারন এটি URL এ প্রদর্শিত হয়,
ইউজার যেখানে সাবমিশনের ফল বুকমার্ক করে রাখতে চায়, সেক্ষেত্রে ব্যবহার করা উত্তম,
GET মেথড স্পর্শকাতর নয় এমন তথ্যের জন্য ব্যবহার করা ভাল, যেমন গুগল এ ক্যুয়েরী স্ট্রিং।


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

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

উদাহরণ

http://action_page.php


নোট -

POST মেথডের আকারের নির্দিষ্ট কোন সীমাবদ্ধতা নেই, তাই কোন বড় আকারের তথ্য পাঠানো যায়।
POST ব্যবহার করে ফর্ম সাবমিশন করা হলে সেটা বুকমার্ক করা যায় না।


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

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

<legend> এলিমেন্ট <fieldset> এলিমেন্টের ক্যাপশন ডিফাইন করে।

উদাহরণ

<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br />
<input type="text" name="firstname" value="Bugs"><br />
Last name:<br />
<input type="text" name="lastname" value="Bunny"><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.







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.