৭ দিনে শিখুন HTML – ৫ম দিন — পর্ব ০৫

Shahriar Ahmed Shovon

6 years ago

আসসালামু আলাইকুম!! আমি শাহরিয়ার আহমেদ শোভন। আজকের পর্বের মুল বিষয় হচ্ছে HTML Form. আজকে হল ৫ম দিন। আর দুইদিনের দুইটা পর্ব থাকবে HTML নিয়ে। তারপর, একটা ছোট্ট প্রজেক্ট হয়তো হবে “শুধু HTML দিয়ে একটা ওয়েবসাইট”।

আচ্ছা, তাহলে এখনই শুরু করা যাক!!

HTML Forms

HTML Form আসলে ব্যবহৃত হয় ওয়েবসাইটের ইউজার এর থেকে ইনপুট নিতে। মানে, রেজিস্ট্রেশন, লগিন, কমেন্ট ইত্যাদি যেসব জায়গায় ইউজার এর থেকে ইনপুট নেয়ার প্রয়োজন হয় সেখানে সেখানে আমরা ব্যবহার করি HTML Form.

HTML Form তৈরি আসলে খুবই সহজ। <form> ট্যাগের মাধ্যমে করা যায় যেমনটা নিচে দেখানো হল।

<form>
.
form elements
.
</form>

form element বলতে বিভিন্ন ধরনের ইনপুট নেয়া যেমনঃ- পাসওয়ার্ড, টেক্সট, ইমেজ, রেডিও অপশন, সাবমিট বাটন ইত্যাদি ইত্যাদি।।

এসব কিছুই form element এর উপাদান।

The <input> Element

HTML Form এর সবথেকে বেশি ব্যবহৃত হয় যে এলিমেন্ট সেটা হচ্ছে <input> ট্যাগ। আমরা ইনপুট ট্যাগ কে নানাভাবে ব্যবহার করতে পারি যেমনঃ-

Text — সাধারন লেখা ইনপুট নিতে।
Radio — বিভিন্ন অপশন এর মধ্য থেকে একটা ইনপুট নিতে।
Submit — ফর্ম সাবমিট করার জন্য সাবমিট বাটন।

Text Input

সাধারনত একলাইনের ইনপুট নিতে Text Input ব্যবহৃত হয়।

তার জন্য এরকম কোড লিখতে হয়।

<input type="text">

এই ট্যাগের বিভিন্ন Attribute আছে যেমনঃ- name, value ইত্যাদি। নিচের একটা উদাহরণ দেখি।

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

এখানে দেখার বিষয় হচ্ছে, text type input ডিফল্ট ভাবে সর্বোচ্চ ২০ অক্ষরের ইনপুট নেই। এবং এই form ট্যাগ কিন্তু আউটপুটে দেখা যাচ্ছে না এটা শুধু input ট্যাগ গুলোকে একত্র করে। আর এখানে name এট্রিবিউট টা id এর মতো করে কাজ করে।

Radio Button Input

আমরা অনেক সময় কোন মতামত নেয়ার সময় দুইটা বা তিনটা অপশন দিয়ে দেই। মানে, MCQ এর মতো। এখানেও ঠিক একি কাজ করতে এই Radio Button ব্যবহৃত হয়। নিচের উদাহরণটা দেখি।

<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

এখানে আমরা তিনটা অপশন দিয়েছি এবং Male অপশন কে টিক দিয়ে রেখেছি মানে chech রেখেছি।

আগের মতোই শুধু আমরা type=”text” এর স্থানে type=”radio” ব্যবহৃত করেছি। এবং id এর জন্য name এট্রিবিউট ব্যবহার করেছি। আর ভ্যালু হিসেবে দিয়েছি আমাদের অপশন এর নাম। আর প্রথম অপশন কে আগে থেকেই checked রেখেছি। আপনি নাও রাখতে পারেন। এখন কোড একটু ঘষামাজা করে প্র্যাক্টিস করুন।

