আস্সালামুআলাইকুম। এই পোস্ট এ আমি আপনাদের কিছু গুরুত্বপূর্ণ html এট্রিবিউট সম্পর্কে বলবো যেইগুলা হয়তো আপনি আগে জানতেন না। নিচের সমস্ত এট্রিবিউট গুলো লিখা অনেক সহজ এবং সাধারণ কাজগুলি অর্জন করতে আপনাকে সাহায্য করতে পারে, যা আপনি আগে কিছু জটিল লাইব্রেরি ব্যবহার করে করতেন। এতে আপনার প্রজেক্ট এর সাইজও তুলনামূলক কমবে।
এই পোস্ট এ , আমি আমার এট্রিবিউট গুলু পর্যালোচনা করব এবং কোড স্নিপেটগুলি অন্তর্ভুক্ত করব, যাতে আপনার জন্য এট্রিবিউট গুলির ব্যবহার এবং বোঝা সহজ হয়৷
১. Accept
নিচে এর ব্যবহার দেয়া হলো : <input type=”file” accept=”.jpg, .png”>
এটি দ্বারা আপনি বলে দিতে পারবেন ব্যবহারকারী কোন টাইপ এর ফাইল যুক্ত করতে পারবে। শুধুমাত্র <input> ট্যাগের টাইপ:ফাইল এর সাথে এটি ব্যবহার করা হয়। এক বা একাধিক ফাইল টাইপ এর জন্য কমা ব্যবহার করতে হয় । নির্দিষ্ট মিডিয়া টাইপের সমস্ত ফাইলকে অনুমতি দিতে, accept=”image/*” ব্যবহার করতে হবে ।
২. Autofocus
এটি নির্দেশ করে যে নির্দিষ্ট এলিমেন্ট টিতে পেজ লোডের সাথে সাথে ফোকাস করতে হবে । <input type=”text” autofocus /> একটি নির্দিষ্ট ডকুমেন্ট এ একটি মাত্র এলিমেন্ট এর উপর এটি ব্যবহার করা যাবে । একাধিক উপাদান প্রয়োগ করা হলে শুধুমাত্র প্রথমটি ফোকাস পাবে।
৩. Inputmode
উপাদান বা এর ডাটা সম্পাদনা করার সময় ব্যবহারকারী টাইপ করবে এমন ডেটার টাইপ এর ইঙ্গিত দেয় ।
<input type=”text” inputmode=”url” />
<input type=”text” inputmode=”email” />
<input type=”text” inputmode=”numeric” />
এটি একটি ব্রাউজারকে একটি ভার্চুয়াল কীবোর্ড প্রদর্শন করতে দেয়।
৪. প্যাটার্ন
একটি নির্দিষ্ট করে যে <input> এর মানটি ফর্ম জমা দেওয়ার পরে চেক করা হয়েছে ।
<input name=”username” id=”username” pattern=”[A-Za-z0-9]+”>
৫.Required
নিশ্চিত করে যে ফর্মটি জমা দেওয়ার আগে উপাদানটি ইনপুট বক্সটি অবশ্যই পূরণ করতে হবে।
<form action=”/send_form.js”>
<input type=”text” name=”username” required>
</form>
৬. Autocomplete
ইমেল, ফোন নম্বর, দেশ ইত্যাদির মতো ফর্ম ইনপুট গুলো পূরণ করতে ব্রাউজারটির autocomplete প্রদানের অনুমতি রয়েছে কিনা তা নির্দিষ্ট করে৷
<input type=”email” name=”email” autocomplete=”off” />
autocomplete এর অন্যান্য বৈশিষ্ট জানার জন্য এই লিংক ভিজিট করুন।
৭. Multiple
এই এট্রিবিউট টি ব্যবহারকারীকে একাধিক মান নির্বাচন করতে দেয়।
<input type=”file” multiple />
আপনি <input> এবং <select> ট্যাগের ফাইল এবং ইমেল টাইপ এর সাথে এটি ব্যবহার করতে পারেন।
৮. Download
ব্যবহারকারী হাইপারলিঙ্কে ক্লিক করলে এটি ডাউনলোড করা হবে কিনা তা নির্দিষ্ট করে।
<a href=”document.pdf” download>পিডিএফ ডাউনলোড করুন</a>
৯. contenteditable
এই এট্রিবিউট টি ব্যবহারকারীকে উপাদানটির এডিট করতে দেয়।
<div contenteditable=”true”>
this is a editable content
</div>
১০. readonly
এটি নির্দিষ্ট করে যে একটি ইনপুট টাইপ টি শুধুমাত্র পঠনযোগ্য। এডিট করা যাবেনা। <input type=”text” id=”sports” name=”sports” value=”golf” readonly>
