HTML ইনপুট টাইপ

এই চাপটি <input> ইলেকট্রন টাইপের বর্ণনা করে

ইনপুট টাইপ: text

<input type="text"> সংজ্ঞায়িত করা হয়টেক্সট ইনপুটএর একলাইন ইনপুট ফিল্ড:

উদাহরণ

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

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

উপরোক্ত HTML কোড ব্রাউজারে এইভাবে দেখানো হবে:

First name:


Last name:

ইনপুট টাইপ: password

<input type="password"> নির্দিষ্টপাসওয়ার্ড ফিল্ড：

উদাহরণ

<form>
 ইউজার নাম:<br>
<input type="text" name="username">
<br>
 ইউজার পাসওয়ার্ড:<br>
<input type="password" name="psw">
</form>

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

উপরোক্ত HTML কোড ব্রাউজারে এইভাবে দেখানো হবে:

ইউজার নাম:


ইউজার পাসওয়ার্ড:

মন্তব্য:পাসওয়ার্ড ফিল্ডের অক্ষরগুলি মাস্কিং প্রক্রিয়ার মাধ্যমে প্রদর্শিত হবে (তারকা বা ঘন বোল)

ইনপুট টাইপ: submit

<input type="submit"> নির্দিষ্টজমাফর্ম ডাটা পর্যন্তফর্ম হ্যান্ডলারবুটন

ফর্ম হ্যান্ডলার (form-handler) সাধারণত ইনপুট ডাটা প্রক্রিয়াজাতকরণ করা স্ক্রিপ্ট ধারণকারী সার্ভার পেজ

In the action attribute of the form, specify the form handler (form-handler):

উদাহরণ

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

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

উপরোক্ত HTML কোড ব্রাউজারে এইভাবে দেখানো হবে:

First name:


Last name:


If you omit the value attribute of the submit button, then the button will get the default text:

উদাহরণ

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

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

Input Type: radio

<input type="radio"> Radio button defines.

Radio buttons let a user select ONLY ONE of a limited number of choices:

উদাহরণ

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

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

উপরোক্ত HTML কোড ব্রাউজারে এইভাবে দেখানো হবে:

Male

Female

Input Type: checkbox

<input type="checkbox"> চিহ্নিক বাক্সকে নির্দিষ্ট করুন。

চিহ্নিক বাক্স ব্যবহারকারীকে সীমিত সংখ্যক বিকল্পের মধ্যে কোনটিও বা একাধিক বিকল্প নির্বাচন করতে অনুমতি দেয়。

উদাহরণ

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

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

উপরোক্ত HTML কোড ব্রাউজারে এইভাবে দেখানো হবে:

I have a bike

I have a car

Input Type: button

<input type="button"> নির্দিষ্টবাটন。

উদাহরণ

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

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

উপরোক্ত HTML কোড ব্রাউজারে এইভাবে দেখানো হবে:

HTML5 ইনপুট টাইপ

HTML5-এ বেশ কিছু নতুন ইনপুট টাইপ যোগ করা হয়েছে:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

মন্তব্য:পুরনো ওয়েব ব্রাউজারগুলি এই ইনপুট টাইপকে টেক্সট ইনপুট হিসাবে দেখবে

ইনপুট টাইপ: number

<input type="number"> যেখানে সংখ্যার মান থাকা উচিত ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়。

আপনি সংখ্যার সীমা নির্ধারণ করতে পারেন。

ব্রাউজারের সমর্থন অনুযায়ী, সীমানা ইনপুট ফিল্ডে লাগানো যেতে পারে。

উদাহরণ

<form>
  পরিমাণ (১ থেকে ৫):
  <input type="number" name="quantity" min="1" max="5">
</form>

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

ইনপুট সীমানা

এখানে সাধারণত ব্যবহৃত ইনপুট সীমানা উপস্থাপিত হয় (যার মধ্যে কিছু এইচটিএমএল৫-এ নতুন হয়েছে):

বৈশিষ্ট্য বর্ণনা
disabled ইনপুট ফিল্ডটিকে নিষ্ক্রিয় করুন
max ইনপুট ফিল্ডের সর্বোচ্চ মান
maxlength ইনপুট ফিল্ডের সর্বোচ্চ অক্ষর সংখ্যা
min ইনপুট ফিল্ডের ন্যূনতম মান
pattern ইনপুট মানের পরীক্ষা করার জন্য ব্যবহৃত প্রাকৃতিক বাক্যাংশ
readonly ইনপুট ফিল্ডটিকে অপসারণযোগ্য (পরিবর্তন করা যাবে না)
required ইনপুট ফিল্ডটিকে বাধ্যতামূলক (বাধ্যতামূলক পূর্ণ করুন)
size ইনপুট ফিল্ডের প্রস্থ (অক্ষরে অনুমানিত)
step ইনপুট ফিল্ডের বৈধ সংখ্যার অনুমোদিত সীমা নির্ধারণ করুন。
value ইনপুট ফিল্ডের ডিফল্ট মান নির্ধারণ করুন。

আপনি পরবর্তী চাপে ইনপুট সীমানা সম্পর্কে আরও বেশি জানবেন。

উদাহরণ

<form>
  পরিমাণ:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

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

ইনপুট টাইপ: date

<input type="date"> যেখানে তারিখ থাকা উচিত ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়。

ব্রাউজারের সহায়তা অনুযায়ী, তারিখ চিহ্নিতকারক ইনপুট ফিল্ডে দেখা যাবে。

উদাহরণ

<form>
  জন্মদিন:
  <input type="date" name="bday">
</form>

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

আপনি ইনপুটে সীমানা যোগ করতে পারেন:

উদাহরণ

<form>
  আপনি ১৯৮০-০১-০১ পূর্বের তারিখ ইনপুট করুন:
  <input type="date" name="bday" max="1979-12-31"><br>
  2000-01-01 পরের তারিখ ভরো নয়:
  Enter a date after 2000-01-01:<br>
</form>

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

ইনপুট ধরন: color

<input type="color"> এমন ইনপুট ফিল্ডগুলি ব্যবহার করা যায় যাতে রঙ থাকে。

ব্রাউজারের সহায়তা অনুযায়ী, রঙ চিহ্নিতকারক ইনপুট ফিল্ডে দেখা যাবে。

উদাহরণ

<form>
  আপনার পছন্দের রঙ নির্বাচন করুন:
  <input type="color" name="favcolor">
</form>

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

ইনপুট ধরন: range

<input type="range"> এমন ইনপুট ফিল্ডগুলি ব্যবহার করা যায় যাতে একটি বিশেষ সীমাবদ্ধ সময়ের মধ্যে মান থাকে。

ব্রাউজারের সহায়তা অনুযায়ী, ইনপুট ফিল্ডটি স্লাইডার কন্ট্রোল হিসাবে দেখা যাবে。

উদাহরণ

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

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

এমন বৈশিষ্ট্যগুলি ব্যবহার করে আপনি সীমাবদ্ধ করতে পারেন: min, max, step, value。

ইনপুট ধরন: month

<input type="month"> ব্যবহারকারীকে মাস ও বছর নির্বাচন করতে দেয়。

ব্রাউজারের সহায়তা অনুযায়ী, তারিখ চিহ্নিতকারক ইনপুট ফিল্ডে দেখা যাবে。

উদাহরণ

<form>
  জন্মদিন (মাস ও বছর):
  <input type="month" name="bdaymonth">
</form>

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

ইনপুট ধরন: week

<input type="week"> ব্যবহারকারীকে সপ্তাহ ও বছর নির্বাচন করতে দেয়。

ব্রাউজারের সহায়তা অনুযায়ী, তারিখ চিহ্নিতকারক ইনপুট ফিল্ডে দেখা যাবে。

উদাহরণ

<form>
  একটি সপ্তাহ নির্বাচন করুন:
  <input type="week" name="week_year">
</form>

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

ইনপুট ধরন: time

<input type="time"> ব্যবহারকারীকে সময় নির্বাচন করতে দেয় (সময়ক্ষেত্র নেই)。

ব্রাউজারের সহায়তা অনুযায়ী, সময় চিহ্নিতকারক ইনপুট ফিল্ডে দেখা যাবে。

উদাহরণ

<form>
  একটি সময় নির্বাচন করুন:
  <input type="time" name="usr_time">
</form>

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

ইনপুট ধরন: datetime

<input type="datetime"> ব্যবহারকারীকে তারিখ ও সময় নির্বাচন করতে দেয় (সময়ক্ষেত্র আছে)。

ব্রাউজারের সহায়তা অনুযায়ী, তারিখ চিহ্নিতকারক ইনপুট ফিল্ডে দেখা যাবে。

উদাহরণ

<form>
  জন্মদিন (তারিখ ও সময়):
  <input type="datetime" name="bdaytime">
</form>

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

ইনপুট ধরন: datetime-local

<input type="datetime-local"> ব্যবহারকারীকে তারিখ ও সময় নির্বাচন করতে দেয় (সময়ক্ষেত্র নেই)。

ব্রাউজারের সহায়তা অনুযায়ী, তারিখ চিহ্নিতকারক ইনপুট ফিল্ডে দেখা যাবে。

উদাহরণ

<form>
  জন্মদিন (তারিখ ও সময়):
  <input type="datetime-local" name="bdaytime">
</form>

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

ইনপুট ধরন: email

<input type="email"> ইনপুট ফিল্ডটি যা ই-মেল এড্রেসকে যোগ করা হবে。

ব্রাউজার সমর্থন অনুযায়ী, ই-মেল এড্রেসকে সমর্থন করে, যখন সমর্থন করা হয়, তখন স্বয়ংক্রিয়ভাবে যাচাই করা হয়。

কিছু স্মার্টফোন ই-মেল ধরনকে পরিচিত করে, এবং কীবোর্ডে '.com' যোগ করে ই-মেল ইনপুটকে মাত্রার সাথে মিলিয়ে দেয়。

উদাহরণ

<form>
  ই-মেল:
  <input type="email" name="email">
</form>

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

ইনপুট ধরন: search

<input type="search"> সর্চ ফিল্ড (সর্চ ফিল্ডটির প্রদর্শন সাধারণ টেক্সট ফিল্ডের মতো)

উদাহরণ

<form>
  Google সর্চ:
  <input type="search" name="googlesearch">
</form>

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

ইনপুট ধরন: tel

<input type="tel"> ইনপুট ফিল্ডটি যা টেলিফোন নম্বরকে যোগ করা হবে。

এখনও শুধুমাত্র Safari 8 তেল ধরনকে সমর্থন করে。

উদাহরণ

<form>
  টেলিফোন:
  <input type="tel" name="usrtel">
</form>

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

ইনপুট ধরন: url

<input type="url"> ইনপুট ফিল্ডটি যা URL এড্রেসকে যোগ করা হবে。

ব্রাউজার সমর্থন অনুযায়ী, URL ফিল্ডটি সমর্থন করে, যখন সমর্থন করা হয়, তখন স্বয়ংক্রিয়ভাবে যাচাই করা হয়。

কিছু স্মার্টফোন URL ধরনকে পরিচিত করে, এবং কীবোর্ডে '.com' যোগ করে URL ইনপুটকে মাত্রার সাথে মিলিয়ে দেয়。

উদাহরণ

<form>
  আপনার হোমপেজ যোগ করুন:
  <input type="url" name="homepage">
</form>

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