এইচটিএমএল-৯ [Form, Text Field, Drop down list]

Form

সাইটের ভিজিটরদের তথ্য নেয়ার জন্য ফর্ম ব্যবহার হয়। এজন্য এইচটিএমএল এ <form></form> এলিমেন্ট আছে এবং এর ভিতর নানান ধরনের ফর্ম সংক্রান্ত এলিমেন্ট ব্যবহার করে চমৎকার ফর্ম বানানো যায়। তবে ফর্ম পুরন করে ইউজার যখন সাবমিট করবে তখন সার্ভার সাইড ল্যাংগুয়েজ যেমন পিএইচপি, পাইথন, এএসপি ইত্যাদি ব্যবহার করে প্রসেস করতে হয় এমনকি প্রসেসের পর ডেটাবেস ব্যবহার করে সেভ করেও রাখা যায়। যাইহোক এইচটিএমএল form এলিমেন্ট দিয়ে শুধু ফর্মটি তৈরী করা হয়। একটা সাধারন ফর্ম

<form action="processor.php" method="post">
<input type="text" name="first_name" />
<input type="text" name="last_name" />
<input type="submit" name="submit" value="Submit" />
</form>

প্রয়োগ দেখুন

form এর একটা আবশ্যিক এট্রিবিউট হচ্ছে action. এখানে ফর্মটি সাবমিট করলে কোন ফাইলে ফর্মের ডেটাগুলি প্রসেস করতে নিয়ে যাবে সেই ফাইলটিতে নিয়ে যায়।

আর method এট্রিবিউট দিয়ে কোন পদ্ধতিতে ডেটা যাবে সেটা বলে দেয়া হয় যেমন আমি দিয়েছি post. post মেথডে ডেটা পাঠালে ডেটা লুকানো থাকে তবে যেখানে ডেটা লুকানোর দরকার নেই সেখানে get নামের অপর মেথডটি ব্যবহার করা হয় (method="get")। যেমন Google search এ get method ব্যবহার করেছে কারন এখানে ডেটা লুকানোর পরিবর্তে দেখানোই উপকার। google এ কোন কিছু সার্চ দিলেই ব্রাউজারের address বারে দেখবেন যেটা লিখে সার্চ দিয়েছেন সেগুলি দেখাচ্ছে। যাইহোক এগুলি পিএইচপিতে বিস্তারিত আলোচনা আছে।

এরপর input এলিমেন্ট দিয়ে দুটি text ফিল্ড তৈরী করেছি যেখানে ইউজার তার নাম লিখতে পারবে। input ট্যাগের type এট্রিবিউটটি দিয়ে ঠিক করা যায় ফিল্ডটি কোন ধরনের ডেটা নিবে।

type="text" দিলে টেক্সট ফিল্ড হবে এবং ব্রাউজারে টেক্সট লেখার মত একটি ফিল্ড দেখাবে। আবার type="submit" দিয়ে উপরে দেখুন সাবমিট বাটন বানিয়েছি।

input এর name এট্রিবিউট দিয়ে ফিল্ডটির নাম দেয়া যায়। প্রত্যেকটি ফিল্ডের name এট্রিবিউটের মান ভিন্ন দিতে হয় কেননা এই মান ধরেই পিএইচপি ডেটা প্রসেস করে তাই একই নামের দুটি ফিল্ড এর ডেটা দুরকম ভাববে।

সাবমিট বাটনের জন্য value এট্রিবিউট দিয়ে যে মানটি দিবেন সেটা বাটনের উপর লেখা হিসেবে দেখাবে।

** id, style, class ইত্যাদি যেকোন গ্লোবাল এট্রিবিউট form এলিমেন্টে ব্যবহার করতে পারেন।

চেকবক্স

=================

ইউজারকে চেকবক্স এবং রেডিও বাটন দিয়ে টিকমার্ক সংক্রান্ত ফর্ম ফিল্ড তৈরী করে দিতে পারেন যেমন ইউজার কোন কোন বিষয় পড়েছে সেটার জন্য ফর্ম দিতে চাই তাহলে

<input type="checkbox" name="prob" value="1">probability
<input type="checkbox" name="fotran" value="1">fortran
<input type="checkbox" name="o_stat" value="1">order statistics

প্রদর্শন

probability fortran order statistics

ফর্ম সংক্রান্ত যেকোন এলিমেন্ট সব <form></form> এর ভিতরে থাকতে হবে। উপরের উদাহরনের সময় বাচানোর জন্য যেভাবে দিয়েছি এভাবে ফর্ম তৈরী করলে ব্রাউজারে দেখাবে ঠিকই কিন্তু কাজ করবেনা।

Text Field

টেক্সট ফিল্ড একটা ফর্ম এলিমেন্টে তাই এখানে যত উদাহরন দেব সব <form></form> এর ভিতর রাখতে হবে।

টেক্সক্ট ফিল্ড আগের টিউোটোরিয়ালটিতে দেখালাম। খুব সহজ

1.<input type="text" name="address"/>

প্রদর্শন:

type এবং name এট্রিবিউট নিয়ে আগের টিউটোরিয়ালেই আছে। এখানে আরও নতুন কিছু গুরত্বপূর্ন এট্রিবিউট নিয়ে আলোচনা করি।

** পাসওয়ার্ড ফিল্ড তৈরীতে শুধু type="password" দিলেই হয়ে গেল।

maxlength এট্রিবিউট দিয়ে ফিল্ডে সর্বোচ্চ কতটি অক্ষর লিখতে পারবে সেটা নির্দিষ্ট করে দেয়া যায়। যেমন:

1.<input type="text" name="address" maxlength="50"/>

প্রদর্শন

৫০টির বেশি character টাইপ করে দেখুন পারবেন না।

value এবং size

value এর মান যেটা দিবেন সেটা ফিল্ডের ভিতর দেখাবে। এডিট ফর্ম তৈরীর জন্য এটা লাগে। আর size দিয়ে দৈর্ঘ্য কত হবে সেটা ঠিক করা যায়। যেমন

1.<input type="text" name="address" maxlength="50" value="Mirpur, Dhaka" size="30"/>

প্রদর্শন

এইচটিএমএল ৫ এ placeholder নামে একটা নতুন এট্রিবিউট এসছে যেটা দিয়ে ফিল্ডে কি ধরনের তথ্য দিতে হবে এ সংক্রান্ত কিছু লিখে দিতে পারেন ফলে সেটা ইউজার দেখলে বুঝতে সুবিধা হবে।

1.<input type="text" name="address" maxlength="50" placeholder="Type Address" size="30"/>

প্রদর্শন

টাইপ করা শুরু করুন সাথে সাথে "Type Address" লেখাটি অদৃশ্য হয়ে যাবে।

Upload Form

ফর্মে যদি ছবি বা যেকোন ফাইল আপলোডের সুবিধা রাখতে চান তাহলে আগে ফর্মকে আপলোডের উপযোগী করতে হবে। এরপর input এলিমেন্টের type এট্রিবিউটের মান file দিলেই কাজ হয়ে গেল।

একটা আপলোড ফর্ম

<form action="create.php" method="post" enctype="multipart/formdata">
<input type="file" name="user_file" />
</form>

আউটপুট

ফাইল আপলোড করতে চাইলে form এ এই enctype="multipart/formdata" এট্রিবিউটটি দিতেই হবে। আর input এর type="file" দিতে হয়।

disabled, readonly এট্রিবিউট ব্যবহার করতে পারে এগুলি আগের টিউটোরিয়ালে আলোচনা হয়েছে।

hidden field

====================

input ফিল্ড লুকিয়ে রাখা যায়। ফলে ব্রাউজারের ফর্মে কোন ফিল্ড দেখাবেনা কিন্তু ফর্মে hidden ফিল্ড দিয়ে যেকোন ডেটা value এট্রিবিউটে রাখতে পারেন। যেমন

