শুরু করুন ওয়েব ডিজাইন। অধ্যায় -৮

আজকের বিষয় : HTML form, form validation, fieldset, legend, Contact us form
HTML Form:

এটি ইউজার এর ডাটা সমুহ server এ পাঠায়। ফরমের উপাদান গুলো হল-
textfields, password field, radio button, checkbox, submit button etc. সম্পূর্ণ form
<form> ও </form> এই দুই tag এর মধ্যে অবস্থান নেয়। বিভিন্ন form elements <input> tag এর type দ্বারা নির্ধারিত হয়। নিচের উদাহরণটি বিভিন্ন elements এর একটি form তৈরি করে-
<form>
username: <input type=”text” name=”username”><br>
password: <input type=”text” name=”password”><br/>
<p>Sex</p>
<input type=”radio” name=”sex” value=”male”>Male
<input type=”radio” name=”sex” value=”female”>Female<br/>
Your Vehicles
<input type=”checkbox” name=”vehicle” value=”Bike”>I have a bike
<input type=”checkbox” name=”vehicle” value=”Car”>I have a car<br/>
<input type=”submit” value=”Submit”>
</form>
ফর্মের attributes এর মধ্যে গুরুত্বপূর্ণ action এবং method attributes.
Method দুই ধরণের হয় একটি হল POST আরেকটি হল GET. আর action attribute নির্দেশ করে এই ফর্ম কোন ফাইল প্রসেস করবে। সেখেত্রে modified code হবে এমন <form action=”myaction.php” method=”POST”>
একটি গুরুত্বপূর্ণ বিষয় হল ফর্ম ডাটা বৈধতা অর্থাৎ user সঠিক ডাটা পাঠাল কিনা তা যাচায়ের একটি পদ্ধতি। আমরা সাধারণত client side scripting language ফর্ম ডাটা বৈধতা দেখার জন্য ব্যবহার করি।
যেমন JavaScript. এটি server এ ডাটা পাঠানোর আগেই validity check করে দিতে পারে।
এখন আমরা <fieldset> tag সম্পর্কে জানবো । এই tag টি form এর একই ধরণের উপাদান গুলোকে গ্রুপ করে। নিচের কোড দেখে আপনিও চর্চা করলে বিষয়টি সহজে বুঝতে পারেন-
<form>
<fieldset>
<legend>Personaldata:</legend>
Name: <input type=”text”><br>
Email: <input type=”text”><br>
Date of birth: <input type=”text”>
</fieldset>
</form>
এই পরস্পর সম্পর্কযুক্ত গ্রুপটির নাম ঠিক করে দেই <legend> tag
সবশেষে এখন আমরা একটি Contact Us Form
তৈরি করব। নিচে কোড দেওয়া হলঃ
<form action=”contact.php” method=”post”>
<fieldset>
<legend>Contact Us </legend>
Your name:
<input type=”text” name=”cf_name”><br/>
Your e-mail:
<input type=”text” name=”cf_email”><br/>
Message:
<textarea name=”cf_message”></textarea><br/>
<input type=”submit” value=”Send”>
<input type=”reset” value=”Clear”>
</fieldset>
</form>
কোন প্রশ্ন বা কমেন্ট থাকলে জানাবেন এবং নিয়মিত পোস্ট পেতে লাইক করুন www.facebook.com/shobkeso
 আমার আরও কিছু পোস্ট

১. আপনার ব্রাউজারে দিন মাস্টার পাসওর্য়াড। 

২. প্রোগ্রামিং কি? কিভাবে শুরু করবেন?? কোথা থেকে শুরু করবেন