এইচটিএমএল(৫) ইনপুট টাইপ ভ্যালু

এক নজরে এইচটিএমএল(৫) ইনপুট টাইপের ভ্যালু সমূহ

আমাদের টিউটোরিয়ালের এই অংশে আমরা <input> এলিমেন্টের type এট্রিবিউটের এইচটিএমএল(৫) ভ্যালু গুলো সম্পর্কে জানবো।

ভ্যালু	বর্ণনা
email	বৈধ ই-মেইল ইনপুট করার জন্য `<input` `type="email">` ব্যবহার করা হয়।
number	শুধু মাত্র সংখ্যা ইনপুট করার জন্য `<input` `type="number">` ব্যবহার করা হয়।
range	ইনপুট ফিল্ডের ভ্যালুর সীমা নির্ধারণ করার জন্য `<input` `type="range">` ব্যবহার করা হয়।
tel	টেলিফোন নাম্বার ইনপুট করার জন্য `<input` `type="tel">` ব্যবহার করা হয়।
month	তারিখের মধ্যে বছর এবং মাস ইনপুট করার জন্য `<input` `type="month">` ব্যবহার করা হয়।
week	তারিখের মধ্যে বছর এবং সপ্তাহ ইনপুট করার জন্য `<input` `type="week">` ব্যবহার করা হয়।
date	তারিখ ইনপুট করার জন্য `<input` `type="date">` ব্যবহার করা হয়।
time	সময় ইনপুট করার জন্য `<input` `type="time">` ব্যবহার করা হয়।
datetime	সময় এবং তারিখ ইনপুট করার জন্য `<input` `type="datetime">` ব্যবহার করা হয়।
datetime-local	সময় এবং তারিখ ইনপুট করার জন্য `<input` `type="datetime-local">` ব্যবহার করা হয়।
color	কালার ভ্যালু ইনপুট করার জন্য `<input` `type="color">` ব্যবহার করা হয়।
search	ইনপুট ফিল্ডে সার্চবক্স হিসাবে ডেটা ইনপুট করার জন্য `<input` `type="search">` ব্যবহার করা হয়।
url	ব্যবহারকারীর কাছ থেকে লিংক ইনপুট করার জন্য `<input` `type="url">` ব্যবহার করা হয়।

বিঃদ্রঃ যে সকল ব্রাউজারে এই টাইপসমূহ সাপোর্ট করে না, সে সকল ব্রাউজারে উক্ত টাইপসমূহ টেক্সট বিবেচনা করবে।

ইনপুট type:email

ইনপুট ফিল্ডে ভ্যালু হিসেবে ই-মেইল পাওয়ার জন্য <input type="email"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>type:email ইনপুট</title>
</head>
<body>

<form action="action_page.php" method="post">
  ই-মেইলঃ <input type="email" name="email">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

সতর্কতাঃ type="email" IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।

ফলাফল

বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।

ইনপুট ফিল্ডের সীমাবদ্ধতা

আমরা নিম্নের এট্রিবিউট সমূহ ব্যবহার করে ইনপুট ফিল্ডের ভ্যালুর জন্য সীমাবদ্ধতা নির্ধারণ করতে পারিঃ

এট্রিবিউট	বিবরণ
disabled	ইনপুট ফিল্ডটি নিষ্ক্রিয় হবে।
max	ইনপুট ফিল্ডে ইনপুটকৃত সর্বোচ্চ মান নির্ধারণ কর।
min	ইনপুট ফিল্ডে ইনপুটকৃত সর্বনিম্ন মান নির্ধারণ করে।
max-length	ইনপুট ফিল্ডে সর্বোচ্চ কতটি ক্যারেক্টার লেখা যাবে তা নির্ধারণ করে।
pattern	ইনপুট ফিল্ডের ভ্যালুর জন্য একটি প্যাটার্ন নির্ধারণ করে।
readonly	ইনপুট ফিল্ডের ভ্যালু শুধুমাত্র পড়া যাবে।
required	ইনপুট ফিল্ডে অবশ্যই ভ্যালু প্রদান করতে হবে।
size	ইনপুট ফিল্ডের দৈঘ্য নির্ধারণ করে।
step	ইনপুটে নির্দিষ্ট কোন ভ্যালু এটি ব্যবহার করা হয়।
value	ইনপুট ফিল্ডের ডিফল্ট ভ্যালু নির্ধারণ করে।

