আমাদের টিউটোরিয়ালের এই অংশে আমরা এইচটিএমএল ফর্মে ব্যবহৃত ইনপুট এলিমেন্টে এর সকল এট্রিবিউট সম্পর্কে জানবো।
এক নজরে এট্রিবিউট সমূহ
নিম্নে আমরা এই এট্রিবিউট সম্পর্কে বিস্তারিত আলোচনা করবো।
value এট্রিবিউট
আমরা value এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডের প্রাথমিক ভ্যালুকে নির্ধারণ করতে পারিঃ
kt_satt_skill_example_id=1699
readonly এট্রিবিউট
আমরা readonly এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডের ভ্যালুকে শুধুমাত্র পড়ার অনুমতি দিতে পারি। অর্থাৎ ইনপুট ফিল্ডের ভ্যালুর কোনো ধরনের পরিবর্তন করা সম্ভব হবে নাঃ
kt_satt_skill_example_id=1701
disabled এট্রিবিউট
আমরা disabled এট্রিবিউট ব্যবহার করে যে কোনো ইনপুট ফিল্ডের ভ্যালুকে নিষ্ক্রিয় করতে পারি এবং এই ফিল্ডের ভ্যালু সাবমিট হবে নাঃ
kt_satt_skill_example_id=1702
size এট্রিবিউট
আমরা size এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডের দৈর্ঘ্য নির্ধারণ করতে পারিঃ
kt_satt_skill_example_id=1708
maxlength এট্রিবিউট
আমরা maxlength এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডে সর্বাধিক কতটি ক্যারেক্টার ইনপুট দেওয়া যাবে তা নির্ধারণ করতে পারিঃ
kt_satt_skill_example_id=1709
এখন আমরা এইচটিএমএল(৫)-এ সংযুক্ত নতুন ইনপুট এট্রিবিউট সমুহ দেখবোঃ
এক নজরে এইচটিএমএল(৫) ইনপুট এট্রিবিউট
| এট্রিবিউট | বর্ণনা |
|---|---|
| Autocomplete | পূর্বে ইনপুটকৃত ভ্যালু থেকে নতুন ভ্যালু ইনপুট করতে সাহায্য করে। |
| Autofocuas | পেজ লোড হওয়া সম্পন্ন হলে ইনপুট ফিল্ডটি সিলেক্টেড থাকবে কিনা তা নির্ধারণ করে। |
| form | ফর্মের বাইরের ইনপুট ট্যাগকে আইডির মাধ্যমে ফর্মের সাথে লিংক করে। |
| formaction | ফর্মের মূল action এট্রিবিউটকে ওভার-রাইট করে অর্থাৎ সাবমিটের জন্য নতুন একটি লিংক নির্ধারণ করে। |
| formenctype | post মেথোডের ক্ষেত্রে সার্ভারে সাবমিটকৃত ডেটার এনকোডিং পদ্ধতি নির্ধারণ করে। |
| formmethod | সার্ভারে ফর্ম ডেটা পাঠানোর HTTP মেথোড নির্ধারণ করে। এটি ফর্মের মূল মেথোডকে ওভার-রাইড করে। |
| formvalidation | ইনপুট ফিল্ডের তথ্যের বৈধতা যাচাই বাতিল করে। |
| formtarget | ইনপুট এলিমেন্টের জন্য এটি target এট্রিবিউটের কাজ করে এবং ফর্ম এলিমেন্টে বিদ্যমান target এট্রিবিউটকে ওভার-রাইড করে। |
| height এবং width | ইমেজ ইনপুট ফিল্ডের দৈর্ঘ্য এবং প্রস্থ নির্ধারণ করে। |
| list | পূর্বনির্ধারিত ভ্যালুর একটি লিস্টকে ইনপুট ফিল্ডের সাথে আইডির মাধ্যমে লিংক করতে ব্যবহার করা হয়। |
| minimum এবং maximum | ইনপুট ফিল্ডের সর্বনিন্ম এবং সর্বোচ্চ ভ্যালু নির্ধারণ করে। |
| multiple | ইনপুট ফিল্ডে একত্রে একাধিক ভ্যালু সিলেক্ট করা সম্ভব হয়। এটি email এবং file টাইপের ক্ষেত্রে কাজ করে। |
| pattern | ইনপুট ফিল্ডের ভ্যালুর জন্য প্যাটার্ন নির্ধারণ করে। |
| placeholder | ইনপুট ফিল্ডের ইনপুটকৃত তথ্য সম্পর্কে ব্যবহারকারীকে অবগত করে। যা ইনপুট ফিল্ডে টাইপ করা শুরু করলে অদৃশ্য হয়ে যায়। |
| required | যদি ইনপুট ফিল্ডটি খালি থাকলে ব্যবহারকারীকে একটি সতর্কবার্তা দেয় এবং ফর্মটি সাবমিট হয় না। |
| step | পূর্ণ সংখ্যার মধ্যবর্তী ব্যবধান নির্ধারণ করে। |
autocomplete এট্রিবিউট
autocomplete এট্রিবিউট ইনপুট ফিল্ডে পূর্বে ব্যবহৃত ভ্যালু থেকে নতুন ভ্যালু ইনপুট করতে সাহায্য করে। আমরা text, search, url, tel, email, password, range এবং color ইনপুট টাইপের সাথে autocomplete এট্রিবিউটটি ব্যবহার করতে পারবোঃ
kt_satt_skill_example_id=1710
বিঃদ্রঃ autocomplete এর সাজেশন দেখার জন্য প্রথমে কিছু তথ্য ইনপুট করে নিন। কিছু ব্রাউজারের ক্ষেত্রে autocomplete ফাংশনটি চালু করে নিতে হবে। autocomplete এর সাজেশনকৃত তথ্য সমুহ ব্রাউজারে জমা থাকে।
আমরা <form> এলিমেন্টের মধ্যেও autocomplete এট্রিবিউটটি ব্যবহার করতে পারবো। ডিফল্ট ভাবে autocomplete এট্রিবিউটের মান <form> এলিমেন্টের জন্য on থাকে।
kt_satt_skill_example_id=1711
novalidate এট্রিবিউট
novalidate এট্রিবিউটটি <form> এলিমেন্টে ব্যবহৃত হয়। ফর্ম সাবমিটের সময় novalidate এট্রিবিউট ফর্মের ডেটাকে ভ্যালিডেশন করা থেকে বিরত রাখে।
kt_satt_skill_example_id=1712
autofocus এট্রিবিউট
autofocus একটি বুলিয়ান এট্রিবিউট। ইনপুট ফিল্ডে autofocus এট্রিবিউট ব্যবহার করলে একটি পেজ লোড হলে ঐ ইনপুট ফিল্ডটি সিলেক্টেড অবস্থায় থাকবে।
kt_satt_skill_example_id=1715
form এট্রিবিউট
আমরা ফর্ম এলিমেন্টের বাইরেও ইনপুট এলিমেন্ট ব্যবহার করতে পারি। উক্ত ইনপুট এলিমেন্টের ভ্যালু সার্ভারে প্রেরন করতে যে কোনো ফর্ম এলিমেন্টের সাথে লিংক করতে হবে। ইনপুট ফিল্ডটিকে ফর্ম এলিমেন্টের সাথে লিংক করতে আমরা form এট্রিবিউট ব্যবহার করবো। লিংকের কাজ সম্পন্ন করতে আমরা ফর্মে আইডি ব্যবহার করবো। যখন উক্ত ফর্মে ডেটা সাবমিট করা হবে তখন ইনপুট ফিল্ডের ভ্যালুও সার্ভারে প্রেরিত হবে।
আমরা উক্ত ইনপুট ফিল্ডটিকে একাধিক ফর্মে নির্দেশ করতে ইনপুট ফিল্ডের form এট্রিবিউটে একাধিক আইডি ব্যবহার করতে পারি। আইডি সমুহকে আলাদা করতে আমরা স্পেস ব্যবহার করবো।
kt_satt_skill_example_id=1717
formaction এট্রিবিউট
ইনপুট ফিল্ডের formaction এট্রিবিউট ফর্ম এলিমেন্টের action এট্রিবিউটকে ওভার-রাইট করতে পারে। অর্থাৎ এটি সার্ভারের জন্য নতুন একটি ফাইলের URL নির্ধারণ করে।
formaction এট্রিবিউট input type="submit" এবং input type="image" এর সাথে ব্যবহার করা যায়।
kt_satt_skill_example_id=1718
formenctype এট্রিবিউট
<form> এলিমেন্টের enctype এট্রিবিউটকে ইনপুট ফিল্ডের formenctype এট্রিবিউট ওভার-রাইট করে। এটি ফর্মের ডেটার জন্য নতুন একটি এনকোডিং পদ্ধতি নির্ধারণ করে। এটি শুধুমাত্র পোষ্ট মেথোডের ক্ষেত্রে প্রযোজ্য।
formenctype এট্রিবিউট input type="submit" এবং input type="image" এর সাথে ব্যবহার করা যায়।
kt_satt_skill_example_id=1719
formmethod এট্রিবিউট
<form> এলিমেন্টের method এট্রিবিউটকে ইনপুট ফিল্ডের formmethod এট্রিবিউট ওভার-রাইট করে। ফর্মের ডেটা পাঠানোর জন্য HTTP মেথড ডিফাইন করে।
formmethod এট্রিবিউট input type="submit" এবং input type="image" এর সাথে ব্যবহার করা যায়।
kt_satt_skill_example_id=1720
formnovalidate এট্রিবিউট
ডিফল্টভাবে ফর্মের ডেটা গুলোর বৈধতা যাচাই করে ইনপুট করা হয়। আমরা ইনপুট ফিল্ডে formnovalidate এট্রিবিউট ব্যবহার করে তা ওভার-রাইট করতে পারি এবং বৈধতা যাচাই করা ব্যাতিত ডেটা সাবমিট করতে পারি।
formmnovalidate এট্রিবিউট input type="submit" এবং input type="image" এর সাথে ব্যবহার করা যায়।
kt_satt_skill_example_id=1721
formtarget এট্রিবিউট
<form> এলিমেন্টের target এট্রিবিউটকে ইনপুট এলিমেন্টের formtarget এট্রিবিউট ওভার-রাইট করে। এটি ফর্মের তথ্য সাবমিট হওয়ার পর ফলাফল কোথায় দেখাবে তা নির্ধারণ করে।
formtarget এট্রিবিউট input type="submit" এবং input type="image" এর সাথে ব্যবহার করা যায়।
kt_satt_skill_example_id=1722
height এবং width এট্রিবিউট
height এবং width এট্রিবিউট ব্যবহার করে ইনপুট এলিমেন্টের দৈর্ঘ্য এবং প্রস্থকে নির্ধারণ করতে পারি।
height এবং width এট্রিবিউট input type="image" এর সাথেই শুধুমাত্র ব্যবহার করা হয়।
kt_satt_skill_example_id=1723
list এট্রিবিউট
একটি ইনপুট ফিল্ডে <datalist> এলিমেন্টকে যুক্ত করতে list এট্রিবিউট ব্যবহার করা হয়। এই দুইয়ের মধ্য লিংক তৈরি করতে আইডি ব্যবহার করা হয়।
kt_satt_skill_example_id=1724
minimum এবং maximum এট্রিবিউট
ইনপুট ফিল্ডে সর্বনিম্ন এবং সর্বোচ্চ ভ্যালু নির্ধারণ করতে minimum এবং maximum এট্রিবিউট ব্যবহার করা হয়। ইনপুট টাইপ number, range, date, datetime, datetime-local, month, time এবং week এর সাথে ব্যবহার করা যাবে।
kt_satt_skill_example_id=1725
multiple এট্রিবিউট
multiple একটি বুলিয়ান এট্রিবিউট। এটি ব্যবহারকারীকে ইনপুট এলিমেন্টে একত্রে একাধিক ভ্যালু ইনপুট করতে সাহায্য করে।
ইনপুট টাইপ email এবং file এর সাথে এটি কাজ করে।
kt_satt_skill_example_id=1726
pattern এট্রিবিউট
pattern এট্রিবিউট হচ্ছে একটি রেগুলার এক্সপ্রেশন(RegExp) যা ইনপুট এলিমেন্টের ভ্যালুর প্যাটার্ন নির্ধারণ করে অর্থাৎ ভ্যালুর টাইপ এবং সংখ্যা নির্ধারণ করে।
kt_satt_skill_example_id=1728
placeholder এট্রিবিউট
ইনপুট এলিমেন্টের placeholder এট্রিবিউট কোন ধরনের তথ্য ইনপুট করতে হবে তা সম্পর্কে ব্যবহারকারীকে অবগত করে। ব্যবহারকারী ইনপুট ফিল্ডে লেখা শুরু করলে placeholder টি অদৃশ্য হয়ে যাবে।
placeholder এট্রিবিউট - text, search, url, tel, email এবং password ইনপুট টাইপগুলোর সাথে কাজ করে।
kt_satt_skill_example_id=1729
required এট্রিবিউট
ইনপুট ফিল্ডটি যদি অবশ্যই পূরণীয় হয় সেক্ষেত্রে ইনপুট ফিল্ডে required এট্রিবিউটি যুক্ত করুন। required একটি বুলিয়ান এট্রিবিউট।
required এট্রিবিউট - text, search, url, tel, email, password, date pickers, number, checkbox, radio এবং file ইনপুট টাইপ গুলোর সাথে কাজ করে।
kt_satt_skill_example_id=1732
step এট্রিবিউট
ইনপুট এলিমেন্টে পূর্ণ সংখ্যার মধ্য ব্যবধান নির্ধারণ করতে step এট্রিবিউট ব্যবহার করা হয়।
kt_satt_skill_example_id=1734
Read more
