আগের পর্ব গুলো পড়ুনঃ

ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ১ঃ প্রাথমিক ধারণা।

ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ২ঃ এইচটিএমএল এর গঠন ও এইচটিএমএল ট্যাগ।

ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ৩ঃ এইচটিএমএল ট্যাগ ও এইচটিএমএল আট্রিবুটস।

ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ৪ঃ এইচটিএমএল COMMENT ও এইচটিএমএল FORMETTING

ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ৫ঃ এইচটিএমএল পিকচার ট্যাগ

ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ৬ঃ  এইচটিএমএল লিস্ট

আজ শিখবো এইচটিএমএল ফর্ম। অফিস, স্কুল, কলেজ সহ সকল ক্ষেত্রে যেমন ফর্ম একটি গুরুত্ব পূর্ণ বিষয়, ওয়েবসাইট এর ক্ষেত্রেও ফর্ম একটি গুরুত্বপূর্ণ বিষয়।

এইচটিএমএল ফর্মঃ

এইচটিএমএল ফর্ম এর জন্য <form></form> ট্যাগ ব্যবহার করা হয়। এই ট্যাগ দিয়ে বুঝানো হয় যে এটি একটি ফর্ম। ফর্ম এর সবচেয়ে গুরুত্বপূর্ণ অংশ হল input ট্যাগ। input ট্যাগের কোনও ক্লোজিং পার্ট নেই। input ট্যাগের বিভিন্ন আট্রিবুটস এর মধ্যে গুরুত্বপূর্ণ হল type আট্রিবুট।

Input ট্যাগঃ

এই ট্যাগ অন্যোন্য ট্যাগের মত সকল গ্লোবাল আট্রিবুটস সাপোর্ট করে এবং কিছু বিশেষ আট্রিবুটস সাপোর্ট করে। বিশেষ আট্রিবুটস গুলো হলঃ

accept
align
alt
autocomplete-- html-5
autofocus html-5
checked
disabled
form-- html-5
formaction-- html-5
formenctype-- html-5
formmethod-- html-5
formnovalidate-- html-5
formtarget-- html-5	_
height-- html-5
list-- html-5
max-- html-5
maxlength
min-- html-5
multiple-- html-5
name
pattern-- html-5
placeholder-- html-5
readonly
required-- html-5
size
src
step-- html-5
type
value
width-- html-5

 কিছু আট্রিবুটস সম্পর্কেঃ

• align => কন্টেন্ট কোন সাইডে রাখবেন তা প্রকাশ করে।
• autocomplete-- html-5 => আপনি ফর্ম এ কোনও কিছু লিখলে তা অটো কমপ্লিট হবে কি না তা প্রকাশ করে।
• autofocus html-5 => আপনি যখন পেজ টি রিফ্রেশ দিবেন বা ব্রাউস করবেন তখন ফর্ম এ অটো ফোকাস থাকবে কি না তা প্রকাশ করে।
• checked => যখন আপনি রেডিও বাটন রাখবেন তখন আগে থেকেই চেকড থাকবে কি না তা প্রকাশ করে।
• disabled => এটি ব্যবহার করলে ইউজার আর ঐ ফর্ম ইউস করতে পারবে না। কোনও ফোকাস ও থাকবে না ঐ ইনপুট ফর্মের উপর।
•  formmethod-- html-5 => কোন পদ্ধতি ব্যবহার করে ফর্ম টি সাবমিট হবে তা প্রকাশ করে। ২ টি পদ্ধতি আছে।
  • get পদ্ধতি
  • post পদ্ধতি
• formnovalidate-- html-5 => এটি ব্যবহার করলে ইউজার ফর্ম সাবমিট করলে  তা ভ্যালিড হবে না।
•  formtarget-- html-5  => ফর্ম সাবমিট করার পর তা কিভাবে/কোথায় দেখাবে যেমনঃ অন্য ট্যাবে বা ঐ ট্যাবেই দেখাবে তা প্রকাশ করে।
• height-- html-5 => এটি হাইট নির্ধারণ করে।
• maxlength => একটি টিউনে  ইউজার কত characters ব্যবহার করতে পারে তা প্রকাশ করে।
• placeholder-- html-5 => ইউজার কে কোনও হিন্ট দেয়ার জন্য ব্যবহার করা হয়।
• readonly => এটি ব্যবহার করলে ইউজার আর ঐ ইনপুট ফর্ম টি ব্যবহার করতে পারবে না। তবে ইনপুটে ফোকাস থাকবে।
• required-- html-5 => কোনও ইনপুট ট্যাগে এটি ব্যবহার করলে ইউজার ঐ ইনপুট ট্যাগ পূরণে বাধ্য থাকবে কেননা ফর্ম সাবমিট করার সময় দেখাবে যে ঐ ইনপুট ট্যাগ টি পুরন হয় নি।
• type => এটি ইনপুট ট্যাগের সবচেয়ে গুরুত্বপূর্ণ আট্রিবুট। এটি নিয়ে নিচে আলোচনা করেছি।
• value => এটি ইনপুট ফর্মের ভ্যলু নির্ধারণ করে। যখন checkbox ইউস করা হয় তখন অবশ্যই ভ্যলু ব্যবহার করতে হয়।
• width-- html-5 => এটি পাশাপাশি দূরত্ব নির্ধারণ করে।

