একটি HTML ফর্ম ব্যবহারকারীর ইনপুট সংগ্রহ করতে ব্যবহৃত হয়। ব্যবহারকারীর ইনপুট প্রায়শই প্রক্রিয়াকরণের জন্য একটি সার্ভারে পাঠানো হয়।
নিচের উদাহরন টি দেখুন
<form> এলিমেন্ট
HTML <form> এলিমেন্ট টি ব্যবহার করা হয় ওয়েবসাইট থেকে ইউজার দের তথ্য নেবার ইনপুট ফিল্ড তৈরি করার জন্য ।
<form>
.
form elements
.
</form>
<form> এলিমেন্ট বিভিন্ন ধরনের ইনপুট এলিমেন্ট যেমন text fields, checkboxes, radio buttons, submit buttons এগুলোর কন্টেইনার হিসেবে কাজ করে ।
আমরা বিভিন্ন ধরনের ইনপুট এলিমেন্ট গুলোকে এইচটিএমএল ফর্ম এলিমেন্ট এ আলোচনা করেছি ।
<input> Element
HTML <input> element টি বেশি ব্যবহার হয় ফর্ম এলিমেন্ট হিসেবে ।
<input> এলিমেন্ট টি এর type attribute এর ভিত্তিতে বিভিন্য ভাবে প্রদর্শিত হয় ।
নিচের টেবিলে কিছু ইনপুট টাইপ সম্পর্কে ধারনা দেয়া হলো
| Type | Description |
| <input type=”text”> | সিংগেল লাইন ইনপুট ফিল্ড তৈরি করে |
| <input type=”radio”> | রেডিও বাটন তৈরি করে ( অনেক গুলোর মধ্যে থেকে একটা সিলেক্ট করা যায় ) |
| <input type=”checkbox”> | চেকবক্স তৈরি করে ( টিক দেয়া যায় এমন বক্স) |
| <input type=”submit”> | সাবমিট বাটন তৈরি করে ( ফর্ম সাবমিট করা যায় ) |
| <input type=”button”> | ক্লিক করা যায় এমন বাটন তৈরি করে |
আমরা এইচটিএমএল ইনপুট টাইপ এ বিস্তারিত আলোচনা করেছি সব ধরনের ইনপুট টাইপ নিয়ে ।
Text Fields
<input type=”text”> একটি সিংগেল লাইন ইনপুট ফিল্ড তৈরি করে যা দিয়ে টেক্সট ইনপুট দেয়া যায় ।
উদাহরন
টেক্সট ইনপুট দেয়ার জন্য একটি ইনপুট ফিল্ড
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form>
উপরের কোড টি ওয়েব ব্রাউজার এ নিচের মতো দেখাবে ।
ফর্ম নিজেই দৃশ্যমান নয়। এছাড়াও মনে রাখবেন যে একটি ইনপুট ফিল্ডের ডিফল্ট প্রস্থ 20 অক্ষর।
<label> Element
উপরের উদাহরণে <label> এলিমেন্টের ব্যবহার লক্ষ্য করুন।
<label> ট্যাগ অনেক ফর্ম উপাদানের জন্য একটি লেবেল সংজ্ঞায়িত করে।
<label> উপাদানটি স্ক্রিন-রিডার ব্যবহারকারীদের জন্য দরকারী, কারণ ব্যবহারকারী যখন ইনপুট এলিমেন্টের দিকে মনোনিবেশ করবে তখন স্ক্রিন-রিডার উচ্চস্বরে লেবেলটি পড়বে।
<label> এলিমেন্ট ব্যবহারকারীদেরও সাহায্য করে যাদের খুব ছোট অঞ্চলে ক্লিক করতে সমস্যা হয় (যেমন রেডিও বোতাম বা চেকবক্স) – কারণ যখন ব্যবহারকারী <label> এলিমেন্টের মধ্যে লেখায় ক্লিক করে, তখন এটি রেডিও বোতাম/চেকবক্স টগল করে।
<label> ট্যাগের for attribute এর জন্য <input> এলিমেন্টের id অ্যাট্রিবিউট সমান হওয়া উচিত যাতে তাদের একসাথে বাঁধা যায়।
Radio Buttons – রেডিও বাটন
<input type=”radio”> একটি রেডিও বোতাম সংজ্ঞায়িত করে।
রেডিও বোতামগুলি ব্যবহারকারীকে সীমিত সংখ্যক পছন্দের মধ্যে একটি নির্বাচন করতে দেয়।
উদাহরন
রেডিও বাটন সহ একটি ফর্ম:
<p> আপনার পছন্দের Web language টি নির্বাচন করুন :</p> <form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </form>
এইভাবে উপরের HTML কোডটি একটি ব্রাউজারে প্রদর্শিত হবে:
radio button এর name এট্রিবিউট এর ভেলু সবগুলোর একই হয় একটি গ্রুপ এর মধ্যে। একই না হলে সবগুলোর মধ্যে একটি নির্বাচন করতে দেবেনা। সে ক্ষেত্রে প্রতিটি আলাদা ভাবে সিলেক্ট হবে !
Checkboxes – চেকবক্স
<input type=”checkbox”> একটি চেকবক্স সংজ্ঞায়িত করে।
চেকবক্স গুলো সবগুলোই কিংবা যে কোন এক বা একাধিক কিংবা কোনটি নয় এমন ভাবে সিলেক্ট করার অপশন দেয়।
উদাহরন
চেকবক্স সহ একটি ফর্ম
<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form>
নিচের মতো করে উপরের HTML কোডটি একটি ব্রাউজারে প্রদর্শিত হবে:
Submit Button
<input type=”submit”> একটি ফর্ম-হ্যান্ডলারের কাছে ফর্ম ডেটা জমা দেওয়ার জন্য একটি বোতাম সংজ্ঞায়িত করে।
ফর্ম-হ্যান্ডলার সাধারণত সার্ভারে একটি ফাইল যা ইনপুট ডেটা প্রক্রিয়াকরণের জন্য একটি সিসটেম যা সার্ভার ল্যাংগুয়েজ যেমন php বা asp দ্বারা লেখা।
ফর্ম-হ্যান্ডলার ফর্মের action অ্যাট্রিবিউটে নির্দিষ্ট করা আছে: <form action=”/action_page.php”>
উদাহরন
নিচে একটি সাবমিট বাটন সহ ফর্ম এর উদাহরন দেয়া হলো
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Shariar"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Sarkar"><br><br> <input type="submit" value="Submit"> </form>
এইভাবে উপরের HTML কোডটি একটি ব্রাউজারে প্রদর্শিত হবে:
<input> এর name এট্রিবিউট
লক্ষ্য করুন যে প্রতিটি ইনপুট ক্ষেত্রে অবশ্যই জমা দেওয়ার জন্য একটি name বৈশিষ্ট্য(attribute) থাকতে হবে।
যদি name অ্যাট্রিবিউট বাদ দেওয়া হয়, ইনপুট ক্ষেত্রের মান মোটেও সার্ভারে পাঠানো হবে না।
উদাহরন
এই উদাহরণটি “First Name” ইনপুট ফিল্ডের মান জমা দেবে না:
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" value="Shariar"><br><br> <input type="submit" value="Submit"> </form>
নিজে চেষ্টা করুন
এইভাবে উপরের HTML কোডটি একটি ব্রাউজারে প্রদর্শিত হবে:
Web Application তৈরিতে HTML Form এর প্রচুর ব্যবহার হয় । তাই ভবিষ্যতে সার্ভার স্ক্রিপ্ট নিয়ে কাজ করলে কিংবা ওয়েব এপ্লিকেশন নিয়ে কাজ করলে ফর্ম সম্পর্কে ভালো ধারনা নিন ।