X

X

X

HTML Form ইলামেন্টসমূহ


এই অধ্যায়ে সকল ফরম ইনপুট ইলামেন্টের বর্ণনা করা হলো। কাজেই বেশ মনযোগ সহকারে পড়ুন।


<input> ইলামেন্ট

HTML ফরম এ সবচেয়ে গুরুত্বপূর্ণ ইনপুট ইলামেন্ট হলো <input> ইলামেন্ট।

type attribute এর উপর ভিত্তি করে ইনপুট ইলামেন্টকে বিভিন্নভাবে উপস্থাপণ করা যায়। যেমন, চেকবক্স, টেক্সট বক্স, টেক্সটএরিয়া, বাটন, রেডিও ইত্যাদি। এদের সবগুলোকেই ইনপুট ইলামেন্ট দিয়ে তৈরি করতে হয়। কিন্তু তাদের টাইপ ভিন্ন হওয়ার কারণে উপস্থাপণও ভিন্ন হয়।

নিচে ইনপুট ইলামেন্টের সবগুলো টাইপকে উপস্থাপণ করা হলো।

<select> ইলামেন্ট

<select> দিয়ে drop-down list তৈরি করা হয়:

Code Example

<form action="/action_page.php">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

<option> দিয়ে ড্রপডাউন (select element) এর অপশন তৈরি করা হয়। select element এর ভিতরে যতগুলো option ইলামেন্ট তৈরি করা হবে ততগুলো অপশন ড্রপডাউন এ প্রদর্শিত হবে। ডিফল্ট হিসেবে প্রথম অপশন স্বয়ংক্রিয়ভাবে সিলেক্টেড হয়ে যাবে। কিন্তু চাইলে আমরা সিলেক্টেড ইলামেন্টকে পরিবর্তন করতে পারবো।

আগে থেকে কোনো অপশনকে সিলেকট করে রাখার জন্য selected attribute ব্যবহার করতে হবে। যে অপশন ইলামেন্টকে সিলেক্ট করতে হবে , শুধুমাত্র তার জন্য selected attribute ব্যবহার করতে হবে।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


<textarea> ইলামেন্ট

<textarea> ইলামেন্ট দিয়ে প্যারাগ্রাফ আকারে অনেকগুলো টেক্সট লেখা যায়। অর্থাৎ, মাল্টিলাইন টেক্সট ইনপুট নেওয়ার জন্য text area ইলামেন্ট ব্যবহার করা হয়:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

rows attribute দিয়ে ডিফাইন করা হয়, কত লাইন পর্যন্ত ভিজিবল হবে।

cols attribute দিয়ে টেক্সটএরিয়ার প্রস্থ নির্ধারণ করা হয়।

নিচের উদাহরণটি লক্ষ্য করুণ:


<button> ইলামেন্ট

<button> দিয়ে ক্লিকেবল  button তৈরি করা হয়। :

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণটি ব্রাউজারে নিচের মত প্রদর্শিত হবে।


HTML5 Form ইলামেন্টসমূহ

HTML5 এ নিচের ইলামেন্টসমূহ যোগ করা হয়েছে।

  • <datalist>
  • <output>

লক্ষ্যনীয়: ব্রাউজার অপরিচিত ইলামেন্ট প্রদর্শণ করে না। তবে নতুন যেসব ইলামেন্ট পুরোনো ব্রাউজারে সাপোর্ট করে না সেগুলো পেজের কাঠামোতে কোনো প্রভাব ফেলবে না।


HTML5 <datalist> ইলামেন্ট

<datalist> ইলামেন্ট দিয়ে ইনপুট ইলামেন্টের জন্য পূর্ব নির্ধারিত ডেটা সেট করা যায়।

ইউজার যখন ইনপুট ইলামেন্ট ব্যবহার করবে তখন, পূর্ব নির্ধারিত ডেটাগুলো দেখতে পারবে।

list attribute এর মানগুলো ঠিকভাবে প্রদর্শণের জন্য অবশ্যই এর id attribute ব্যবহার করতে হবে, যেটি দিয়ে ডেটা হোল্ডার ইনপুট ইলামেন্ট কে রেফার করা হয়।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML5 <output> ইলামেন্ট

<output> ইলামেন্ট দিয়ে কোনো ক্যালকুলেশন এর মান প্রকাশ করা হয়।
OperaSafariChromeFirefoxInternet Explorer

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Form ইলামেন্টসমূহ

= HTML5 এ নতুন ইলামেন্ট

ট্যাগ বর্ণনা
<form> ইউজারের কাছ থেকে ইনপুট নেওয়ার জন্য ইনপুট বক্স তৈরি করে।
<input> ইনপুট কন্ট্রোল তৈরি করার জন্য ব্যবহৃত হয়।
<textarea> মাল্টিলাইন ইপনুট বক্স তৈরি করার জন্য ব্যবহৃত হয়। (text area)
<label> <input> ইলামেন্ট এর জন্য লেবেল তৈরিতে ব্যবহৃত হয়।
<fieldset> ইনপুট গ্রুপ তৈরি করার জন্য ব্যবহৃত হয়।
<legend> <fieldset> ইলামেন্টের জন্য ক্যাপশন তৈরিতে ব্যবহৃত হয়।
<select> ড্রপডাউন লিস্ট তৈরিতে ব্যবহৃত হয়।
<optgroup> drop-down list এর অপশনগুলোপে গ্রুপ আকারে প্রকাশ করার জন্য ব্যবহৃত হয়।
<option> drop-down list এর অপশন তৈরিতে ব্যবহৃত হয়।
<button> clickable button তৈরিতে ব্যবহৃত হয়।
<datalist> input control এর জন্য পূর্ব নির্ধারিত ডেটালিস্ট তৈরিতে ব্যবহৃত হয়।
<output> কোনো সমীকরণ বা কোনো হিসেবের মান প্রকাশ করার জন্য ব্যবহৃত হয়।