X

X

X

HTML Input ইলামেন্টে ব্যবহৃত Attribute সমূহ


value এট্রিবিউট

value এট্রিবিউট দিয়ে ইনপুট ইলামেন্টের প্রাথমিক মান সেট করা হয়:

Code Example

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

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


readonly এট্রিবিউট

readonly এট্রিবিউট দিয়ে ইনপুট ইলামেন্টের মানকে অপরিবর্তনীয় হিসেবে বর্ণনা করা হয় :

Code Example

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

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


disabled এট্রিবিউট

disabled এট্রিবিউট দিয়ে ইনপুট ইলামেন্ট কে নিষ্ক্রিয় বা Disable হিসেবে বর্ণনা করা হয়। অর্থাৎ, যদিও ফরমে ইনপুট ফিল্ডটি প্রদর্শিত হবে, কিন্তু সার্ভারে এর মান পাঠানো হবে না।

Code Example

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

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


size এট্রিবিউট

size এট্রিবিউট দিয়ে ইনপুট ফিল্ডের সাইজ বর্ণনা করা হয়:

Code Example

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

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


maxlength এট্রিবিউট

maxlength এট্রিবিউট দিয়ে ইনপুট ফিল্ডের সর্বোচ্চ গ্রহণযোগ্য ক্যারেক্টার সাইজ বর্ণনা করা হয় ।

Code Example

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

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


HTML5 এর Attribute সমূহ

HTML5 এ <input> এর জন্য নিচের এট্রিবিউটগুলো যুক্ত করা হয়েছে :

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

এবং <form> ইলামেন্টের জন্য :

  • autocomplete
  • novalidate

autocomplete Attribute

autocomplete দিয়ে বর্ণনা করা হয়, ইনপুট ফিল্ডের autocomplete ফিচারটি চালু নাকি বন্ধ থাকবে।

যখন autocomplete ফিচারটি চালু থাকবে তখন ব্রাউজার স্বয়ংক্রিয়ভাবে ইউজার কর্তৃক ব্যবহৃত ডাটা ব্যবহার করবে।
টিপস: ফরম এর কিছু নির্দিষ্ট ইলামেন্টের জন্য autocomplete চালু কিংবা বন্ধ রাখা সম্ভব।  

autocomplete attribute <form> এবং <input> types: text, search, url, tel, email, password, datepickers, range, and color ইত্যাদি ইনপুট কন্ট্রোল ইলামেন্টের সাথে কাজ করে।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

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


টিপস: কিছু কিছু ব্রাউজারের জন্য এটি আপনাকে ম্যানুয়ালি চালু করে নিতে হতে পারে।


novalidate Attribute

novalidate একটি  <form> attribute । এটি দ্বারা ব্রাউজারকে নির্দেশনা দেওয়া হয়, যখন ফরম ডাটা সাবমিট হবে এর ডাটাগুলো validate করার প্রয়োজন নেই। অর্থাৎ, ভুল ডাটা ইনপুট করলেও সার্ভারে ব্রাউজার ফরম ডাটা সাবমিট করবে।

OperaSafariChromeFirefoxInternet Explorer

Code Example

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

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


autofocus Attribute

autofocus attribute দিয়ে বর্ণনা করা হয়, যখন পেজ পুরোপুরি লোড হবে তখেন autofocus ধারী ফরম ইলামেন্ট স্বয়ংক্রিয়ভাবে ফোকাস হবে। অর্থাৎ, কার্সর স্বয়ংক্রিয়ভাবে উক্ত ইনপুট ইলামেন্টের উপর ক্রিয়াশীল হবে।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  First name:<input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

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


form Attribute

যদি একই ইনপুট ইলামেন্ট একাধিক ফরম এর জন্য প্রযোজ্য হয় , তবে সেক্ষেত্রে উক্ত ফরম ইলামেন্টের জন্য form attribute ব্যবহার করা হয়।

টিপস: একই ফরম ইলামেন্টকে একাধিক ফরম এ enable করার জন্য space-separated লিস্ট ব্যবহার করতে হবে। এই লিস্টে কাংখিত ফরম এর id attribute এর মানগুলোকে পর্যায়ক্রমে লিখতে হবে।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

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


formaction Attribute

যে ফাইলটি ফরম ডাটা প্রসেস করবে তাকেformaction attribute দিয়ে উপস্থাপন করা হয়। এটি দিয়ে ফরম এর action attribute এর মানকে override করা হয়।

এটি type=”submit” এবং type=”image” দিয়ে বর্ণিত হয়।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php" value="Submit to another page">
</form>

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


formenctype Attribute

formenctype দিয়ে বর্ণনা করা হয়, যখন ফরম ডাটা সার্ভারে সাবমিট হবে তখন এটি কোন এনকোডিং ব্যবহার করবে। এটি শুধুমাত্র POST method এর ক্ষেত্রে প্রযোজ্য।

