এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

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

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

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


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

আমাদের টিউটোরিয়ালের এই অংশে আমরা <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="date" IE এবং এর পূর্বের ভার্সনে সার্পোট করে না। যখন ইনপুট ফিল্ড সিলেক্ট করবেন তখন একটি ডেট পিকারের পপ-আপ আসবে, যাতে আপনি তারিখ সিলেক্ট করতে পারবেন। এটি সম্পূর্ণ আপনার ব্রাউজারের উপর নির্ভর করে।

ফলাফল



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


ইনপুট 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>

ফলাফল



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