আসসালামু আলাইকুম!! আমি শাহরিয়ার আহমেদ শোভন। আজকের পর্বের মুল বিষয় হচ্ছে 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
- 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
“HTML বেশ খানিকটা সহজ একটা বিষয়। আর অনেকেই এ বিষয়ে অবগত আছেন। এই অবস্থায় কি আমি এই সিরিজ কন্টিনিউ করব??”