ফর্ম



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

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


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


টেক্সট ফিল্ড তৈরি

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

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

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

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

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

Maxlength – ইউসার টেক্সট ফিল্ডে সর্বোচ্চ কতগুলো টেক্সট ইনপুট করতে পারবে তা নির্দিষ্ট করে দেয়ার জন্য maxlength attribute ব্যবহার করা হয়। maxlength এট্রিবিউট ব্যবহার করার ফলে টেক্সট ফিল্ডে ইউজার ইচ্ছে মত টেক্সট লিখতে পারবে না। maxlength attribute নির্দিষ্ট করা ছাড়া ইউজার তার ইচ্ছামত টেক্সট ইনপুট করতে পারে এমনকি আপনি যদি সাইজ নির্দিষ্ট করে দেন তারপরেও। অর্থাৎ টেক্সট ফিল্ডে ক্যারেক্টার ইনপুট সীমাবদ্ধ রাখার জন্যই 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>




পাসওয়ার্ড ফিল্ড

টেক্সট ফিল্ডের সমস্ত এট্রিবিউট পাসওয়ার্ড ফিল্ডের জন্য প্রযোজ্য। পাসওয়ার্ড ফিল্ডের ক্ষেত্রে শুধুমাত্র টাইপ ( type ) এট্রিবিউটের পরিবর্তন হবে, অন্য সব এট্রিবিউট টেক্সট ফিল্ডের মতই হবে। এখানে পাসওয়ার্ড ফিল্ডের টাইপ হবে পাসওয়ার্ড যেমন -
type=”passward”

নীচে একটি উদাহরন দেখুন -

উদাহরণ দেখুন

<form>
Password: <input type="password" name="pass" />
</form>




চেকবক্স

টিক চিহ্ন দিয়ে অপসন সিলেক্ট করার জন্য চেকবক্স তৈরি করা হয়। আপনি এখানে যে কোন একটি বা একাধিক বাটন সিলেক্ট করার ব্যাবস্থা করতে পারেন। চেকবক্সের জন্য আপনি যেসকল এট্রিবিউট ব্যবহার করতে পারেন তা হল type,name এবং value. নীচে এগুলোর বর্ণনা দেয়া হল -

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

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

Value – চেকবক্স এর মান বা value নির্ধারিত করার জন্য এই এট্রিবিউট ব্যবহার করা হয়। এই এট্রিবিউট লেখার নিয়মটি হল -
value=”difolt_text”

নীচে একটি উদাহরন দেখুন -

উদাহরণ দেখুন

<form>
<input type="checkbox" name="animal" value="Cat" /> Cat <br />
>input type="checkbox" name="animal" value="Dog" /> Dog
</form>




রেডিও বাটন

একাধিক অপশন থেকে যে কোন একটি মাত্র অপশন সিলেক্ট করার জন্য রেডিও বাটন তৈরি করা হয়। রেডিও বাটন তৈরি করার জন্য input ট্যাগের সাথে যেসকল এট্রিবিউট ব্যবহার করা যায় তা হল type, name এবং value. Checked এট্রিবিউট ব্যবহার করে আপনি আগে থেকেই অর্থাৎ ডিফল্ট মান হিসেবে একটি রেডিও বাটন সিলেক্ট করে রাখতে পারেন। এর মান বা value হল yes. এটি লেখার নিয়ম হল -
checked=”yes”
নীচে একটি উদাহরন দেয়া হল –

উদাহরণ দেখুন

<form>
<input type="radio" name="sex" value="male" /> Male <br />
<input type="radio" name="sex" value="female" /> Female
</form>




টেক্সট এরিয়া

ইউজার থেকে বড় কোন মন্তব্য বা কমেন্ট পাবার জন্য টেক্সট এরিয়া তৈরি করা হয়। টেক্সট এরিয়ার ভেতরে কোন কিছু লিখলে তা ওয়েব পেজের টেক্সট এরিয়াতে দেখা যায়। টেক্সট এরিয়ার ওপেনিং এবং ক্লোজিং ট্যাগ রয়েছে। rows এবং cols এট্রিবিউট ব্যবহার করে টেক্সট এরিয়ার সাইজ নির্ধারণ করা হয়। rows এবং cols এর মান বা value হিসেবে গানিতিক সংখ্যা বা newmerical value দেয়া হয়। এই এট্রিবিউট দুটি লেখার নিয়ম হল -
rows=”5” এবং cols=”8”
নীচে একটি উদাহরন দেখুন -

উদাহরণ দেখুন

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









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

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