ইনপুট type:number

ইনপুট ফিল্ডে শুধুমাত্র সংখ্যা ইনপুট নিতে <input type="number"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ইনপুট type:number</title>
</head>
<body>

<form action="action_page.php">
  পরিমান - 1 থেকে 5 এর মধ্যেঃ
  <input type="number" name="quantity" min="1" max="10">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

সতর্কতাঃ type="number" IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ফর্ম ইনপুট</title>
</head>
<body>

<form action="action_page.php">
  পরিমানঃ <input type="number" name="points" min="0" max="100" step="10" value="30">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

সতর্কতাঃ input type="number" IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।

ফলাফল

ইনপুট type:range

ইনপুট ফিল্ডের ভ্যালুর পরিসীমা দিতে <input type="range"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ইনপুট type:range</title>
</head>
<body>

<form action="action_page.php" method="get">
  পয়েন্টঃ <input type="range" name="points" min="0" max="10">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

সতর্কতাঃ type="range" IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।

ফলাফল

min, max, step, value এট্রিবিউটগুলো ব্যবহার করে আপনি ইনপুট ফিল্ডের মধ্যে সহজেই সীমাবদ্ধতা সেট করতে পারেন।

ইনপুট type:tel

ইনপুট ফিল্ডে ব্যবহারকারীর কাছ থেকে টেলিফোন নম্বর নিতে <input type="tel"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ইনপুট type:tel</title>
</head>
<body>

<form action="action_page.php">
  টেলিফোনঃ <input type="tel" name="telephone">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

সতর্কতাঃ type="tel" IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।

ফলাফল

ইনপুট type:month

বছর এবং মাস ইনপুট নিতে <input type="month"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ইনপুট type:month</title>
</head>
<body>

<form action="action_page.php">
  জন্মদিন(মাস এবং বছর): <input type="month" name="birthdaymonth">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

বিঃদ্রঃ type="month" IE10 এবং এর পূর্বের ভার্সনে সার্পোট করে না। আপনি যখন ইনপুট ফিল্ড সিলেক্ট করবেন তখন একটি ডেট পিকারের পপ-আপ আসবে। এটি সম্পূর্ণ আপনার ব্রাউজারের উপর নির্ভর করে।

ফলাফল

ইনপুট type:week

বছর এবং সপ্তাহ ইনপুট নিতে <input type="week"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ইনপুট type:week</title>
</head>
<body>

<form action="action_page.php">
  সপ্তাহ সিলেক্টঃ <input type="week" name="year_week">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

বিঃদ্রঃ type="week" IE এবং এর পূর্বের ভার্সনে সার্পোট করে না। যখন ইনপুট ফিল্ড সিলেক্ট করবেন তখন একটি ডেট পিকারের পপ-আপ আসবে, যাতে আপনি সপ্তাহ সিলেক্ট করতে পারবেন। এটি সম্পূর্ণ আপনার ব্রাউজারের উপর নির্ভর করে।

ফলাফল

ইনপুট type:date

তারিখ ইনপুট নিতে <input type="date"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ইনপুট type:date</title>
</head>
<body>

<form action="action_page.php">
  জন্মদিনঃ <input type="date" name="birthday">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

বিঃদ্রঃ type="date" IE এবং এর পূর্বের ভার্সনে সার্পোট করে না। যখন ইনপুট ফিল্ড সিলেক্ট করবেন তখন একটি ডেট পিকারের পপ-আপ আসবে, যাতে আপনি তারিখ সিলেক্ট করতে পারবেন। এটি সম্পূর্ণ আপনার ব্রাউজারের উপর নির্ভর করে।

ফলাফল

আপনি চাইলে তারিখের মধ্যে পরিসীমা যুক্ত করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ইনপুট type:date</title>
</head>
<body>

<form action="action_page.php">
  1980-01-01 এর পূর্বের তারিখঃ
  <input type="date" name="birthday1" max="1979-12-31"><br><br>
  2000-01-01 এর পরের  তারিখঃ
  <input type="date" name="birthday2" min="2000-01-02"><br><br>
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

