এইচটিএমএল (HTML) বাংলা টিউটোরিয়াল (পার্ট-৮)

বন্ধুরা আশা করি ফ্রী বাংলা টিউটোরিয়াল ওয়েব সাইটটি আপনাদের সময় বাঁচিয়ে নতুন নতুন বিষয় সম্পর্কে জানতে সাহায্য করছে। আজ আমাদের পাঠের বিষয়গুলো হল HTML form, form validation, fieldset, legend, Contact us form

HTML Form:

এটি ইউজার এর ডাটা সমুহ server এ পাঠায়। ফরমের উপাদান গুলো হল-
textfields, password field, radio button, checkbox, submit button etc. সম্পূর্ণ form

ও

এই দুই tag এর মধ্যে অবস্থান নেয়। বিভিন্ন form elements tag এর type দ্বারা নির্ধারিত হয়। নিচের উদাহরণটি বিভিন্ন elements এর একটি form তৈরি করে-

1 2 3 4 5 6 7 8 9 10 11

<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 হবে এমন

একটি গুরুত্বপূর্ণ বিষয় হল ফর্ম ডাটা বৈধতা অর্থাৎ user সঠিক ডাটা পাঠাল কিনা তা যাচায়ের একটি পদ্ধতি। আমরা সাধারণত client side scripting language ফর্ম ডাটা বৈধতা দেখার জন্য ব্যবহার করি।
যেমন JavaScript. এটি server এ ডাটা পাঠানোর আগেই validity check করে দিতে পারে।

এখন আমরা

tag সম্পর্কে জানবো । এই tag টি form এর একই ধরণের উপাদান গুলোকে গ্রুপ করে। নিচের কোড দেখে আপনিও চর্চা করলে বিষয়টি সহজে বুঝতে পারেন-

1 2 3 4 5 6 7 8

<form> <fieldset> <legend>Personaldata:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form>

এই পরস্পর সম্পর্কযুক্ত গ্রুপটির নাম ঠিক করে দেই

tag

সবশেষে এখন আমরা একটি Contact Us Form
তৈরি করব। নিচে কোড দেওয়া হলঃ

1 2 3 4 5 6 7 8 9 10 11 12 13

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

আর এই contact us ফর্মের implementation এর মধ্যদিয়ে আপনাদের এইচটিএমএল (HTML) বাংলাটিউটোরিয়াল (পার্ট-৮) সমাপ্ত হল। ধন্যবাদ বন্ধুরা।