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



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


value এট্রিবিউট

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

উদাহরণ

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



readonly এট্রিবিউট

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

উদাহরণ

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



disabled এট্রিবিউট

disabled এট্রিবিউট ব্যবহার করে যে কোনো ইনপুট ফিল্ডের মানকে নিষ্ক্রিয় করা হয় এবং এই ফিল্ডের মান সাবমিট হবে না।

উদাহরণ

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



size এট্রিবিউট

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

উদাহরণ

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



maxlength এট্রিবিউট

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

উদাহরণ

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


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

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


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

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

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

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

autocomplete
novalidate


autocomplete এট্রিবিউট

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

আমরা text, search, url, tel, email, password, range এবং color ইনপুট টাইপের সাথে 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 এট্রিবিউটের মান <form> এলিমেন্টের জন্য on থাকে।


novalidate এট্রিবিউট

novalidate এট্রিবিউটটি <form> এলিমেন্টে ব্যবহৃত হয়। ফর্ম সাবমিটের সময় novalidate এট্রিবিউট ফর্মের ডাটাকে ভ্যালিডেশন করা থেকে বিরত রাখে।

উদাহরণ

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


নোট - novalidate এট্রিবিউট IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।


autofocus এট্রিবিউট

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

উদাহরণ

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




form এট্রিবিউট

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

উদাহরণ

<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 এট্রিবিউটকে ওভার-রাইট করতে পারে। অর্থাৎ এটি সার্ভারের জন্য নতুন একটি ফাইলের URL নির্ধারণ করে।

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

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

উদাহরণ

<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 এট্রিবিউটকে ইনপুট ফিল্ডের formenctype এট্রিবিউট ওভার-রাইট করে। এটি ফর্মের ডেটার জন্য নতুন একটি এনকোডিং পদ্ধতি নির্ধারণ করে। এটি শুধুমাত্র পোষ্ট মেথোডের ক্ষেত্রে প্রযোজ্য।

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

উদাহরণ

<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 এট্রিবিউটকে ইনপুট ফিল্ডের formmethod এট্রিবিউট ওভার-রাইট করে। ফর্মের ডেটা পাঠানোর জন্য HTTP মেথড ডিফাইন করে।

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

উদাহরণ

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

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

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

উদাহরণ

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

<form> এলিমেন্টের target এট্রিবিউটকে ইনপুট এলিমেন্টের formtarget এট্রিবিউট ওভার-রাইট করে। এটি ফর্মের তথ্য সাবমিট হওয়ার পর ফলাফল কোথায় দেখাবে তা নির্ধারণ করে।

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

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

উদাহরণ

<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 এট্রিবিউট ব্যবহার করে ইনপুট এলিমেন্টের দৈর্ঘ্য এবং প্রস্থকে নির্ধারণ করা হয়।

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

উদাহরণ

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


নোট - ইমেজের ক্ষেত্রে সর্বদা দৈর্ঘ্য এবং প্রস্থ নির্ধারণ করুন।


list এট্রিবিউট

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

উদাহরণ

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>




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

ইনপুট ফিল্ডে সর্বনিম্ন এবং সর্বোচ্চ মান নির্ধারণ করতে min এবং max এট্রিবিউট ব্যবহার করা হয়। ইনপুট টাইপ 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, and password.

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

উদাহরণ

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




placeholder এট্রিবিউট

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

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

উদাহরণ

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




required এট্রিবিউট

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

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পূর্বে ইনপুটকৃত ভ্যালু থেকে নতুন ভ্যালু ইনপুট করতে সাহায্য করে।
Autofocuasপেজ লোড হওয়া সম্পন্ন হলে ইনপুট ফিল্ডটি সিলেক্টেড থাকবে কিনা তা নির্ধারণ করে।
formফর্মের বাইরের ইনপুট ট্যাগকে আইডির মাধ্যমে ফর্মের সাথে লিংক করে।
formactionফর্মের মূল action এট্রিবিউটকে ওভার-রাইট করে অর্থাৎ সাবমিটের জন্য নতুন একটি লিংক নির্ধারণ করে।
formenctypepost মেথোডের ক্ষেত্রে সার্ভারে সাবমিটকৃত ডেটার এনকোডিং পদ্ধতি নির্ধারণ করে।
formmethodসার্ভারে ফর্ম ডেটা পাঠানোর HTTP মেথোড নির্ধারণ করে। এটি ফর্মের মূল মেথোডকে ওভার-রাইড করে।
formvalidationইনপুট ফিল্ডের তথ্যের বৈধতা যাচাই বাতিল করে।
formtargetইনপুট এলিমেন্টের জন্য এটি target এট্রিবিউটের কাজ করে এবং ফর্ম এলিমেন্টে বিদ্যমান target এট্রিবিউটকে ওভার-রাইড করে।
height এবং widthইমেজ ইনপুট ফিল্ডের দৈর্ঘ্য এবং প্রস্থ নির্ধারণ করে।
listপূর্বনির্ধারিত ভ্যালুর একটি লিস্টকে ইনপুট ফিল্ডের সাথে আইডির মাধ্যমে লিংক করতে ব্যবহার করা হয়।
min এবং maxইনপুট ফিল্ডের সর্বনিন্ম এবং সর্বোচ্চ ভ্যালু নির্ধারণ করে।
multipleইনপুট ফিল্ডে একত্রে একাধিক মান সিলেক্ট করা সম্ভব হয়। এটি email এবং file টাইপের ক্ষেত্রে কাজ করে।
patternইনপুট ফিল্ডের ভ্যালুর জন্য প্যাটার্ন নির্ধারণ করে।
placeholderইনপুট ফিল্ডের ইনপুটকৃত তথ্য সম্পর্কে ব্যবহারকারীকে অবগত করে। যা ইনপুট ফিল্ডে টাইপ করা শুরু করলে অদৃশ্য হয়ে যায়।
requiredযদি ইনপুট ফিল্ডটি খালি থাকলে ব্যবহারকারীকে একটি সতর্কবার্তা দেয় এবং ফর্মটি সাবমিট হয় না।
stepপূর্ণ সংখ্যার মধ্যবর্তী ব্যবধান নির্ধারণ করে।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.