ফলাফল

ইনপুট type:time

সময় ইনপুট নিতে <input type="time"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ইনপুট type:time</title>
</head>
<body>

<form action="action_page.php">
  নির্দিষ্ট সময় সিলেক্টঃ <input type="time" name="user_time">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

বিঃদ্রঃ type="time" IE10 এবং এর পূর্বের ভার্সনে সার্পোট করে না। যখন ইনপুট ফিল্ড সিলেক্ট করবেন তখন ইনপুট ফিল্ডে টাইম ফর্ম্যাট আসবে, যাতে আপনি সময় নির্ধারণ করতে পারবেন। এটি সম্পূর্ণ আপনার ব্রাউজারের উপর নির্ভর করে।

ফলাফল

ইনপুট type:datetime

ইনপুট ফিল্ডে ব্যবহারকারীকে টাইমজোনের তারিখ ও সময় সিলেক্ট করার অপশন দিতে <input type="datetime"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ইনপুট type:datetime</title>
</head>
<body>

<form action="action_page.php">
  জন্মদিন (তারিখ এবং সময়): <input type="datetime" name="birthdaytime">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

বিঃদ্রঃ type="date" ক্রোম, ফায়ার ফক্স অথবা ইন্টারনেট এক্সপ্লোরারে সার্পোট করে না। যখন ইনপুট ফিল্ড সিলেক্ট করবেন তখন একটি ডেট পিকারের পপ-আপ আসবে, যাতে আপনি তারিখ এবং সময় সিলেক্ট করতে পারবেন। এটি সম্পূর্ণ আপনার ব্রাউজারের উপর নির্ভর করে।

ফলাফল

ইনপুট type:datetime-local

লোকাল তারিখ এবং টাইম-জোনের তথ্য ব্যতিত সময় ইনপুট নিতে <input type="datetime-local"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>type:datetime-local ইনপুট</title>
</head>
<body>

<form action="action_page.php">
   জন্মদিন (তারিখ এবং সময়): <input type="datetime-local" name="birthdaytime">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

বিঃদ্রঃ type="datetime-local" ফায়ারফক্স, ইন্টারনেট এক্সপ্লোরার ১০ এবং এর পূর্ববর্তী ভার্সনে সার্পোট করে না। যখন ইনপুট ফিল্ড সিলেক্ট করবেন তখন একটি ডেট পিকারের পপ-আপ আসবে, যাতে আপনি তারিখ এবং সময়ের ফর্ম্যাট থেকে সময় সিলেক্ট করতে পারবেন। এটি সম্পূর্ণ আপনার ব্রাউজারের উপর নির্ভর করে।

ফলাফল

ইনপুট type:color

রং এর হ্যাক্সা-ডেসিম্যাল ভ্যালু ইনপুট নিতে <input type="color"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ইনপুট type:color</title>
</head>
<body>

<form action="action_page.php">
  আপনার প্রিয় রং সিলেক্ট করুনঃ <input type="color" name="favcolor" value="#0000ff">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

বিঃদ্রঃ type="color" ইন্টারনেট এক্সপ্লোরারে সার্পোট করে না। যখন ইনপুট ফিল্ড সিলেক্ট করবেন তখন একটি কালার পিকারের পপ-আপ আসবে, যাতে আপনি আপনার পছন্দের কালারটি সিলেক্ট করতে পারবেন। এটি সম্পূর্ণ আপনার ব্রাউজারের উপর নির্ভর করে।

ফলাফল

ইনপুট type:search

সার্চবক্স হিসেবে ইনপুট নিতে <input type="search"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ইনপুট type:search</title>
</head>
<body>

<form action="action_page.php">
  পিপিলিকা সার্চঃ <input type="search" name="pipilikasearch">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

ফলাফল

ইনপুট type:url

ইনপুট ফিল্ডে ব্যবহারকারীর কাছ থেকে URL পেতে <input type="url"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ইনপুট type:url</title>
</head>
<body>

<form action="action_page.php">
  হোমপেইজ যুক্ত করুনঃ <input type="url" name="homepage">
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

ফলাফল

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

এইচটিএমএল টিউটোরিয়াল

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