এইচটিএমএল ফর্ম ইনপুট টাইপ - HTML Form Input Type


টিউটোরিয়ালের এই অংশে <input> এলিমেন্টের type এট্রিবিউটের বিভিন্ন মান সম্পর্কে আলোচনা করা হয়েছে।


type এট্রিবিউটের মান বা value

<input> এলিমেন্টের type এট্রিবিউটের জন্য অনেক প্রকার মান বা value নির্ধারণ করা যায়, যেমন - text, button, checkbox, password, submit, email ইত্তাদি। নিছে এই সকল প্রকার মানের সিনট্যাক্স দেখুন।

সিনট্যাক্স


<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

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


type:text

এক লাইনের একটি টেক্সট বক্স তৈরি করতে <input type="text"> কোড ব্যাবহার করা হয়। এইচটিএমএল ফরমে সর্বাধিক বাবহ্রিত হল এই কোডটি। নিছে এর একটি উদাহরন দেখুন।

উদাহরণ


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

কোড এডিটর



type="password

টেক্সট ফিল্ডের সমস্ত এট্রিবিউট পাসওয়ার্ড ফিল্ডের জন্য প্রযোজ্য। পাসওয়ার্ড ফিল্ডের ক্ষেত্রে শুধুমাত্র টাইপ ( type ) এট্রিবিউটের পরিবর্তন হবে, অন্য সব এট্রিবিউট টেক্সট ফিল্ডের মতই হবে। এখানে পাসওয়ার্ড ফিল্ডের টাইপ হবে পাসওয়ার্ড যেমন -

সিনট্যাক্স

type=”passward”
 

নীচে একটি উদাহরন দেখুন -

উদাহরণ


<form>
Password: <input type="password" name="pass" />
</form>

কোড এডিটর


নোট - কোন পাসওয়ার্ড ক্ষেত্রের অক্ষরগুলো তারকা চিহ্ন বা বৃত্ত হিসাবে প্রদর্শিত হয়।


type:submit

ফর্মে ইনপুট করা তথ্য গুলো সার্ভারে প্রেরন করার জন্য একটি সাবমিট বাটন ব্যবহার করা হয়। এই সাবমিট বাটন তৈরি করতে <input type="submit"> কোড ব্যবহার করা হয়।
সার্ভার এর পেজটি ইনপুট এলিমেন্টের তথ্য গুলোকে execute করে। তারপর ফর্মের action এট্রিবিউট সার্ভার পেজটিকে পরবর্তী ধাপে পাঠায়।

উদাহরণ


<form action="/action_page.php">
  First name:<br />
  <input type="text" name="firstname" value="Bugs"><br />
  Last name:<br />
  <input type="text" name="lastname" value="Bunny"><br /><br />
  <input type="submit" value="Submit">
</form>

কোড এডিটর


উধাহরণে সাবমিট বাটনে ক্লিক করার পর ফর্মের তথ্য গুলো "action_page" নামে ".php" extension যুক্ত পেজে যাবে। এখানে যদি কোন মান না থাকে অর্থাৎ মান বাদ দেয়া হয় তবে স্বয়ংক্রিয়ভাবে ঐ ওয়েব পেজেই action সম্পন্ন হবে।

উদাহরণ


<form action="/action_page.php">
  First name:<br />
  <input type="text" name="firstname" value="Bugs"><br />
  Last name:<br />
  <input type="text" name="lastname" value="Bunny"><br /><br />
  <input type="submit">
</form>

কোড এডিটর



type="reset"

পূরণকৃত ফর্মকে আবার রিসেট করতে হলে <input type="reset"> ব্যবহার করতে হয়। এই বাটন ক্লিক করলে ফর্মের সকল ফিল্ডে তাদের স্বয়ংক্রিয় মান প্রদর্শিত হয়।

উদাহরণ


<form action="/action_page.php">
  First name:<br />
  <input type="text" name="firstname" value="Bugs"><br />
  Last name:<br />
  <input type="text" name="lastname" value="Bunny"><br /><br />
  <input type="submit" value="Submit">
  <input type="reset">
</form>

কোড এডিটর


নোট - এই বাটন ক্লিক করলে ফর্মের সকল ফিল্ডে তাদের স্বয়ংক্রিয় মান প্রদর্শিত হয়।


type="radio"

একাধিক অপশন থেকে যে কোন একটি মাত্র অপশন সিলেক্ট করার জন্য রেডিও বাটন তৈরি করা হয়। রেডিও বাটন তৈরি করার জন্য input ট্যাগের সাথে যেসকল এট্রিবিউট ব্যবহার করা যায় তা হল type, name এবং value. Checked এট্রিবিউট ব্যবহার করে আপনি আগে থেকেই অর্থাৎ ডিফল্ট মান হিসেবে একটি রেডিও বাটন সিলেক্ট করে রাখতে পারেন। এর মান বা value হল yes. এটি লেখার নিয়ম হল -

সিনট্যাক্স

checked=”yes”
 

নীচে এর একটি উদাহরন দেয়া হল।

উদাহরণ


