X

X

X

HTML Input ইলামেন্টের বিভিন্ন টাইপ


এই চ্যাপ্টারে <input> ইলামেন্টের বিভিন্ন টাইপ সম্পর্কে আলোচনা করা হলো।


Input Type Text (এক লাইনের টেক্সটবক্স)

<input type=”text”> ইলামেন্ট দ্বারা  এক লাইনের text input field তৈরি করা হয়:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণের আউটপুট ব্রাউজারে নিচের মত প্রদর্শিত হবে:
First name:

Last name:


Input Type Password (পাসওয়ার্ড বক্স)

<input type=”password”> ইলামেন্ট দ্বারা  password field তৈরি করা হয়:

Code Example

<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণের আউটপুট ব্রাউজারে নিচের মত প্রদর্শিত হবে:

User name:

User password:

পাসওয়ার্ড ইনপুট বক্স এর ক্যারেক্টারগুলো মাস্কড করা , যার কারণে মূল ক্যারেক্টারগুলো asterisk বা circle আকারে প্রদর্শিত হয়। কিন্তু এর মূল ডাটা মূল ক্যারেক্টার ধারণ করে।


Input Type Submit (ফরম সাবমিট বাটন)

<input type=”submit”> ইলামেন্ট দ্বারা ফরম সাবমিট করার বাটন তৈরি করা হয়।  অর্থাৎ, যখন এটিতে ক্লিক করা হবে তখন ফরম ডাটা সার্ভারে সাবমিট হবে। সার্ভারে কোনো ফরম হ্যান্ডলার স্ক্রিপ্ট থাকে। এটি মূলত ফরম ডাটাগুলো নিয়ে প্রয়োজনীয় কাজ সম্পাদন করে।

ফরম হ্যান্ডলার স্ক্রিপ্টকে ফরম এর  action attribute দ্বারা ডিফাইন করা হয়:

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণের আউটপুট ব্রাউজারে নিচের মত প্রদর্শিত হবে:

First name:

Last name:

যদি আপনি সাবমিট বাটনের value attribute এর মান না নির্ধারণ করে থাকেন তবে ব্রাউজারে সাবমিট বাটনের জন্য ডিফল্ট টেক্সট Submit প্রদর্শিত হবে।

Code Example

<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> 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Type Reset (ফরম রিসেট করণ)

<input type=”reset”> ইলামেন্ট দ্বারা reset button তৈরি করা হয়। এটিতে ক্লিক করলে ফরম ডাটা রিসেট হয়।

Code Example

<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">
<input type="reset">
</form> 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণের আউটপুট ব্রাউজারে নিচের মত প্রদর্শিত হবে:

First name:

Last name:

 


Input Type Radio

<input type=”radio”> দিয়ে radio button তৈরি করা হয়:

অনেকগুলো অপশন থেকে কেবলমাত্র একটি অপশন সিলেক্ট করার জন্য রেডিও বাটন ব্যবহার করা হয়:

Code Example

<form action="/action_page.php">
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other<br><br>
  <input type="submit">
</form> 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণের আউটপুট ব্রাউজারে নিচের মত প্রদর্শিত হবে:

 Male
 Female
 Other


Input Type Checkbox

<input type=”checkbox”> দিয়ে checkbox তৈরি করা হয়:

Checkbox দিয়ে একইসাথে একাধিক অপশন সিলেক্ট করা হয়।

Code Example

<form action="/action_page.php">
<input type="checkbox" name="vehicle1" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car">I have a car 
<br><br>
<input type="submit">
</form> 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণের আউটপুট ব্রাউজারে নিচের মত প্রদর্শিত হবে:

 I have a bike
 I have a car


Input Type Button

<input type=”button”> দিয়ে button তৈরি করা হয়:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণের আউটপুট ব্রাউজারে নিচের মত প্রদর্শিত হবে:


HTML5 Input Types

HTML5 এ আরও কিছু নতুন ইলামেন্ট যুক্ত করা হয়েছে। নিচে এগুলো উপস্থাপণ করা হলো:

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

নতুন ইনপুট ইলামেন্ট যেগুলো ব্রাউজারে সাপোর্ট করে না সেগুলো <input type=”text”> এর মত প্রদর্শিত হবে।


Input Type Color

<input type=”color”> দিয়ে রং বাছাই এর বক্স তৈরি করা হয়।

বিভিন্ন ব্রাউজারে রং বাছাই এর বক্স বিভিন্নভাবে উপস্থাপিত হতে পারে। নিচে কিছু উদাহরণ দেওয়া হলো।
OperaSafariChromeFirefoxInternet Explorer

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Type Date

