এইচটিএমএল ফর্ম ইনপুট এট্রিবিউট - HTML Form Input Attribute


এইচটিএমএল টিউটোরিয়ালের এই অংশে এইচটিএমএল ফর্মে ব্যবহৃত ইনপুট এলিমেন্টের সকল এট্রিবিউট গুলো সম্পর্কে আলোচনা করা হয়েছে।


value এট্রিবিউট

value এট্রিবিউট ব্যবহার করে ফরমের ইনপুট ফিল্ডের প্রাথমিক মান বা value কে নির্ধারণ করা হয়। নিছে একটি উদাহরন দেখুন।

উদাহরণ


<form action="">
  Full name: <br />
  <input type="text" name="fullname" value="SataRupa"> 
</form>

কোড এডিটর



readonly এট্রিবিউট

readonly এট্রিবিউট ব্যবহার করে ফরমের ইনপুট ফিল্ডের মান বা value কে শুধুমাত্র পড়ার অনুমতি দেয়া হয় অর্থাৎ এর ফলে বাবহারকারি কেবল ইনপুট ফিল্ডের মান বা value দেখতে পারবে কিন্তু কোনো ধরনের পরিবর্তন করতে পারবে না। নিচে একটি উদাহরন দেখুন।

উদাহরণ


<form action="">
  Full name:<br />
  <input type="text" name="fullname" value="SataRupa" readonly>
</form>

কোড এডিটর



disabled এট্রিবিউট

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

উদাহরণ


<form action="">
  Full name:<br />
  <input type="text" name="fullname" value="SataRupa" disabled>
</form>

কোড এডিটর



size এট্রিবিউট

size এট্রিবিউট ব্যবহার করে ফরমের ইনপুট ফিল্ডের দৈর্ঘ্য নির্ধারণ করা হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<form action="">
  Full name:<br />
  <input type="text" name="fullname" value="sataRupa" size="50"> 
</form>

কোড এডিটর



maxlength এট্রিবিউট

ফরমের ইনপুট ফিল্ডে সর্বাধিক কতটি ক্যারেক্টার ইনপুট দেয়া যাবে তা নির্ধারণ করার জন্য maxlength এট্রিবিউট ব্যবহার করা হয়। নিছে এর একটি উদাহরন দেখুন।

উদাহরণ


<form action="">
  Full name:<br />
  <input type="text" name="fullname" maxlength="15">
</form>

কোড এডিটর


maxlength এট্রিবিউট ব্যবহার করা হলে, নির্ধারিত ক্যারেক্টার সংখ্যার অধিক ক্যারেক্টার লেখা যায় না। maxlength এট্রিবিউট কোন feedback প্রদর্শন করে না। ইউজারকে কোন এলারট বা feedback দিতে হলে, জাভাস্ক্রিপ্ট কোড ব্যবহার করতে হবে।

নোট - ইনপুট সীমাবদ্ধতার এই এট্রিবিউট গুলো শতভাগ কার্যকরী নয় এবং জাভাস্ক্রিপ্ট ব্যবহার করেও অনেক রকম illegal ইনপুট দেয়া যায়। তাই ইনপুট সীমাবদ্ধতা নিরাপদ করার একটি ভাল পদ্ধতি হল গ্রহনকারী অর্থাৎ সার্ভার থেকে পরীক্ষা করা!


এইচটিএমএল ৫ এট্রিবিউট

এইচটিএমএল ৫ এ <input> এর জন্য নিচের এট্রিবিউট গুলো যোগ করা হয়েছে -

<form> এর জন্য নিচের এট্রিবিউট দুটি -

এইচটিএমএল <input> ট্যাগ সম্পর্কে জানতে W3C এর 4.3.10.4 The input element ওয়েব পেজটি ব্রাউজ করুন।


autocomplete এট্রিবিউট

ফরমের ইনপুট ফিল্ডে পূর্বে ব্যবহৃত মান থেকে নতুন মান ইনপুট করতে সাহায্য করার জন্য autocomplete এট্রিবিউট ব্যবহার করা হয়। অর্থাৎ ইউজার আগে ব্যবহার করেছে এমন মান গুলো ইনপুট ফিল্ডে স্বয়ংক্রিয়ভাবে প্রদর্শিত হয়।

আমরা url, text, range, tel, color, password, search এবং email ইনপুট টাইপের সাথে autocomplete এট্রিবিউটটি ব্যবহার করা যায়।

