HTML Input Types

HTML ইনপুট প্রকার শিখুন

HTML ইনপুট প্রকার

এই অধ্যায়ে এইচটিএমএল <ইনপুট> উপাদানের বিভিন্ন প্রকার বর্ণনা করা হয়েছে।

💡পরামর্শ:

টাইপ অ্যাট্রিবিউটের ডিফল্ট মান হল "টেক্সট"।

বিভিন্ন ধরনের ইনপুট যা HTML এ ব্যবহার করা যেতে পারে:

type="text"
type="password"
type="checkbox"
type="radio"
type="date"
type="email"
type="number"
type="search"

ইনপুট টাইপ: টেক্সট

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

উদাহরণ

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>



ইনপুট প্রকার: পাসওয়ার্ড

<input type="password"> একটি পাসওয়ার্ড ক্ষেত্র সংজ্ঞায়িত করে:

উদাহরণ

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>



পাসওয়ার্ড ক্ষেত্রের অক্ষরগুলি লুকানো আছে (তারা বা বৃত্ত হিসাবে দেখানো হয়েছে)।

ইনপুট প্রকার: জমা দিন

<input type="submit"> ফর্ম-হ্যান্ডলারে ফর্ম ডেটা জমা দেওয়ার জন্য একটি বোতাম সংজ্ঞায়িত করে৷

একটি ফর্ম-হ্যান্ডলার সাধারণত একটি সার্ভার পৃষ্ঠা যাতে ইনপুট ডেটা প্রক্রিয়াকরণের জন্য একটি স্ক্রিপ্ট থাকে।

ফর্ম-হ্যান্ডলার ফর্মের অ্যাকশন অ্যাট্রিবিউটে নির্দিষ্ট করা হয়েছে:

উদাহরণ

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>





আপনি যদি সাবমিট বোতামের মান বৈশিষ্ট্যটি বাদ দেন তবে বোতামটিতে একটি ডিফল্ট পাঠ্য থাকবে:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit">
</form>

ইনপুট টাইপ: রিসেট করুন

<input type="reset"> একটি রিসেট বোতাম সংজ্ঞায়িত করে যা সমস্ত ফর্ম মানকে তাদের ডিফল্ট মানগুলিতে পুনরায় সেট করে:

উদাহরণ

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

⚠️দ্রষ্টব্য:

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

ইনপুট প্রকার: রেডিও

<input type="radio"> একটি রেডিও বোতাম সংজ্ঞায়িত করে।

রেডিও বোতাম একজন ব্যবহারকারীকে সীমিত সংখ্যক পছন্দের মধ্যে শুধুমাত্র একটি নির্বাচন করতে দেয়:

উদাহরণ

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Choose your favorite Web language:



ইনপুট প্রকার: চেকবক্স

<input type="checkbox"> একটি চেকবক্স সংজ্ঞায়িত করে।

চেক বক্সগুলি ব্যবহারকারীকে সীমিত সংখ্যক পছন্দ থেকে শূন্য বা তার বেশি বিকল্প নির্বাচন করতে দেয়।

উদাহরণ

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>


ইনপুট প্রকার: বোতাম

<input type="button"> একটি বোতাম সংজ্ঞায়িত করে:

উদাহরণ

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

অন্যান্য ইনপুট প্রকার

type="color"

একটি রঙ নির্বাচন করতে ব্যবহৃত হয়

<input type="color" id="favcolor" name="favcolor">

type="date"

একটি তারিখ নির্বাচন করতে ব্যবহৃত

<input type="date" id="birthday" name="birthday">

type="email"

ইমেল ঠিকানার জন্য ব্যবহৃত

<input type="email" id="email" name="email">

type="file"

ফাইল আপলোডের জন্য ব্যবহৃত হয়

<input type="file" id="myfile" name="myfile">

type="number"

সাংখ্যিক মানের জন্য ব্যবহৃত হয়

<input type="number" id="quantity" name="quantity" min="1" max="5">

type="range"

স্লাইডার নিয়ন্ত্রণের জন্য ব্যবহৃত হয়

