Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

এইচটিএমএল ফর্ম এলিমেন্ট - HTML Form Element


ইনপুট ফিল্ড গুলো হল কোন ফর্মের প্রান, এটা ছাড়া কোন এইচটিএমএল ফর্ম তৈরি হতে পারে না। টিউটোরিয়ালের এই অংশে সকল এইচটিএমএল ফর্ম এলিমেন্ট গুলোর বর্ণনা দেওয়া হয়েছে।

একটি ইনপুট ফিল্ড :


ফর্ম <input> এলিমেন্ট

ফর্ম এলিমেন্টের মধ্যে সবচেয়ে বহুল বাবহ্রিত এলিমেন্ট হচ্ছে <input> এলিমেন্ট। type এট্রিবিউটের মানের উপর নির্ভর করে <input> এলিমেন্ট বিভিন্ন হয়।

উদাহরণ


<input type="text" name="fullname" id="fullname" >

কোড এডিটর


নোট - যদি type এট্রিবিউট নির্ধারণ করা নয়া হয় তবে, স্বয়ংক্রিয়ভাবে type:text নির্ধারিত হয়।

এইচটিএমএল <input> ট্যাগ সম্পর্কে জানতে W3C এর 4.3.10.4 The input element ওয়েব পেজটি ব্রাউজ করুন।


ফর্ম <select> এলিমেন্ট

<select> এলিমেন্ট ব্যবহার করে কোন ড্রপ-ডাউন লিস্ট তৈরি করা হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<select name="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="mango">Mango</option>
  <option value="lichi">Lichi</option>
</select>

কোড এডিটর


<option> এলিমেন্টটি যেকোন একটি এলিমেন্টকে পূর্ব থেকেই সিলেক্ট করে রাখার জন্য ব্যবহার করা হয়। এর ফলে স্বয়ংক্রিয়ভাবে, ড্রপ ডাউন তালিকার কোডে লেখা প্রথম আইটেমটি নির্বাচিত হয়ে থাকে। পূর্ব থেকে কোন মান নির্ধারণ করে রাখার জন্য selected আত্ত্রিবুত ব্যবহার করা জায়। নিছে এর একটি উদাহরন দেখুন।

উদাহরণ


<option value="banana" selected>Banana</option>

কোড এডিটর


এইচটিএমএল <option> ট্যাগ সম্পর্কে জানতে W3C এর 4.3.10.9 The option element ওয়েব পেজটি ব্রাউজ করুন।

দৃশ্যমান মান

কোন আইটেমকে আগে থেকে নিরধারন বা select করে দৃশ্যমান করে রাখতে চাইলে size এট্রিবিউট ব্যবহার করে দৃশ্যমান আইটেমের সংখ্যা নিরধারন করে দেয়া যায়। নিচে একটি উদাহরন দেখুন।

উদাহরণ


<select name="fruit" size="3">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="lichi">Lichi</option>
</select>

কোড এডিটর


একাধিক মান নির্ধারণ করা

ইউজারকে একাধিক মান নির্ধারণ করার মত সুবিধা দিতে চাইলে নিচের কোড গুলো ব্যবহার করতে হবে। এখানে ইউজার নিজের ইছহা মত একাধিক আইটেম নির্বাচন করতে পারে। এর জন্য multiple এট্রিবিউট ব্যবহার করতে হবে।

উদাহরণ


<select name="fruit" size="3" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="mango">Mango</option>
  <option value="lichi">Lichi</option>
</select>

কোড এডিটর



<textarea> এলিমেন্ট

ইউজার থেকে বড় কোন মন্তব্য বা কমেন্ট পাবার জন্য টেক্সট এরিয়া তৈরি করা হয়। টেক্সট এরিয়ার ভেতরে কোন কিছু লিখলে তা ওয়েব পেজের টেক্সট এরিয়াতে দেখা যায়। টেক্সট এরিয়ার ওপেনিং এবং ক্লোজিং ট্যাগ রয়েছে।