ফর্মের সকল ইনপুট ফিল্ড বা নির্দিষ্ট কোন কোন ইনপুট ফিল্ডের জন্য autocomplete এট্রিবিউট চালু বা "on" এবং বন্ধ বা "off" রাখা যায়।

উদাহরণ


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

কোড এডিটর


নোট - সাধারণত বেশিরভাগ ব্রাউজারে autocomplete ফাংশনটি চালু থাক্লেও, কিছু কিছু ব্রাউজারের ক্ষেত্রে autocomplete ফাংশনটি চালু করে নিতে হয়। autocomplete এর প্রদর্শিত তথ্য গুলো ব্রাউজারে জমা থাকে। সাধারণত স্বয়ংক্রিয়ভাবে autocomplete এট্রিবিউটের মান <form> এলিমেন্টের জন্য on করা থাকে।


novalidate এট্রিবিউট

ফর্ম সাবমিটের সময় তথ্য গুলো ভ্যালিডেশন করা থেকে বিরত রাখাই হল novalidate এট্রিবিউট এর কাজ। নিছে একটি উদাহরন দেখুন।

উদাহরণ


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

কোড এডিটর


নোট - IE9 এবং এর পূর্বের সংস্করণে, novalidate এট্রিবিউট সমরথন বা support করে না।


autofocus এট্রিবিউট

ফরমের ইনপুট ফিল্ডে autofocus এট্রিবিউট ব্যবহার করা হলে ওয়েব পেজটি রিলোড হলেও ঐ ইনপুট ফিল্ডটি সিলেক্টেড অবস্থায় থাকে। নিচে একটি উদাহরন দেখুন।

উদাহরণ


Full name:<input type="text" name="fname" autofocus>

কোড এডিটর



form এট্রিবিউট

<form> এলিমেন্টের বাইরেও ইনপুট এলিমেন্ট ব্যবহার করা যায়। সেক্ষেত্রে ইনপুট এলিমেন্টের মান সার্ভারে প্রেরন করতে কোনো <form> এলিমেন্টের সাথে সংযোগ করতে হবে। ইনপুট ফিল্ডকে ফর্ম এলিমেন্টের সাথে সংযোগ করতে form এট্রিবিউট ব্যবহার করা হয়। লিংকের কাজ সম্পূর্ণ করতে ফর্মে id বা class ব্যবহার করতে হয়।ত ঐ ফর্মে্র তথ্য সাবমিট করা হবে তখন ইনপুট ফিল্ডের মান গুলোও সার্ভারে প্রেরিত হবে।
ইনপুট ফিল্ডকে একাধিক ফর্মে ব্যাবহার করতে ইনপুট ফিল্ডের form এট্রিবিউটে একাধিক id বা class ব্যবহার করা যায়। স্পেস ব্যবহার করে id বা class গুলো আলাদা করা হয়।

উদাহরণ


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

Last name: <input type="text" name="lname" form="form1">

কোড এডিটর



formaction এট্রিবিউট

formaction এট্রিবিউট, ফর্ম এলিমেন্টের action এট্রিবিউটকে ওভার-রাইট করে অর্থাৎ formaction এট্রিবিউট সার্ভারের জন্য নতুন একটি ফাইলের URL নির্দেশ করে।

input type="image" এবং input type="submit" এর সাথে formaction এট্রিবিউট ব্যবহার করা হয়।

নিচে একটি উদাহরন দেখুন, যেখানে ২ টি ভিন্ন কাজের জন্য ২ টি সাবমিট বাটন আছে।

উদাহরণ


<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 as admin">
</form>

কোড এডিটর



formenctype এট্রিবিউট

ইনপুট ফিল্ডের formenctype এট্রিবিউট, <form> এলিমেন্টের enctype এট্রিবিউটকে ওভার-রাইট করে। এটি ফর্মের তত্থের জন্য নতুন একটি এনকোডিং পদ্ধতি নির্দেশ করে। এটি শুধুমাত্র পোষ্ট ভা Post মেথডের জন্য।

input type="image" এবং input type="submit" এর সাথে formenctype এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ


<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 এট্রিবিউট

ইনপুট ফিল্ডের formmethod এট্রিবিউট, <form> এলিমেন্টের method এট্রিবিউটকে ওভার-রাইট করে থাকে। এটা ফর্মের তথ্য পাঠানোর জন্য HTTP মেথড নির্দেশ করে।

input type="image" এবং input type="submit" এর সাথে formmethod এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ


<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 এট্রিবিউট