<input type=”date”> তারিখ সিলেক্ট করার ইনপুট বক্স তৈরি করা হয়।
বিভিন্ন ব্রাউজারে তারিখ বাছাইয়ের বক্স বিভিন্নভাবে উপস্থাপিত হতে পারে।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  Select your favorite color:
  <input type="color" name="favcolor" value="#ff0000">
  <input type="submit">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আপনি তারিখ বাছাইয়ের বক্স এ কিছু রেস্ট্রিকশনও সেট করে দিতে পারবেন। যেমন :
OperaSafariChromeFirefoxInternet Explorer

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Type Datetime-local

<input type=”datetime-local”> দিয়ে স্থানীয় তারিখ-সময় সিলেক্ট বক্স তৈরি করা হয়।

ব্রাউজারের উপর ভিত্তি করে বিভিন্ন ব্রাউজরে আউটপুট বিভিন্ন হতে পারে। নিচে কিছু উদাহরণ দেওয়া হলো।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
  <input type="submit" value="Send">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Type Email

<input type=”email”> দিয়ে ইমেইল ইনপুট বক্স তৈরি করা হয়।

বিভিন্ন ব্রাউজারে ইমেইল ইনপুট বক্স বিভিন্নভাবে উপস্থাপিত হতে পারে। নিচে কিছু উদাহরণ দেওয়া হলো। কিছু কিছু স্মার্টফোনে ইমেইল ইনপুট বক্স নিজে থেকে .com এক্সটেনশন যুক্ত করে।

OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  E-mail:
  <input type="email" name="email">
  <input type="submit">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Type Month

<input type=”month”> দিয়ে মাস সিলেক্ট করার ইনপুট বক্স তৈরি করা হয়।

Depending on browser support, a date picker can show up in the input field.
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  Birthday (month and year):
  <input type="month" name="bdaymonth">
  <input type="submit">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Type Number

<input type=”number”> দিয়ে শুধুমাত্র numeric ডাটা ইনপুট নেওয়ার জন্য ইনপুট বক্স তৈরি করা হয়।

কোনো নাম্বার মান নিবেন সেটিও এখানে সেট করে দেওয়া যায়।

নিচে একটি উদাহরণ দেওয়া হলো যেখানে ১ থেকে ৫ পর্যন্ত সংখ্যামান ইনপুট নেওয়া যায়।:

Code Example

<form action="/action_page.php">
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Restrictions

নিচে কিছু input restriction এর উদাহরণ দেওয়া হলো ( HTML5 কিছু কিছু নতুন):

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

আরও বিস্তারিত পরবর্তী চ্যাপ্টারে জানতে পারবেন ।

OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  Quantity:
  <input type="number" name="quantity"
   min="0" max="100" step="10" value="30">
  <input type="submit">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Type Range

<input type=”range”> রেঞ্জভিত্তিক ইনপুট বক্স তৈরিতে ব্যবহৃত হয়। Default range 0 থেকে 100 পর্যন্ত।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php" method="get">
  Points:
  <input type="range" name="points" min="0" max="10">
  <input type="submit">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Type Search

<input type=”search”> সার্চবক্স তৈরিতে ব্যবহৃত হয়।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  Search Google:
  <input type="search" name="googlesearch">
  <input type="submit">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Type Tel

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

OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  Telephone:
  <input type="tel" name="usrtel">
  <input type="submit">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Type Time

<input type=”time”> দিয়ে সময় ইনপুট নেওয়ার জন্য ইনপুট বক্স তৈরিতে ব্যবহৃত হয়।

OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  Select a time:
  <input type="time" name="usr_time">
  <input type="submit">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Type Url

<input type=”url”> দিয়ে URL ইনপুট নেওয়ার জন্য ইনপুট বক্স তৈরি করা হয়।

কিছু কিছু স্মার্টফোনে স্বয়ংক্রিয়ভাবে ইনপুটে .com যুক্ত হয়।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  Add your homepage:
  <input type="url" name="homepage">
  <input type="submit">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Type Week

<input type=”week”> দিয়ে সপ্তাহ ও বছর সিলেক্ট করার জন্য ইনপুট বক্স তৈরি করা হয়।

OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  Select a week:
  <input type="week" name="year_week">
  <input type="submit">
</form>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Input Type Attribute

ট্যাগ বর্ণনা
<input type=””> এটি দিয়ে ইনপুট ইলামেন্টের টাইপ বর্ণনা করা হয়।