<input type="range" id="vol" name="vol" min="0" max="50">

type="search"

অনুসন্ধান ক্ষেত্র জন্য ব্যবহৃত

<input type="search" id="gsearch" name="gsearch">

type="tel"

ফোন নম্বরের জন্য ব্যবহৃত

<input type="tel" id="phone" name="phone">

ইনপুট নিয়ন্ত্রণ

এখানে কিছু সাধারণ ইনপুট নিয়ন্ত্রণের একটি তালিকা রয়েছে:

বৈশিষ্ট্য ব্যাখ্যা
checked নির্দিষ্ট করে যে পৃষ্ঠাটি লোড হওয়ার সময় একটি ইনপুট ক্ষেত্র পূর্ব-নির্বাচিত হওয়া উচিত (type="checkbox" বা type="radio" এর জন্য)।
disabled নির্দিষ্ট করে যে একটি ইনপুট ক্ষেত্র নিষ্ক্রিয় করা উচিত
max একটি ইনপুট ক্ষেত্রের জন্য সর্বোচ্চ মান নির্দিষ্ট করে
maxlength একটি ইনপুট ক্ষেত্রের জন্য অক্ষরের সর্বাধিক সংখ্যা নির্দিষ্ট করে
min একটি ইনপুট ক্ষেত্রের জন্য সর্বনিম্ন মান নির্দিষ্ট করে
pattern একটি ইনপুট মান যাচাই করার জন্য একটি নিয়মিত অভিব্যক্তি নির্দিষ্ট করে
readonly নির্দিষ্ট করে যে একটি ইনপুট ক্ষেত্র শুধুমাত্র পঠনযোগ্য (পরিবর্তন করা যাবে না)।
required নির্দেশ করে যে একটি ইনপুট ক্ষেত্র প্রয়োজন (পূরণ করতে হবে)।
size একটি ইনপুট ক্ষেত্রের প্রস্থ (অক্ষরে) নির্দিষ্ট করে
step একটি ইনপুট ক্ষেত্রের জন্য আইনি সাংখ্যিক ব্যবধান নির্দিষ্ট করে
value একটি ইনপুট ক্ষেত্রের জন্য ডিফল্ট মান নির্দিষ্ট করে

📚অতিরিক্ত শিক্ষা:

আপনি পরবর্তী অধ্যায়ে ইনপুট নিয়ন্ত্রণ সম্পর্কে আরও শিখবেন।

উদাহরণ

নিম্নলিখিত উদাহরণটি আপনাকে 0 থেকে 100 পর্যন্ত একটি মান লিখতে দেয়, 10 এর ধাপে। ডিফল্ট মান হল 30:

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

অনুশীলন করুন

INPUT উপাদানের টাইপ অ্যাট্রিবিউটের ডিফল্ট মান কী?

button
✗ ভুল! বোতামটি টাইপ অ্যাট্রিবিউটের ডিফল্ট মান নয়
submit
✗ ভুল! জমা দেওয়ার বোতামগুলি ফর্ম জমা দেওয়ার জন্য ব্যবহার করা হয়, তবে এটি ডিফল্ট নয়
text
✓ ঠিক আছে! টাইপ অ্যাট্রিবিউটের ডিফল্ট মান হল "টেক্সট"।

HTML ইনপুট টাইপ অ্যাট্রিবিউট

ট্যাগ ব্যাখ্যা
<input type=""> প্রদর্শনের জন্য ইনপুটের ধরন নির্দিষ্ট করে

🎯মূল পয়েন্ট:

  • টাইপ অ্যাট্রিবিউট ইনপুট নিয়ন্ত্রণের ধরন নির্ধারণ করে
  • ডিফল্ট মান হল "টেক্সট"।
  • বিভিন্ন ধরণের মান বিভিন্ন ইনপুট সীমাবদ্ধতা তৈরি করে
  • প্রতিটি ধরনের মান নির্দিষ্ট ব্যবহারের ক্ষেত্রে উপযুক্ত