এইচটিএমএল <input> ট্যাগ
<input> ট্যাগের ব্রাউজার সাপোর্ট
| এলিমেন্ট | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
<input> |
সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন |
সংজ্ঞা ও ব্যবহার
<input> ট্যাগের মাধ্যমে একটি ইনপুট ফিল্ডকে বুঝায় যেখানে ব্যবহারকারী তথ্য প্রদান করতে পারে।
<input> এলিমেন্টটি ফরম এলিমেন্টের মধ্যে ব্যবহার করা হয় এবং এর মাধ্যমে ব্যবহারকারীর নিকট থেকে প্রয়োজনীয় ডাটা সংগ্রহ করা হয়।
এট্রিবিউটের ধরনের উপর নির্ভর করে একটি ইনপুট ফিল্ডকে বিভিন্ন উদ্দেশ্যে ব্যবহারা করা যেতে পারে।
নিচে তিনটি ইনপুট ফিল্ডসহ একটি এইচটিএমএল ফরম দেখানো হলোঃ দুইটি টেক্সট ফিল্ড এবং একটি সাবমিট বাটন
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First Name: <input type="text" name="FirstName" value="Kanika">
Last Name: <input type="text" name="lastName" value="Chowdhury">
<input type="submit" value="Submit">
</form>
</body>
</html>
যখন আপনি সাবমিট বাটনে ক্লিক করবেন, তখন সার্ভার আপনার ইনপুট গুলোকে "action_page.php" ফাইলের মাধ্যমে প্রক্রিয়াজাত করে এবং ফলাফল ফেরত দিবে।
ফলাফল
টীকা ও মন্তব্যঃ
<input>একটি Empty ট্যাগ। এতে শুধুমাত্র এট্রিবিউট রয়েছে। এর কোন ক্লোজিং ট্যাগ নেই।<input>এলিমেন্টের জন্য লেভেল নির্ধারণ করতে<label>এলিমেন্টটি ব্যবহার করুন।
এট্রিবিউট
নিচের টেবিলে <input> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ
| এট্রিবিউট | ভ্যালু | বর্ণনা |
|---|---|---|
| accept | file_extension audio/* video/* image/* media_type |
সার্ভার গ্রহণ করে এমন ফাইলগুলোর ধরন উল্লেখ করে (শুধুমাত্র type="file" এর জন্য) |
| align | left right top middle bottom |
এইচটিএমএল(৫)-এ সাপোর্ট করে না। ইমেজ ইনপুটের alignment নির্ধারণ করে। (শুধুমাত্র type="image" এর জন্য) |
| alt | text | ইমেজের জন্য একটি বিকল্প টেক্সট নির্ধারণ কওরে। (শুধুমাত্র type="image" এর জন্য) |
| autocomplete | on off |
<input> এলিমেন্ট autocomplete ফিচার enabled থাকবে কিনা তা নির্ধারণ করে। |
| autofocus | autofocus | যখন পেজ লোড হবে <input> এলিমেন্টের জন্য স্বয়ংক্রিয় ফোকাস নির্ধারণ করে। |
| checked | checked | যখন পেজ লোড হয় তখন <input> এলিমেন্টটিকে পূর্ব থেকেই check করা অবস্থায় প্রদর্শনের জন্য এটি ব্যবহার করা হয়। (শুধুমাত্র type="checkbox" অথবা type="radio" এর জন্য) |
| disabled | disabled | <input> এলিমেন্টকে disable করে। |
| form | form_id | <input> সংশ্লিষ্ট এক বা একাধিক ফরম উল্লেখ করে। |
| formaction | URL | এমন একটি ফাইলের URL উল্লেখ করে যেটি ফরম জমা দেওয়ার সময় যেটি ইনপুট প্রক্রিয়া নিয়ন্ত্রণ করবে। (শুধুমাত্র type="submit" এবং type="image" এর জন্য) |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
সার্ভারে ফরম জমা দেওয়ার সময় ফর্ম-ডাটা কিভাবে এনকোড করা উচিত তা উল্লেখ করে। (শুধুমাত্র type="submit" এবং type="image" এর জন্য) |
| formmethod | get post |
অ্যাকশন URL এ ডাটা পাঠানোর জন্য HTTP মেথড নির্ধারণ করে। (শুধুমাত্র type="submit" এবং type="image" এর জন্য) |
| formnovalidate | formnovalidate | ফরম জমা দেওয়ার সময় ফরম এলিমেন্টগুলো যাচাই করা হবে মর্মে উল্লেখ করে। |
| formtarget | _blank _self _parent _top framename |
ফরম জমা দেওয়ার পরে প্রাপ্ত প্রতিক্রিয়া কোথায় প্রদর্শিত হবে তা উল্লেখ করে। (শুধুমাত্র type="submit" এবং type="image" এর জন্য) |
| height | pixels | <input> এলিমেন্টের height নির্ধারণ করে। (শুধুমাত্র type="image" এর জন্য) |
| list | datalist_id | একটি <datalist> এলিমেন্টকে নির্দেশ করে যেটি <input> এলিমেন্টের জন্য পুর্বে-নির্ধারিত অপশন লিস্ট সরবরাহ করে। |
| max | number date |
<input> এলিমেন্টের জন্য সর্বোচ্চ মান নির্ধারণ করে। |
| maxlength | number | <input> এলিমেন্টে ভ্যালু হিসেবে সর্বোচ্চ কতটি অক্ষর ইনপুট দেওয়া যাবে তা নির্ধারণ করে। |
| min | number date |
<input> এলিমেন্টে ভ্যালু হিসেবে সর্বনিম্ন কতটি অক্ষর ইনপুট দেওয়া যাবে তা নির্ধারণ করে। |
| multiple | multiple | <input> এলিমেন্টে ব্যবহারকারীকর্তৃক একাধিক ভ্যালু প্রবেশ করার সুযোগ দেয়। |
| name | text | <input> এলিমেন্টের জন্য একটি নাম নির্ধারণ করে। |
| pattern | regexp | <input> এলিমেন্টের মান পরীক্ষা করার জন্য একটি রেগুলার এক্সপ্রেশন নির্ধারণ করে। |
| placeholder | text | <input> এলিমেন্টে কী ধরনের ভ্যালু ইনপুট দিতে হবে তার ধারনা প্রদানের জন্য ব্যবহৃত হয়। |
| readonly | readonly | ইনপুট ফিল্ডকে শুধুমাত্র read-only করে। অর্থাৎ ব্যবহারকারী এটিতে কোন ইনপুট দিতে পারবে না। |
| required | required | ফরম সাবমিট করার পুর্বে ইনপুট ফিল্ডটি অবশ্যই পূরন করার শর্ত জুড়ে দেয়। |
| size | number | <input> এলিমেন্টে অক্ষরের সংখ্যা নির্ধারণ করে। |
| src | URL | সাবমিট বাটন হিসেবে ব্যবহারের জন্য ইমেজের URL/সোর্স নির্ধারণ করে (শুধুমাত্র type="image" এর জন্য) |
| step | number | ইনপুট ফিল্ডের জন্য ভ্যালিড সংখ্যার interval নির্ধারণ করে। |
| type | button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week | <input> এলিমেন্টের টাইপ কোন ধরনের হবে তা নির্ধারণ করে। |
| value | text | <input> এলিমেন্টের ভ্যালু নির্ধারণ করে। এটি ডিফল্ট ভ্যালু হিসেবে ইনপুট ফিল্ডে প্রদর্শিত হয় এবং ব্যবহারকারী এটিকে এডিট করতে পারে। |
| width | pixels | <input> এলিমেন্টের width নির্ধারণ করে (শুধুমাত্র type="image" এর জন্য) |
<input> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?
| গ্লোবাল এট্রিবিউট | ইভেন্ট এট্রিবিউট |
|---|---|
| সাপোর্ট করে | সাপোর্ট করে |