formenctype attribute দিয়ে <form> element এর enctype attribute এর মানকে override করা হয়।

formenctype attribute – type=”submit” এবং type=”image” এর সাথে ব্যবহৃত হয়।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page_binary.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
</form>

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


formmethod Attribute

formmethod attribute দিয়ে HTTP method বর্ণনা করা হয়।

এটি দিয়ে <form> element এর method attribute এর মান override করা হয়।

formmethod attribute কে type=”submit” এবং type=”image” এর সাথে ব্যবহার করা যেতে পারে।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

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


formnovalidate Attribute

formnovalidate attribute দিয়ে <form> element এর novalidate attribute এর মানকে override করা হয়।

formnovalidate attribute কে type=”submit” এর সাথে ব্যবহার করা যায়।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

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


formtarget Attribute

formtarget attribute দিয়ে ফরম সাবমিট করার পর যে রেসপন্স পাওয়া যায়, তাকে কোথায় প্রদর্শণ করতে হবে। এটি দিয়ে <form> element এর target attribute এর মানকে override করা হয়।

এটিকে type=”submit” এবং type=”image” এর সাথে ব্যবহার করা হয়।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

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


height এবং width Attribute

height এবং width attribute দিয়ে <input type=”image”> element এর দৈর্ঘ্য ও প্রস্থ বর্ণনা করা হয়।

সবসময় ইমেজ ইলামেন্টের দৈর্ঘ্য ও প্রস্থ নির্ধারণ করা উচিৎ। তা না হলে পেজ যখন লোড হবে তখন এটি ঠিকভাবে উপস্থাপিত হবে না এবং পেজের আউটলুক ভেঙে ফেলতে পারে।

OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

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


list Attribute

list attribute দিয়ে <datalist> element কে পয়েন্ট করা হয়।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php" method="get">

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

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


min এবং max Attribute

<input> element এর minimum এংব maximum value সেট করার জন্য min এবং max attributes ব্যবহার করা হয়।

এগুলো number, range, date, datetime-local, month, time এবং week ইনপুট টাইপের জন্য প্রযোজ্য।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">

  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>

  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>

  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5"><br>

  <input type="submit">
  
</form>

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


multiple Attribute

একই সাথে একাধিক ইনপুট নেওয়ার জন্য এটি ব্যবহার করা হয়।

এটি email, এবং file ইনপুট ইলামেন্টের জন্য প্রযোজ্য।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  Select images: <input type="file" name="img" multiple>
  <input type="submit">
</form>

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


pattern Attribute

pattern attribute দিয়ে <input> element এর জন্য regular expression সেট করা হয়। অর্থাৎ, একটি নির্দিষ্ট প্যাটার্নের মান নেওয়ার জন্য এটি ব্যবহার করা হয়।

এটি text, search, url, tel, email, এবং password ইনপুট ইলামেন্টের জন্য প্রযোজ্য।

টিপস: কোন প্যাটার্ন ব্যবহার করছেন সেটি ইউজারকে বোঝানোর জন্য title attribute ব্যবহার করা যেতে পারে। 

Code Example

<form action="/action_page.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>

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


placeholder Attribute

placeholder attribute দিয়ে ইউজারকে হিন্ট দেওয়া হয়। হিন্ট টেক্সট ইনপুট বক্স এ প্রদর্শিত হয় যখন এতে কোনো ডাটা থাকে না।

placeholder attribute text, search, url, tel, email, এবং password ইনপুট বক্সের জন্য প্রযোজ্য।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>

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


required Attribute

কোনো ইনপুট ইলামেন্টকে অবশ্যই পূরণীয় হিসেবে উপস্থাপন করার জন্য required attribute ব্যবহার করা হয়।

required attribute text, search, url, tel, email, password, date pickers, number, checkbox, radio, এবং file ইনপুট ইলামেন্টের জন্য প্রযোজ্য।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form>

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


step Attribute

<input> element এর legal number interval বর্ণনা করার জন্য step attribute ব্যবহার করা হয়।

উদাহরণ: যদি step=”3″ হয় তবে legal number গুলো হবে -3, 0, 3, 6, ইত্যাদি।

টিপস: step attribute কে the max এবং min attribute এর সাথে একই সাথে ব্যবহার করা যায়।

এটি number, range, date, datetime-local, month, time এবং week ইনপুট ইলামেন্টের জন্য প্রযোজ্য।
OperaSafariChromeFirefoxInternet Explorer

Code Example

<form action="/action_page.php">
  <input type="number" name="points" step="3">
  <input type="submit">
</form>

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


HTML Form এবং Input Element সমূহ

ট্যাগ বর্ণনা
<form> ইউজারের কাছ থেকে ইনপুট নেওয়ার জন্য ফরম তৈরিতে ব্যবহৃত হয়।
<input> ইনপুট কন্ট্রোল বা ইনপুট ইলামেন্ট তৈরিতে ব্যবহৃত হয়।