ফর্ম এলিমেন্ট

এই অধ্যায়ে সমস্ত HTML ফর্ম এলিমেন্ট গুলো বর্ণনা করা হবে।

HTML <form> Elements

HTML <form> এলিমেন্টে নিম্নলিখিত এক বা একাধিক ফর্ম উপাদান থাকতে পারে:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

<input> ইনপুট এলিমেন্ট

সর্বাধিক ব্যবহৃত ফর্ম উপাদানগুলির মধ্যে একটি হল <input> উপাদান।

<input> উপাদানটি বিভিন্ন উপায়ে প্রদর্শিত হতে পারে, টাইপ অ্যাট্রিবিউটের উপর নির্ভর করে।

উদাহরন

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

নিজে চেষ্টা করুন

সব ধরনের টাইপ নিয়ে এর পরের অধ্যায় ইনপুট টাইপ এ আলোচনা করা হয়েছে ।

<label> Element

<label> এলিমেন্ট টি বিভিন্ন ফর্ম এলিমেন্ট গুলোর জন্য একটি লেবেল সংজ্ঞায়িত করে।

<label> উপাদানটি স্ক্রিন-রিডার ব্যবহারকারীদের জন্য দরকারী, কারণ ব্যবহারকারী যখন ইনপুট এলিমেন্টের দিকে মনোনিবেশ করবে, তখন স্ক্রিন-রিডার উচ্চস্বরে লেবেল পড়বে।

আবার যারা ছোট জিনিসে(বিশেষ করে রেডিও বাটন কিংবা চেকবক্স এ)  ক্লিক করতে সমস্যা বোধ করে তাদের জন্য ও <label> উপাদানটি  কাজে আসে কারন যখন কেউ <label> উপাদানটিতে ক্লিক করে, তখন এটি যে ফর্ম এলিমেন্টের জন্য করা, সেটিকে সিলেক্ট/হাইলাইট করে ।

<label> ট্যাগের for attribute এর জন্য <input> এলিমেন্টের id অ্যাট্রিবিউট সমান হওয়া উচিত যাতে তাদের একসাথে বাঁধা যায়।

<select> Element  ড্রপআউন লিস্ট

<select> উপাদান একটি ড্রপ-ডাউন তালিকা সংজ্ঞায়িত করে:

উদাহরন

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

নিজে চেষ্ঠা করুন

উপরের কোড নি নিচের মতো দেখাবে

<option> উপাদানগুলি একটি বিকল্প নির্ধারণ করে যা নির্বাচন করা যায়।

ডিফল্টরূপে, ড্রপ-ডাউন তালিকার প্রথম আইটেমটি নির্বাচন করা হয়।

তবে অন্য কোন অপশন কে আগে  থেকে সিলেক্ট করে রাখার জন্য selected  অ্যাট্রিবিউট যুক্ত করতে হয় ।

<option value="fiat" selected>Fiat</option>

নিজে চেষ্টা করুন

Visible Values:

ডিফল্ট ভাবে অপশন থেকে মাত্র একটি ভেলু দৃশ্যমান(Visible) থাকে। তবে size অ্যাট্রিবিউট ব্যবহার করে এই সংখ্যা বাড়ানো যায় । নিচের উদাহরন টি দেখুন

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
  <option value="toyota">Toyota</option>
  <option value="mitsubishi">Mitsubishi</option>
</select>

নিজে চেষ্ঠা করুন

একাধিক সিলেকশন Multiple Selections

ইউজার কে একাধিক অপশন নির্বাচন করার অনুমতি দিতে multiple অ্যাট্রিবিউট ব্যবহার করুন:

<select id="cars" name="cars" size="6" multiple> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="fiat">Fiat</option> 
    <option value="audi">Audi</option> 
    <option value="toyota">Toyota</option> 
    <option value="mitsubishi">Mitsubishi</option> 
</select>

নিজে চেষ্ঠা করুন

<textarea> Element

<textarea> উপাদান একটি মাল্টি-লাইন ইনপুট ক্ষেত্র (একটি টেক্সট এরিয়া) সংজ্ঞায়িত করে:

উদাহরন

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

নিজে চেষ্টা করুন

row অ্যাট্রিবিউট একটি টেক্সট এলাকায় লাইনের দৃশ্যমান সংখ্যা নির্দিষ্ট করে।

cols অ্যাট্রিবিউট একটি পাঠ্য এলাকার দৃশ্যমান প্রস্থ নির্দিষ্ট করে।

এইভাবে উপরের HTML কোডটি একটি ব্রাউজারে প্রদর্শিত হবেঃ

আপনি CSS ব্যবহার করে টেক্টট এরিয়ার আকার নির্ধারণ করতে পারেন:

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

নিজে চেষ্টা করুন

<button> Element

<button> উপাদানটি একটি ক্লিকযোগ্য বোতাম সংজ্ঞায়িত করে:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

নিজে চেষ্টা করুন

এইভাবে উপরের HTML কোডটি একটি ব্রাউজারে প্রদর্শিত হবে:

button এলিমেন্ট এর type অ্যাট্রিবিউট সব সময় নির্দিষ্ট করুন। বিভিন্ন ব্রাউজার বাটন এলিমেন্টের জন্য বিভিন্ন ডিফল্ট ধরনের ব্যবহার করতে পারে।

<fieldset> এবং <legend> Elements

<fieldset> উপাদানটি একটি ফর্মের সাথে সম্পর্কিত ডেটা গ্রুপিং করতে ব্যবহৃত হয়।

<legend> এলিমেন্ট <fieldset> এলিমেন্টের জন্য একটি ক্যাপশন নির্ধারণ করে।

<form action="/action_page.php"> 
  <fieldset>
    <legend>Address:</legend>
    <label for="thana">Police Station:</label><br>
    <input type="text" id="thana" name="thana" value="Birampur"><br>
    <label for="dist">District:</label><br>
    <input type="text" id="dist" name="dist" value="Dinajpur"><br> 
    <label for="division">Division:</label><br>
    <input type="text" id="division" name="division" value="Rangpur"><br> 
  </fieldset><br>  
  <input type="submit" value="Submit">
</form>

নিজে চেষ্টা করুন

এইভাবে উপরের HTML কোডটি একটি ব্রাউজারে প্রদর্শিত হবে:

<datalist> Element

<datalist> এলিমেন্ট <input> এলিমেন্টের জন্য পূর্বনির্ধারিত বিকল্পগুলির একটি তালিকা নির্দিষ্ট করে।

ব্যবহারকারীরা ডেটা ইনপুট করার সময় পূর্বনির্ধারিত বিকল্পগুলির একটি ড্রপ-ডাউন তালিকা দেখতে পাবেন।

<input> এলিমেন্টের list অ্যাট্রিবিউট, অবশ্যই <datalist> এলিমেন্টের id অ্যাট্রিবিউট উল্লেখ করতে হবে।

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

নিজে চেষ্টা করুন

<output> Element

<output> ফর্ম এলিমেন্ট টি একটি গণনার ফলাফল উপস্থাপন করে (যেমন একটি স্ক্রিপ্ট দ্বারা সম্পাদিত)।

উদাহরন

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

নিজে চেষ্টা করুন

এইচটিএমএল ফর্ম এলিমেন্ট