1.<input type="hidden" name="currency" value="dollar"/>

ধরুন আপনার সাইটে একটা মুল্য তালিকা আছে সেখানে ইউজার যেকোন একটা প্যাকেজ সিলেক্ট করে সাবমিট করলে তাকে একটা ফর্ম পূরনের জন্য ফর্ম পেজে পাঠিয়ে দিলেন। যে প্যাকেজটা সিলেক্ট করল সেটার মুল্য জাভাস্ক্রিপ্ট বা পিএইচপি দিয়ে নিয়ে মুল ফর্মে একটা হিডেন ফিল্ড তৈরী করে রেখে দিতে পারে। এরুপ আরো বিভিন্ন সময় হিডেন ফিল্ডের প্রয়োজনীয়তা দেখা দেয়।

Drop down list

ড্রপডাউন লিস্ট এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।ধরুন আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন ড্রপডাউন লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন।

ড্রপডাউন লিস্ট তৈরী করতে প্রথমে <select> ট্যাগ দিয়ে কোড শুরু করতে হবে এরপর যে আইটেমগুলি থেকে ইউজার বাছাই করবে সেগুলির প্রতিটি <option> ট্যাগের মধ্যে রাখতে হবে।যেমন

<select name="color">
<option  value="bl">Black</option>
<option value="wh">White</option>
<option selected="selected" value="mr">Maroon</option>
</select>

প্রদর্শন:ড্রপডাউন লিস্ট

উপরের উদাহরনে দেখুন selected এট্রিবিউটের কারনে প্রথম অপশন Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন।

প্রতিটি <option> ট্যাগে value এট্রিবিউট আছে এটা খুব গুরত্বপূর্ন যখন ফর্মের ডেটা সার্ভারে পাঠাবেন।value এট্রিবিউটের নাম ধরে (যেমন bl,mr..) কল করতে হয়।

<select> ট্যাগের size এট্রিবিউট

<select> ট্যাগে size এট্রিবিউট দিয়ে আপনি ঠিক করে দিতে পারেন যে লিস্টে কয়টি আইটেম দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি অপশন দেখাবে বাকিটা স্ক্রল করে দেখতে হবে।

<select name="color" size=2>
 
<option value="bl">Black</option>
 
<option value="wh">White</option>
 
<option selected="selected" value="mr">Maroon</option>
 
</select>

প্রদর্শন: <select> ট্যাগের size এট্রিবিউট

<select> ট্যাগের multiple এট্রিবিউট

multiple এর মাধ্যমে আপনি একের অধিক বিষয় সিলেক্ট করার সুযোগ দিতে পারেন।

<select multiple="yes">
 
<option value="bl">Black</option>
 
<option value="wh">White</option>
 
<option selected="selected" value="mr">Maroon</option>
 
</select>

প্রদর্শন: <select> ট্যাগের multiple এট্রিবিউট

*৭ নম্বর লাইনে যদি selected এট্রিবিউট উঠিয়ে দেন তাহলে কোন অপশন আর সিলেক্টেড দেখাবেনা।

আপনার অপশন লিস্ট যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন।<optgroup> এলিমেন্ট দিয়ে এটা করা যায়। যেমন

<select name="selInformation" >
<optgroup label="Tutorials" >
<option value="html"> HTML Tutorial </option>
<option value="css"> CSS Tutorials </option>
<option value="javascript"> JavaScript </option>
</optgroup>
<optgroup label="PHP Tutorials" >
<option value="basicphp"> Basic PHP </option>
<option value="advancedphp"> Advanced PHP </option>
</optgroup >
<optgroup label="Database Tutorials">
<option value="sql"> SQL Tutorial </option>
<option value="phpdatabase"> PHP Database </option>
</optgroup>
</select>