The Submit Button

আমরা কিছু ইনপুট নিয়ে সেগুলোকে যদি একশন না দেই তাহলে লাভ কি?? হ্যা, তার জন্য একটা সাবমিট বাটন ও দেয়া যায়।

<form action="action_page.html>
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">
</form>

এখানে আমরা ফর্ম এর একশন দিয়েছি action_page.html মানে সাবমিট বাটন এ ক্লিক করলে ওই পেজে চলে যাবে।

আর একদম লাস্টে <input type=”submit” value=”Submit”> দিয়েছি। এখানে টাইপ এ যখন submit দিয়েছি তখন এটা বাটন হয়ে গেছে। আর value তে যা দেব সেটা বাটনে দেখাবে।

The Method Attribute

ফর্ম এর দুইটা মেথড আছে। একটা হচ্ছে GET এবং অন্যটা হচ্ছে POST.

আসলে হচ্ছে, মেথড হল যে সাবমিট হবে তা কোন প্রকারের।

মানে, GET হল সাধারন ইনপুট নেয়ার জন্য। মানে, সার্চ ইনপুট বা এরকম কিছু।

আর, POST হল সিকিউরড ইনপুট নেয়ার জন্য। যেমন পাসওয়ার্ড।

যদি GET নিয়ে সাবমিট দেই তাহলে ব্রাউজারের এড্রেস বারে সেই ইনপুট গুলো দেখা যায়। কিন্তু, POST টাইপে ইনপুট দিলে সেটা হয় না। তাই, যখন যেইটা প্রয়োজন তখন সেইটা ব্যবহার করব। নিচের উদাহরণ দেখি,

<form action="action_page.php" method="get"> এটা GET মেথড।

<form action="action_page.php" method="post"> এটা POST মেথড।

The Name Attribute

আমরা আগে বলেছি name আইডির মতো কাজ করে। কিন্তু, শুধু এইটা না আসলে আমরা যদি Input এ name এট্রিবিউট না দেই তাহলে কখনই সেই ইনপুট সাবমিট হবে না।

Grouping Form Data with <fieldset>

আমরা যখন অনেকগুলা ইনপুট নেই তখন সেগুলোকে আলাদা করার প্রয়োজন হয়। আমরা Personal Information কে একটা ফিল্ড, Educational Information কে একটা ফিল্ড এরকম করে আলাদা করা যায়।।

<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>

এখানে আমরা <fieldset> ট্যাগ এর মাধ্যমে একটা ফিল্ড তৈরি করেছি এবং সেটার একটা নাম দেয়ার জন্য <legend> ট্যাগ ব্যবহার করেছি।।

কোড টা একটু ভালোভাবে দেখলেই বুঝবেন।।

HTML Form Elements

এখন আমরা দেখবো Form Element এ কত রকম এর ইলিমেন্ট আছে।

The <select> Element (Drop-Down List)

<select> ট্যাগের মাধ্যমে একটা ড্রপ-ডাউন লিস্ট তৈরি হয়। আমরা সেখান থেকে একটা অপশন সিলেক্ট করতে পারি। নিচের উদাহরণ দেখি আগে।

<form action="action_page.html">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

এখানে ফর্ম এর একটা একশন দিয়েছি। তারপর <select> ট্যাগের মাধ্যমে একটা ড্রপ-ডাউন লিস্ট তৈরি করেছি।।

এখানে <select> ট্যাগের নাম দিয়েছি cars এটা না দিলে কিন্তু সাবমিট হবে না। এখন এরপরে আমরা <option> ট্যাগের মাধ্যমে অপশন দিয়েছি। এখানে value এট্রিবিউট এ যা দিব সেটাই সাবমিটের একটা রেজাল্ট হবে।। এবং তারপর যে Volvo বা Saab দিয়েছি এগুলাই হচ্ছে অপশন।। এটার আবার ইন্ড ট্যাগ আছে।