Input Type আট্রিবুটঃ

Type আট্রিবুটের অনেক ভ্যলু রয়েছে। যেমনঃ

button
checkboxcolor
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

আমি কিছু type ভ্যলু সম্পর্কে আলোচনা করছিঃ

• button => এটি বাটন তৈরিতে ব্যবহার করা হয়।
• date => এটি দিয়ে তারিখ লেখার ইনপুট ফর্ম তৈরি করা হয়।
• email => এটি দিয়ে ইমেইল ইনপুট ফর্ম তৈরি করা হয়।
• hidden => এটি দিয়ে ঐ ইনপুট ফর্ম হিডেন/গোপন রাখা হয়।
• month => মাস ইনপুটের জন্য ব্যবহার করা হয়।
• number => এটি দিয়ে যে কোনও নাম্বার প্রকাশ করা হয়।
• password => যে কোনও পাস ওয়ার্ড ইনপুট করার জন্য এটি ব্যবহার করা হয়।
• radio => রেডিও বাটন তৈরির জন্য ব্যবহার করা হয়।
• reset => কোনও ফর্ম এর সব ইনফর্মেশন রিসেট করতে এটি ব্যবহার করা হয়।
• search => কোনও কিছু খোঁজার জন্য এটি ব্যবহার করা হয়।
• submit => পুরো ফর্ম টি সাবমিট করার জন্য এটি ব্যবহার করা হয়।
• tel => টেলিফোন নাম্বার ইনপুটের জন্য ব্যবহার করা হয়।
• text => যে কোনও কিছু লেখার জন্য এটি ব্যবহার করা হয়।
• time => সময় ইনপুটের জন্য ব্যবহার করা হয়।
• week => সপ্তাহ ইনপুটের জন্য ব্যবহার করা হয়।

এবার নিচের কোডটি ব্রাউজার এ রান করান। তাহলে ইনপুট Type আট্রিবুট সম্পর্কে ক্লিয়ার হয়ে যাবে।

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<h2>This is Example of form</h2><br />
 <form action="" method="get" target="_self"  accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
First name:<br>
<input type="text" name="firstname" disabled="disabled" >
<br>
Last name:<br>
<input type="text" name="lastname" readonly="readonly">
<p>Sex</p>
<input type="radio" name="sex" value="male" checked checkboxcolor="red">Male
<br>
<input type="radio" name="sex" value="female">Female <br />
<p>hidden</p><br />
<input type="hidden" /> <br />
<p>search</p><br />
<input type="search" /><br />
<p>date</p><br />
<input type="date" /> <br />
<p>month</p><br />
<input type="month" /><br />
<p>time</p><br />
<input type="time" /><br />
<p>number</p><br />
<input type="number" /><br />
<p>password</p><br />
<input type="password" /><br />
<p>tel</p><br />
<input type="tel" /><br />
<p>email</p><br />
<input type="email" /><br />
<p>week</p><br />
<input type="week"  /><br />
<p>Reset</p><br />
<input type="reset" value="reset"/><br />
<p>Submit</p><br />
<input type="submit" name="submit" value="Submit" /> <br />
</form>
</body>
</html>

 গ্রুপ ফর্মঃ

আপনি ইচ্ছে করলে আপনার ফর্ম টি গ্রুপ করে করতে পারবেন। এর জন্য <fieldset> ট্যাগ ব্যবহার করতে হবে। নিচের কোডটি লক্ষ্য করুনঃ

<!DOCTYPE html>
<html>
<body>

<form action="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>

</body>
</html>

এখানে, ২ টি নতুন ট্যাগ রয়েছে।

• <fieldset> => এটি দিয়ে বুঝানো হয়েছে যে এটি একটি ফর্ম গ্রুপ।
•  <legend> => এটির মাধ্যমে গ্রুপের একটি টাইটেল বা ক্যাপশন দেয়া হয়েছে।

উপরের কোডটি আপনার ব্রাউজার এ রান করান। দেখবেন নিচের স্ক্রীন শট এর মত সুন্দর ভাবে গ্রুপ করে ফর্ম এসেছে।

আশা করি বুঝতে পেরেছেন।আজকে এ পর্যন্তই। আগামী পর্বে নতুন কিছু নিয়ে আলোচনা করব। অবশ্যই আগের পর্ব গুলো পড়বেন।  যারা ওয়েব ডিজাইন শিখতে চান তারা গুগল সার্চ করে এই বিষয় গুলো সম্পর্কে আরও জানুন ও বেশি বেশি প্র্যাকটিস করুন। আরও জানতে টিউমেন্ট করুন।

পূর্বে প্রকাশিত এখানে ।