<form>
  <input type="radio" name="sex" value="male" /> Male <br />
  <input type="radio" name="sex" value="female" /> Female
</form>

কোড এডিটর



type:checkbox

টিক চিহ্ন দিয়ে অপসন সিলেক্ট করার জন্য চেকবক্স তৈরি করা হয়। আপনি এখানে যে কোন একটি বা একাধিক বাটন সিলেক্ট করার ব্যাবস্থা করতে পারেন। চেকবক্সের জন্য আপনি যেসকল এট্রিবিউট ব্যবহার করতে পারেন তা হল type,name এবং value. নীচে এগুলোর বর্ণনা দেয়া হল -

নীচে একটি উদাহরন দেখুন -

উদাহরণ


<form>
  <input type="checkbox" name="Flower" value="Sun-flower" /> Sun-flower <br />
  <input type="checkbox" name="Flower" value="Marigold" /> Marigold
</form>

কোড এডিটর



type:button

কোন ইনপুট ফিল্ডকে ক্লিক যোগ্য বাটন রুপে তৈরি করতে <input type="button"> কোড ব্যবহার করা হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<input type="button" onclick="alert('Good day to you !')" value="Click Me!">

কোড এডিটর



এইচটিএমএল ৫ এর নতুন ইনপুট টাইপ

এইচটিএমএল ৫.০ এ নতুন যে সকল ইনপুট টাইপ যোগ করা হয়েছে, নিচে এদের নাম দেখুন -

নোট - এইচটিএমএল ৫.০ এর নতুন ইনপুট টাইপ গুলো যে সকল পুরনো ব্রাউজারে সমরথন বা support করে না সেসকল ক্ষেত্রে <input type="text"> এর মত আচরণ করবে।

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


type="color"

<input type="color"> ব্যবহার করে হেক্সাডেসিম্যাল মানের মাধ্যমে রঙের মান ইনপুট দিতে এই আত্ত্রিবুত ব্যাবহার করা হয়। ব্রাউজার support এর ওপর নির্ভর করে ইনপুট ফিল্ডে একটি কালার পিকার প্রদর্শন হয়।

উদাহরণ


<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

কোড এডিটর



type="datetime-local"

কোন টাইম জোন ও স্থানীয় সময় বাদে তারিখ এর ইনপুট ফিল্ড তৈরি করতে <input type="datetime-local"> ব্যবহার করা হয়। ব্রাউজার support এর ওপর নির্ভর করে ইনপুট ফিল্ডে একটি ডেট পিকার প্রদর্শিত হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

কোড এডিটর



type="date"

<input type="date"> ব্যবহার করা হয় এমন সব ক্ষেত্রে যে সকল ফিল্ডে তারিখ থাকে। ব্রাউজার support এর ওপর নিরভর করে ইনপুট ফিল্ডে একটি ডেট পিকার প্রদর্শিত হয়।

উদাহরণ


<form>
  Birthday:
  <input type="date" name="bday">
</form>

কোড এডিটর


min এবং max এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডে তারিখের সীমাবদ্ধতা নির্ধারণ করে দেয়া যায়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br />
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br />
</form>

কোড এডিটর



type="month"

<input type="month"> ব্যবহার করে এমন একটি ইনপুট ফিল্ড তৈরি করা যায়, যেখানে মাস এবং বছর ইনপুট করা যায়। ব্রাউজার support এর ওপর নিরভর করে ইনপুট ফিল্ডে একটি ডেট পিকার প্রদর্শিত হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

কোড এডিটর



type="email"

<input type="email"> ব্যবহার করা হয় এমন একটি ইনপুট ফিল্ড তইরি করার জন্য জেটা একটি ই-মেইল এড্রেস ধারন করে। ব্রাউজার support এর ওপর নিরভর করে ই-মেইল এড্রেসটি স্বয়ংক্রিয়ভাবেই ভ্যালিডেট হয়।

কিছু স্মার্টফোন স্বয়ংক্রিয়ভাবে ই-মেইল ইনপুট ফিল্ড ছিন্তে পারে এবং কিবোর্ডে ".com" নামে একটি বাটন যোগ করে।

উদাহরণ


<form>
  E-mail:
  <input type="email" name="email">
</form>

কোড এডিটর



type="file"

<input type="file"> ব্যবহার করে কোন ফাইল আপলোড করার জন্য "Browse" নামে একটি বাটন তইরি করা হয়। এই বাতনে ক্লিক করলে ফাইল নির্বাচন করার জন্য একটি উইন্ডো প্রদর্শিত হয়।

উদাহরণ


<form>
  Select a file: <input type="file" name="myFile">
</form>

কোড এডিটর



type="number"

<input type="number"> ব্যবহার করে এমন কোন ইনপুট ফিল্ড তৈরি করা যায়, যা কেবল গাণিতিক সংখ্যা ইনপুট হিসেবে গ্রহন করে। এই ইনপুট ফিল্ডে সীমাবদ্ধতাও করে দেয়া যায়।