The <textarea> Element

আমরা বেশি লেখার ইনপুট নিতে <textarea> ব্যবহার করি। যেমনঃ-

<textarea name="message" rows="10" cols="30"></textarea>

এখানে আমরা textarea এর নাম দিয়েছি message, row এবং cols মানে এগুলা দিয়ে টেক্সট-এরিয়ার সাইজ ঠিক করে দিয়েছি।

The <button> Element

<button> ট্যাগের মাধ্যমে আমরা বাটন তৈরি করতে পারি। এটার মাধ্যমে জাভাস্ক্রিপ্ট ও রান করানো যায়।।

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

এখানে খুব সিম্পল কাজ হয়েছে। এই onclick এট্রিবিউট এ জাভাস্ক্রিপ্ট কোড দেয়া হয়েছে।। এটা এখন বোঝানো সম্ভব না।।

এখন আবার HTML5 এ নতুন কিছু এলিমেন্ট যোগ হয়েছে। সেগুলো ইনশাল্লাহ পরে দেখাবো।

HTML Input Type

এখন দেখবো যে কত ধরনের ইনপুট নেয়া যায়।।

আগে যেগুলো দেখেছি সেগুলো বাদে অন্যগুলা দেখবো।

Input Type: password

<input type=”password”>একটা password field তৈরি করে। মানে, পাসওয়ার্ড ইনপুট নেয়ার ফিল্ড। যেমনঃ-

<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>

Input Type: checkbox

<input type=”checkbox”> একটা চেকবক্স তৈরি করে।। মানে, একের অধিক অপশন সিলেক্ট করতে ব্যবহৃত হয়। যেমনঃ-

<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>

Input Type: number

The <input type=”number”> এটার মাধ্যমে আমরা নাম্বার সিলেক্ট করতে পারি। সর্বনিম্ন কত থেকে সর্বোচ্চ কত রেঞ্জ এর নাম্বার ইনপুট নেবো সেটা এই টাইপে দেয়া যায়। যেমনঃ-

<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>

HTML5 Input Types

HTML5 এ কিছু নতুন ইনপুট টাইপ যোগ হয়েছে। এগুলা দিয়ে চেক করে দেখুন কেমন হয়।।

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Input Type: date

The <input type=”date”> এটা দিয়ে ডেট ইনপুট নিতে হয়। যেমনঃ-

<form>
Birthday:
<input type="date" name="bday">
</form>

Input Type: color

The <input type=”color”> এটা দিয়ে কালার ইনপুট নিতে হয়। যেমনঃ-

<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>

Input Type: month

The <input type=”month”> এটা দিয়ে মাস ইনপুট নিতে হয়। যেমনঃ-

<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>

Input Type: week

The <input type=”week”> এটা দিয়ে সপ্তাহ ইনপুট নিতে হয়। যেমনঃ-

<form>
Select a week:
<input type="week" name="week_year">
</form>

Input Type: time

The <input type=”time”> এটা দিয়ে টাইম ইনপুট নিতে হয়। যেমনঃ-

<form>
Select a time:
<input type="time" name="usr_time">
</form>

Input Type: datetime

The <input type=”datetime”> এটা দিয়ে ডেটটাইম ইনপুট নিতে হয়। যেমনঃ-

<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>

Input Type: email

The <input type=”email”> এটা দিয়ে ইমেইল ইনপুট নিতে হয়। যেমনঃ-

<form>
E-mail:
<input type="email" name="email">
</form>

Input Type: tel

The <input type=”tel”> এটা দিয়ে টেলিফোন নাম্বার ইনপুট নিতে হয়। যেমনঃ-

<form>
Telephone:
<input type="tel" name="usrtel">
</form>

Input Type: url

The <input type=”url”> এটা দিয়ে ইউআরএল ইনপুট নিতে হয়। যেমনঃ-

