HTML 5 ব্যবহার করে কীভাবে ফরম বানাবেন? শিখে নিন লাইভ কোডিংসহ

 

আমরা যারা এইচটিএমএল এর কাজ শিখতে চাই বা আগ্রহী তাদের জন্য আমি এখন থেকে নিয়মিত বিষয় ভিত্তিক কন্টেন্ট লিখব। আশা করি আপনারা সবাই এখান থেকে উপকৃত হবেন। তো চলুন শুরু করা যাক আমাদের আজকের আলোচনা। আজকের বিষয় টাইটেল দেখেই মোটামুটি বুঝতে পেরেছেন যে আমাদের আজকের আলোচনা কী বিষয়ের উপর হবে।
যারা বিভিন্ন কারনে ফরম তৈরী করেন বা করতে চান তাদের জন্য মূলত আজকের এই বিষয়টি বেশি কাজে লাগবে। তো চলুন সাধারণ একটা ফরম তৈরী করে আমরা প্রাক্টিক্যালি বিষয়টি বুঝার চেষ্টা করি।

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
First name:<br> 
<input type="text" name="firstname" value="Mini"> 
<br> 
Last name:<br> 
<input type="text" name="lastname" value="Cat"> 
<br> 
Father's Name: <br> <input type="text" name="Father's Name" value="Robiul Islam"> 
<br>
Mother's Name: <br> 
<input type="text" name="Mother's Name" value="Moutusi"> 
<br> 
Gender: <br>
<input type="text" name="Gender" value="Male/Female/Other"> 
<br>
Division: <br> 
<input type="text" name="Division" value="Dhaka"> 
<br> 
Zilla: <br> 
<input type="text" name="Zilla" value="Dhaka"> 
<br><br> 
<input type="submit" value="Submit">
</form> 
</body>
</html>

তো উপরে আমাদের কোড দেখাচ্ছে

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

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

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

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

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

সবাইকে ধন্যবাদ।

 

Level 2

আমি মাহাদী হাসান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 4 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 13 টি টিউন ও 9 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 1 টিউনারকে ফলো করি।

নতুন কিছু শিখতে ভীষণ আগ্রহী


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস