এইচটিএমএল টিউটোরিয়ালের এই অংশে এইচটিএমএল ফর্মে ব্যবহৃত ইনপুট এলিমেন্টের সকল এট্রিবিউট গুলো সম্পর্কে আলোচনা করা হয়েছে।
value এট্রিবিউট ব্যবহার করে ফরমের ইনপুট ফিল্ডের প্রাথমিক মান বা value কে নির্ধারণ করা হয়। নিছে একটি উদাহরন দেখুন।
<form action=""> Full name: <br /> <input type="text" name="fullname" value="SataRupa">
</form>
readonly এট্রিবিউট ব্যবহার করে ফরমের ইনপুট ফিল্ডের মান বা value কে শুধুমাত্র পড়ার অনুমতি দেয়া হয় অর্থাৎ এর ফলে বাবহারকারি কেবল ইনপুট ফিল্ডের মান বা value দেখতে পারবে কিন্তু কোনো ধরনের পরিবর্তন করতে পারবে না। নিচে একটি উদাহরন দেখুন।
<form action=""> Full name:<br /> <input type="text" name="fullname" value="SataRupa" readonly> </form>
disabled এট্রিবিউট ব্যবহার করে ফরমের কোনো ইনপুট ফিল্ডের মানকে নিষ্ক্রিয় করা হয় অর্থাৎ ব্যবহারকারী যে মানই এই ফিল্ডে দিক না কেন, তা সাবমিট হবে না।
<form action=""> Full name:<br /> <input type="text" name="fullname" value="SataRupa" disabled> </form>
size এট্রিবিউট ব্যবহার করে ফরমের ইনপুট ফিল্ডের দৈর্ঘ্য নির্ধারণ করা হয়। নিচে এর একটি উদাহরন দেখুন।
<form action=""> Full name:<br /> <input type="text" name="fullname" value="sataRupa" size="50">
</form>
ফরমের ইনপুট ফিল্ডে সর্বাধিক কতটি ক্যারেক্টার ইনপুট দেয়া যাবে তা নির্ধারণ করার জন্য 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 এট্রিবিউট ব্যবহার করা
হয়।
অর্থাৎ ইউজার আগে ব্যবহার করেছে এমন মান গুলো ইনপুট ফিল্ডে স্বয়ংক্রিয়ভাবে প্রদর্শিত হয়।
আমরা 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 এট্রিবিউট এর কাজ। নিছে একটি উদাহরন দেখুন।
<form action="/action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>
নোট - IE9 এবং এর পূর্বের সংস্করণে, novalidate এট্রিবিউট সমরথন বা support করে না।
ফরমের ইনপুট ফিল্ডে autofocus এট্রিবিউট ব্যবহার করা হলে ওয়েব পেজটি রিলোড হলেও ঐ ইনপুট ফিল্ডটি সিলেক্টেড অবস্থায় থাকে। নিচে একটি উদাহরন দেখুন।
Full name:<input type="text" name="fname" autofocus>
<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 এট্রিবিউট, ফর্ম এলিমেন্টের 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 এট্রিবিউট, <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 এট্রিবিউট, <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>
পূর্ব-নির্ধারিত বা 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 এট্রিবিউট ব্যবহার করে, ফর্মের তথ্য সাবমিট হওয়ার পর ফলাফল কোথায় দেখাবে তা নির্ধারণ করা হয়।
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 এট্রিবিউট ব্যবহার করা হয়।
কেবল মাত্র input type="image" এর সাথেই height এবং width এট্রিবিউট ব্যবহার করা হয়।
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
নোট - ছবির ক্ষেত্রে কসর্বদা দৈর্ঘ্য এবং প্রস্থ নির্দেশ করা উছিত।
<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 এট্রিবিউট ব্যবহার করা হয়। ইনপুট টাইপ 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 এট্রিবিউট ব্যাবহার করে একত্রে একাধিক মান কোন ইনপুট এলিমেন্টে ইনপুট করা যায়। এটি হল একটি বুলিয়ান এট্রিবিউট।
ইনপুট টাইপ email এবং file এর সাথে এটি কাজ করে।
নিচে একটি উদাহরন দেখুন, যেখানে একাধিক ফাইল আপলোড করা যায়।
Select images: <input type="file" name="img" multiple>
কোন ইনপুট এলিমেন্টের মানের প্যাটার্ন নির্ধারণ করতে 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 এট্রিবিউট - text, search, url, tel, email এবং password ইনপুট টাইপগুলোর সাথে ব্যবহার করা যায়।
<input type="text" name="fname" placeholder="First name">
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 এট্রিবিউটের মান 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 | ফর্ম সাবমিটের জন্য নতুন একটি লিংক নির্দেশ করে। |
formenctype | post মেথডের জন্য সার্ভারে সাবমিটকৃত তথহ এর এনকোডিং পদ্ধতি নির্দেশ করে। |
formmethod | সার্ভারে ফর্মের তথ্য পাঠানোর HTTP মেথড নির্ধারণ করে। |
formvalidation | কোন ইনপুট ফিল্ডের তথ্যের validation বাতিল করে। |
formtarget | ইনপুট এলিমেন্টের জন্য এটি target এট্রিবিউটের কাজ করে। |
height এবং width | ছবির ক্ষেত্রে কোন ইনপুট ফিল্ডের দৈর্ঘ্য এবং প্রস্থ নির্ধারণ করে। |
list | পূর্বনির্ধারিত মানের একটি লিস্টকে ইনপুট ফিল্ডের সাথে id এর মাধ্যমে লিংক করতে ব্যবহার করা হয়। |
max এবং min | ইনপুট ফিল্ডের সর্বোচ্চ এবং সর্বনিন্ম মান নির্ধারণ করে। |
multiple | কোন ইনপুট ফিল্ডে একত্রে একাধিক মান সিলেক্ট করার জন্য ব্যবহার করা হয়। |
pattern | কোন ইনপুট ফিল্ডের মানের জন্য প্যাটার্ন নির্ধারণ করে। |
placeholder | কোন ইনপুট ফিল্ডের ইনপুটকৃত তথ্য সম্পর্কে ব্যবহারকারীকে সংকেত প্রদান করে। |
required | কোন ইনপুট ফিল্ড খালি থাকলে ব্যবহারকারীকে একটি সতর্কবার্তা দেয় এবং এর ফলে ফর্মটি সাবমিট হয় না। |
step | স্লাইডারে পূর্ণ সংখ্যার মধ্যবর্তী ব্যবধান গুলো নির্ধারণ করে। |