নিচে একটি উদাহরন দেখুন, এখানে ইনপুট ফিল্ডে কেবল মাত্র ১ থেকে ৯ পর্যন্ত সংখ্যা গুলোই ইনপুট করা যায়।

উদাহরণ


<form>
  Quantity (between 1 and 9):
  <input type="number" name="quantity" min="1" max="9">
</form>

কোড এডিটর



ইনপুট সীমাবদ্ধতা

নিচে টেবিলে কত গুলো সাধারন ইনপুট সীমাবদ্ধতা দেয়া হল, এর মাঝে কত গুলো আবার এইচটিএমএল ৫ এ নতুন।

এট্রিবিউট বর্ণনা
disabled কোন ইনপুট ফিল্ড disable করা উচিৎ সেটা নির্ধারণ করে।
max কোন ইনপুট ফিল্ডের ইনপুট করার মত সবরছহ মান নির্ধারণ করে।
maxlength কোন ইনপুট ফিল্ডের ইনপুট করার মত সরবছহ ক্যারেক্টার সংখ্যা নির্ধারণ করে।
min কোন ইনপুট ফিল্ডের ইনপুট করার মত সর্বনিম্ন মান নির্ধারণ করে।
pattern ইনপুট করা মান, সাধারন মানের সাথে তুলনা করে।
readonly কোন ইনপুট ফিল্ড পরিবর্তন করা যাবে না অর্থাৎ কেবল মাত্র পরা যাবে, তা নির্ধারণ করে।
required কোন ইনপুট ফিল্ড অবশ্যই পূরণ করা উচিৎ সেটা নির্ধারণ করে।
size কোন ইনপুট ফিল্ডের দৈর্ঘ্য নির্ধারণ করে।
step কোন ইনপুট ফিল্ডের সংখ্যা গুলোর অন্তর নির্ধারণ করে।
value কোন ইনপুট ফিল্ডের স্বয়ংক্রিয় মান নির্ধারণ করে।

ইনপুট সীমাবদ্ধতা সম্পর্কে পরবর্তী অধ্যায়ে আরও আলোচনা করা হয়েছে।

নিচের উদাহরনে একটি গাণিতিক ইনপুট ফিল্ড তৈরি করা হয়েছে, যেখানে 0 থেকে 100 পর্যন্ত সংখ্যা নির্ধারণ করা যায়, প্রতি 5 পর পর মান পরিবর্তন করা যায় এবং স্বয়ংক্রিয় মান হল 30.

উদাহরণ


<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

কোড এডিটর



type="tel"

<input type="tel"> ব্যবহার করে কোন টেলিফোন নাম্বার লেখার জন্য ইনপুট ফিল্ড তৈরি করা হয়।

উদাহরণ


<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

কোড এডিটর


নোট - type="tel" বর্তমানে কেবলমাত্র সাফারি ৮ সংস্করণেই বা version এ সমর্থন করে।


type="range"

<input type="range"> ব্যবহার করে এমন একটি নম্বর লিখা যায়, যার সঠিক মানটি গুরুত্বপূর্ণ নয় (যেমন একটি স্লাইডার কন্ট্রোল)। এর স্বয়ংক্রিয় মান হল 0 থেকে 100, তবে এর সাথে min, max এবং step এট্রিবিউট ব্যবহার করে বিধিনিষেধ তৈরি করা যায়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<form>
  <input type="range" name="points" min="0" max="10">
</form>

কোড এডিটর



type="search"

<input type="search"> ব্যবহার করে কোন সার্চ ফিল্ড তৈরি করা হয়, এটা দেখতে সাধারন টেক্সট ফিল্ডের মতই হয়।

উদাহরণ


<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

কোড এডিটর



type="time"

<input type="time"> ব্যবহার করে এমন একটি ইনপুট ফিল্ড তৈরি করা যায়, যেখানে কোন টাইম জোন বাদেই সময় বা time ইনপুট করা যায়। ব্রাউজার support এর ওপর নির্ভর করে ইনপুট ফিল্ডে একটি টাইম পিকার প্রদর্শিত হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

কোড এডিটর



type="url"

<input type="url"> ব্যবহার করে এমন একটি ইনপুট ফিল্ড তৈরি করা হয়, যেটা কোন URL ধারন করতে পারে। ব্রাউজার support এর ওপর নিরভর করে URLটি স্বয়ংক্রিয়ভাবেই ভ্যালিডেট হয়।

কিছু স্মার্টফোন স্বয়ংক্রিয়ভাবে ই-মেইল ইনপুট ফিল্ড ছিন্তে পারে এবং কিবোর্ডে ".com" নামে একটি বাটন যোগ করে।

উদাহরণ


<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

কোড এডিটর



name="week"

<input type="week"> ব্যবহার করে আমন একটি ইনপুট ফিল্ড তৈরি করা যায়, যেটাতে সপ্তাহ এবং বছর নির্ধারণ করা যায়। ব্রাউজার support এর ওপর নির্ভর করে ইনপুট ফিল্ডে একটি ডেট পিকার প্রদর্শিত হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<form>
  Select a week:
  <input type="week" name="week_year">
</form>

কোড এডিটর