পূর্ব-নির্ধারিত বা default ভাবে ফর্মের তথহ গুলোর বৈধতা যাচাই করে ইনপুট করার জন্য formnovalidate এট্রিবিউট ব্যবহার করা হয়। formnovalidate এট্রিবিউট কে, ফরমের ইনপুট ফিল্ডে ব্যবহার করে সেগুলোকে ওভার-রাইট করা যায় এবং এর বৈধতা যাচাই করা ছাড়াই তথ্য সার্ভারে সাবমিট করা যায়।

input type="image" এবং input type="submit" এর সাথে formmnovalidate এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ


<p class="example-text">
  <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 এট্রিবিউট

formtarget এট্রিবিউট ব্যবহার করে, ফর্মের তথ্য সাবমিট হওয়ার পর ফলাফল কোথায় দেখাবে তা নির্ধারণ করা হয়।

input type="submit" এবং input type="submit" এর সাথে formtarget এট্রিবিউট ব্যবহার করা হয়।

নিচে একটি উদাহরন দেখুন, এখানে ২টি ভিন্ন উইন্ডো এর জন্য ২তুই ভিন্ন সাবমিট বাটন আছে।

উদাহরণ


<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">
</form>

কোড এডিটর



height এবং width এট্রিবিউট

ইনপুট এলিমেন্টের দৈর্ঘ্য এবং প্রস্থকে নির্ধারণ করার জন্য height এবং width এট্রিবিউট ব্যবহার করা হয়।

কেবল মাত্র input type="image" এর সাথেই height এবং width এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ


<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

কোড এডিটর


নোট - ছবির ক্ষেত্রে কসর্বদা দৈর্ঘ্য এবং প্রস্থ নির্দেশ করা উছিত।


list এট্রিবিউট

<datalist> এলিমেন্টকে, কোন ইনপুট ফিল্ডে যুক্ত করতে list এট্রিবিউট ব্যবহার করা হয়। এই দুটির মাঝে লিংক তৈরি করতে id ব্যবহার করা হয়।

উদাহরণ


<input list="flower">

  <datalist id="flower">
  <option value="Daffodil">
  <option value="Gardenia">
  <option value="Jasmine">
  <option value="Marigold">
  <option value="Silk-Cotton">
</datalist>

কোড এডিটর



max এবং min এট্রিবিউট

ইনপুট ফিল্ডের জন্য সর্বোচ্চ এবং সর্বনিম্ন মান নির্ধারণ করতে max এবং min এট্রিবিউট ব্যবহার করা হয়। ইনপুট টাইপ number, range, date, datetime, datetime-local, month, time এবং week এর সাথে এই এট্রিবিউট ব্যবহার করা যায়।

উদাহরণ


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

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

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

কোড এডিটর



multiple এট্রিবিউট

multiple এট্রিবিউট ব্যাবহার করে একত্রে একাধিক মান কোন ইনপুট এলিমেন্টে ইনপুট করা যায়। এটি হল একটি বুলিয়ান এট্রিবিউট।

ইনপুট টাইপ email এবং file এর সাথে এটি কাজ করে।

নিচে একটি উদাহরন দেখুন, যেখানে একাধিক ফাইল আপলোড করা যায়।

উদাহরণ


Select images: <input type="file" name="img" multiple>

কোড এডিটর



pattern এট্রিবিউট

কোন ইনপুট এলিমেন্টের মানের প্যাটার্ন নির্ধারণ করতে pattern এট্রিবিউট ব্যবহার করা হয়। এটি হল একটি রেগুলার এক্সপ্রেশন(RegExp)। এটি ফরমের মানের টাইপ এবং সংখ্যা নির্ধারণ করে।

pattern এট্রিবিউট যে সকল ইনপুট টাইপ এর সাথে ব্যবহার করা যায়, সেগুল হল - text, search, url, tel, email, এবং password.

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

উদাহরণ


Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Country code">

কোড এডিটর



placeholder এট্রিবিউট

কোন ধরনের তথ্য ইনপুট করতে হবে তা সম্পর্কে ব্যবহারকারীকে সংকেত প্রদান করার জন্য placeholder এট্রিবিউট ব্যবহার করা হয়। ব্যবহারকারী ইনপুট ফিল্ডে লেখা শুরু করলে placeholder টি দেখা যায় না।

placeholder এট্রিবিউট - text, search, url, tel, email এবং password ইনপুট টাইপগুলোর সাথে ব্যবহার করা যায়।