rows এবং cols এট্রিবিউট ব্যবহার করে টেক্সট এরিয়ার সাইজ নির্ধারণ করা হয়। rows এবং cols এর মান বা value হিসেবে গানিতিক সংখ্যা বা newmerical value দেয়া হয়। এই এট্রিবিউট দুটি লেখার নিয়ম হল -
rows=”5” এবং cols=”8”
নীচে একটি উদাহরন দেখুন -

উদাহরণ


<form>
  First name: &l;tinput type="text" name="firstname" /> <br />
  Last name: <input type="text" name="lastname" />
</form>

কোড এডিটর


সিএসএস ব্যবহার করেও টেক্সট এরিয়া এর দৈর্ঘ্য ও প্রস্থ অর্থাৎ আকার নিরধার করা যায়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<textarea name="message" style="width:400px; height:200px">
The boy was playing in the fild.
</textarea>

কোড এডিটর



<button> এলিমেন্ট

<button> এলিমেন্ট ব্যবহার করে একটি ক্লিকযোগ্য বাটন তৈরি করা যায়, যা সার্ভারে ফর্মের তথহ প্রেরণ করে। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<button type="button" onclick="alert('Good day !!')">Click Me!</button>

কোড এডিটর


উপরের উদাহরণটিতে একটি এলার্ট দেখানো হয়েছে যা একটি ইভেন্ট ব্যবহার করে তৈরি করা হয়েছে। ইভেন্ট সম্পর্কে আরো জানতে আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়াল দেখুন।


<datalist> এলিমেন্ট

<input> এলিমেন্টের জন্য পূর্বনির্ধারিত অপশনের একটি তালিকা তৈরি করতে <datalist> এলিমেন্ট ব্যবহার করা হয়। এর ফলে ইনপুট ফিল্ডে তথ্য ইনপুট করতে থাকলে পূর্বনির্ধারিত অপশনের ড্রপ-ডাউন লিস্ট দেখা যায়।

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

উদাহরণ


<form action="/action_page.php">
<input list="flowers">
<datalist id="flowers">
<option value="Rose">
<option value="Sun-flower">
<option value="China Rose">
<option value="Marigold">
<option value="Tulip">
</datalist>
</form>

কোড এডিটর


নোট - সাফারি অথবা IE9 ও এর পূর্ববর্তী সংস্করণ গুলো ডাটালিস্ট ট্যাগ সমরথন বা support করে না।


<output> এলিমেন্ট

কোন গাণিতিক গণনার ফলাফল <output> এলিমেন্ট ব্যবহার করে করা হয়। এই গণনা করা হয় সাধারণত কোন স্ক্রিপ্ট ব্যবহার করে। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


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

কোড এডিটর


এইচটিএমএল <output> ট্যাগ সম্পর্কে জানতে W3C এর 4.3.10.11 The output element ওয়েব পেজটি ব্রাউজ করুন।


এইচটিএমএল ফর্ম ট্যাগ

ট্যাগ বর্ণনা
<form> এই ট্যাগ একটি ফর্ম তৈরি করে
<input> ফর্মের মধ্যে তথ্য প্রদান বা সংরহের জন্য ইনপুট ঘর বা box তৈরি করে
<textarea> দীর্ঘ বা একাধিক লাইন বিশিষ্ট তথ্য ইনপুট করার জন্য একটি ঘর বা box তৈরি করা হয়
<label> <input> এলিমেন্টের জন্য কোন শিরোনাম বা caption নির্ধারণ করে
<fieldset> ফর্ম এলিমেন্টকে কোন শ্রেনীতে ভাগ করে
<legend> <fieldset> এলিমেন্তের জন্য একটি শিরোনাম বা caption তৈরি করে
<select> ড্রপ-ডাউন লিস্ট ( drop-down list) তৈরি করে।
<optgroup> কোন ড্রপ-ডাউন লিস্টকে বিভিন্ন শ্রেনীতে ভাগ করা হয়।
<option> ড্রপ-ডাউন লিস্টের জন্য option তৈরি করে
<button> কোন বাটন তৈরি করে।
<datalist> কোন ইনপুট মানের জন্য আগের থেকে নির্ধারিত option এর লিস্ট তৈরি করে
<output> কোন গাণিতিক ফলাফল প্রদর্শন করা হয়