<form>
Add your homepage:
<input type="url" name="homepage">
</form>

HTML Input Attributes

আমরা এতক্ষণ দেখেছি কত ধরনের ইনপুট টাইপ নেয়া যায় HTML Form এ। এখন দেখবো সেগুলোর এট্রিবিউট গুলোকে।

The value Attribute

আমরা যেকোন ইনপুট এর ভ্যালু বা মান দিয়ে দিতে value এট্রিবিউট ব্যবহৃত হয়।।

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

The readonly Attribute

আমরা চাইলে কোন একটা ইনপুট কে রিড-অনলি করে দিতে পারি। অর্থাৎ, এই ইনপুট এর জন্য ইউজার কিছুই করতে পারবে না। অর্থাৎ,ভ্যালু চেঞ্জ করতে পারবে না।

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

The disabled Attribute

আমরা চাইলে কোন একটা ইনপুট কে ডিজেবল করে দিতে পারি। অর্থাৎ, এটা এখন বন্ধ আছে বোঝাতে ব্যবহার করা হয়।

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

The size Attribute

কোন ইনপুটে সর্বোচ্চ কতগুলো ক্যারেক্টার ইনপুট দেয়া যাবে সেটা নির্ধারণ করে দিতে size ব্যবহৃত হয়।

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

HTML5 Attributes

HTML5 এ <input> ট্যাগের জন্য নতুন করে নিচের এট্রিবিউট গুলো যুক্ত হয়েছে।

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

নিচের গুলো <form> ট্যাগের এট্রিবিউট।

autocomplete
novalidate

এতোগুলো এট্রিবিউট এর উদাহরণ দেয়া সম্ভব না। তাই, আপনারা নিচের লিংক থেকে এট্রিবিউট গুলোর উদাহরণ দেখতে পারবেন।

www.w3schools.com/html/html_form_attributes.html

আজকের মতো এখানেই শেষ। আমি HTML5 এর যতগুলো কাজ আছে form নিয়ে তার সবগুলোই দেখিয়েছি। ইনশাল্লাহ!! এই সিরিজ শেষ করে আমরা শুরু করব CSS এর টিউটোরিয়াল সিরিজ।

আর তারপরে শুরু করব W3.css এর খুব স্বল্প সময়ের একটা টিউটোরিয়াল সিরিজ। আর এই তিনটা শেষ করলেই আমরা ভালো মানের কিছু টেমপ্লেট বা থিম ডিজাইন করতে পারবো ইনশাল্লাহ।।

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

আমি অনেককেই অনেক টিপস বা মোটিভেশন দেই কিন্তু তারা যখন বলে কিভাবে শিখবো। তখন আমি হতাশ হয়। কারন, ইন্টারনেটে প্রচুর টিউটোরিয়াল আছে। তবুও তাদের কথা ভেবেই এই টিউটোরিয়াল গুলো লিখছি যারা এখান থেকে বাংলায় কিছু শিখতে চাই।

একটা বাড়ির কাজ দেই। যদিও জানি কেউই করবেন না বা করে জমা দেবেন না তবুও, একটা সাইট বানান যেখানে সাইন আপ করা যায় এবং লগিন করা যায়। সাইন আপ করলে একটা নতুন পেজে নিয়ে যাবে এবং লগিন করলে আরেকটা নতুন পেজে নিয়ে যাবে। এটুকু করলেই যথেষ্ট।

আর আরো ভালো মতো শিখতে চাইলে, আমি যে যে কাজ গুলো শিখিয়েছি সেগুলো সব ব্যবহার করে সাইট টা বানান। জমা দিতে চাইলে আমার ইমেইলঃ- 00shovonahmed00 [at the rate of(@)] gmail [dot] com

আসসালামু আলাইকুম!! আমি শাহরিয়ার আহমেদ শোভন।।

আরো ভালো আর্টিকেল পেতে চলে যান এই লিংক এ www.thebanglatech.xyz