উদাহরণ


<input type="text" name="fname" placeholder="First name">

কোড এডিটর



required এট্রিবিউট

required হল একটি বুলিয়ান এট্রিবিউট। যদি ইনপুট ফিল্ডটি অতি অবশ্যই পূরণীয় হয় সেক্ষেত্রে ইনপুট ফিল্ডে required এট্রিবিউটি যুক্ত করতে হয়। এর ফলে এই ফিল্ডে তথহ দেয়া না হলে তা সার্ভারে upload হবে না।

required এট্রিবিউট - text, search, url, tel, email, password, date pickers, number, checkbox, radio এবং file ইনপুট টাইপ গুলোর সাথে ব্যবহার করা যায়।

উদাহরণ


Username: <input type="text" name="usrname" required>

কোড এডিটর



step এট্রিবিউট

ইনপুট এলিমেন্টে পূর্ণ সংখ্যার মধ্য ব্যবধান নির্ধারণ করতে step এট্রিবিউট ব্যবহার করা হয়। উদাহরন সরুপ যদি step এট্রিবিউটের মান 5 নির্ধারণ করা হয়, তবে স্লাইডারে -5, 0, 5, 10 ইত্তাদি সংখ্যা নির্ধারণ করা যাবে।

step এট্রিবিউট যে সকল ইনপুট টাইপ গুলোর সাথে ব্যবহার করা যায় সেগুল হল - number, range, date, datetime-local, month, time and week.

টিপস - step এট্রিবিউট এর সাথে min এবং max এট্রিবিউট ব্যবহার করে ইনপুট মানের সীমাবদ্ধতা বা range তৈরি করা যায়।

উদাহরণ


<input type="number" name="points" step="3">

কোড এডিটর



ফর্ম এবং ইনপুট এলিমেন্ট

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


এইচটিএমএল ৫ এর সকল ইনপুট এট্রিবিউট

নিচে এইচটিএমএল ৫ এর সকল ইনপুট এট্রিবিউট গুলো দেখুন।

এট্রিবিউট বর্ণনা
Autocompleteআগে কোন ফরমে ইনপুট করা মান বা value থেকে নতুন মান বা value ইনপুট করতে সাহায্য করে।
Autofocuasওয়েব পেজ লোড হওয়া সম্পন্ন হলে কোন ইনপুট ফিল্ডটি সিলেক্টেড থাকবে কিনা তা নির্ধারণ করে।
formফর্মের বাইরের কোন ইনপুট ট্যাগকে id ব্যবহার করে ফর্মের সাথে লিংক করে।
formactionফর্ম সাবমিটের জন্য নতুন একটি লিংক নির্দেশ করে।
formenctypepost মেথডের জন্য সার্ভারে সাবমিটকৃত তথহ এর এনকোডিং পদ্ধতি নির্দেশ করে।
formmethodসার্ভারে ফর্মের তথ্য পাঠানোর HTTP মেথড নির্ধারণ করে।
formvalidationকোন ইনপুট ফিল্ডের তথ্যের validation বাতিল করে।
formtargetইনপুট এলিমেন্টের জন্য এটি target এট্রিবিউটের কাজ করে।
height এবং widthছবির ক্ষেত্রে কোন ইনপুট ফিল্ডের দৈর্ঘ্য এবং প্রস্থ নির্ধারণ করে।
listপূর্বনির্ধারিত মানের একটি লিস্টকে ইনপুট ফিল্ডের সাথে id এর মাধ্যমে লিংক করতে ব্যবহার করা হয়।
max এবং minইনপুট ফিল্ডের সর্বোচ্চ এবং সর্বনিন্ম মান নির্ধারণ করে।
multipleকোন ইনপুট ফিল্ডে একত্রে একাধিক মান সিলেক্ট করার জন্য ব্যবহার করা হয়।
patternকোন ইনপুট ফিল্ডের মানের জন্য প্যাটার্ন নির্ধারণ করে।
placeholderকোন ইনপুট ফিল্ডের ইনপুটকৃত তথ্য সম্পর্কে ব্যবহারকারীকে সংকেত প্রদান করে।
requiredকোন ইনপুট ফিল্ড খালি থাকলে ব্যবহারকারীকে একটি সতর্কবার্তা দেয় এবং এর ফলে ফর্মটি সাবমিট হয় না।
stepস্লাইডারে পূর্ণ সংখ্যার মধ্যবর্তী ব্যবধান গুলো নির্ধারণ করে।