HTML form এ HTML Input Attributes এর ব্যবহার

আমরা জানি যে, HTML form তৈরী করতে হলে HTML এর বিভিন্ন Input Elements এর সাহায্য নিতে হয়। এই HTML Input Elements গুলোর আবার বিভিন্ন HTML Input Attributes রয়েছে। আজকে আমরা HTML Input Elements এর  Attributes নিয়ে আলোচনা করব।

HTML value Attribute এর কাজ

HTML <input> Element এর value attribute এর কাজ হলো প্রাথমিক ভাবে এই HTML input field এর কিছু value আগে থেকে সেট করা। যেমন-

<input type="text" id="fname" name="fname" value="Shibbir Ahmed">

এখানে আগে থেকেই আমরা এই input field এর ভ্যালু Shibbir Ahmed দিয়েছি কিন্তু চাইলে আমরা এই input field এর ভ্যালুকে মুছে ফেলে আবার লিখতওে পারি।

HTML readonly Attribute এর কাজ

HTML input field কে যদি আমরা শুধুমাত্র read-only মুডে রাখতে চাই মানে এই input field এর ইউজার কোন কিছু লিখতে পারবে না তাহলে readonly attribute ব্যবহার করব। যেমন-

<input type="text" id="fname" name="fname" value="Shibbir Ahmed" readonly>

এথন এই input field টিতে আর কোন কিছু লিখা যাবে না কারন আমরা বলে দিয়েছি যে এটি শুধুমাত্র readonly মুডে থাকবে।

HTML disabled Attribute এর কাজ

html disabled Attribute এর কাজ হলো যে, নির্দিষ্ট কোন input field disabled অবস্থায় থাকবে মানে আমরা এই field টিতে কোন কিছু লিখতে পারব না। যেমন –

<input type="text" id="fname" name="fname" value="Shibbir Ahmed" disabled>

তবে, এই disabled এবং readonly প্রায় একই হয়ে গেল তাই না? না। এর কিছু পার্থক্য রয়েছে। যেমন- disabled অবস্থায় input field এর ভ্যালু সাবমটি করলে যাবে না এবং এই disabled অবস্থায় input field এর ভ্যালু clickable হবে না মানে এই input field এর ভ্যালু সিলেক্ট করা যাবে ন।

HTML size Attribute এর কাজ

এই size attribute এর কাজ হলো যে, input field টি দেখতে কতটুকু width এর হবে। সাধারনত size attribute এর ভ্যালু ২০ হয় আমরা চাইলে এর মান আরো বাড়াতে পারি। মেযন-

<input type="text" id="fname" name="fname" value="Shibbir Ahmed" size="30">

তবে মনে রাখতে হবে যে, এই size attribute টি শুধুমাত্র text, search, tel, url, email, and password নামরে input type attribute এর ভ্যালুর জন্য কাজ করবে।

HTML maxlength Attribute এর কাজ

আমরা কোন ১ টি input field এ সর্বোচ্চ কতগুলো character লিখতে চাই তা নির্ধারন করার জন্য এই maxlength attribute ব্যবহার করে থাকি। মেযন-

<input type="text" id="fname" name="fname" value="Shibbir Ahmed" maxlength="20">

এর মানে হলো যে, এই input field এ আমরা ২০টি characters এর বেশি লিখতে পারব না।

HTML min and max Attributes এর কাজ

কোন ১টি input field এর সর্বনিম্ন বা সর্বোচ্চ ভ্যালু সেট করার জন্য এই min এবং max attribute ব্যবহার করা হয়। যেমন-

<input type="number" id="quantity" name="quantity" min="1" max="5">

এখানে বলা হচ্ছে যে, এই input field এর ভ্যালু সর্বনিম্ন ১ এবং সর্বোচ্চ ৫ হবে। তবে মনে রাখতে হবে যে, এই min এবং max attribute টি শুধুমাত্র number, range, date, datetime-local, month, time এবং week নামের input type attribute এর ভ্যালুর জন্য কাজ করবে।

HTML multiple Attribute এর কাজ

html multiple attribute এর কাজ হলো ইউজার ১টি input field এ একের অধিক ভ্যালু সেট করতে পারবে। যেমন –

<input type="file" id="files" name="files" multiple>

এখানে এই input field এর অমরা একের অধিক file আপলোড করতে পারব কারন আমরা multiple attribute টি ব্যবহার করেছি। এই attribute টি email নামরে input type attribute এর ভ্যালুর জন্যও কাজ করবে।

HTML pattern Attribute এর কাজ

আমরা যদি কোন input field এর ভ্যালু নির্দিষ্ট কোন ১টি pattern এ চাই তাহলে এই pattern attribute টি ব্যবহার করব। যেমন-

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

এখানে বলা হচ্ছে যে, এই input field এর ভ্যালু অবশ্যই ইংরেজী বড় হাতের বা ছোট হাতের হতে হবে এবং যার সর্বোচ্চ ক্যারেক্টার হবে ৩টি। যেমন আমরা যদি এ input field এর ভ্যালু hello123 দেই তাহলে একটি ইরর মেসেজ দেখাবে কারন এর সর্বোচ্চ ক্যারেক্টার ৩ এর বেশি হয়েছে কিন্তু আমাদের pattern বলেছি যে শুধুমাত্র ৩ অক্ষরের ক্যারেক্টার হবে।

HTML placeholder Attribute এর কাজ

কোন ১ টি input field কি জন্য তৈরী করা হয়েছে তার একটি hint দেওয়ার জন্য এই placeholder attribute টি ব্যবহার করা হয। যেমন –

<input type="text" id="fname" name="fname" placeholder="Enter your first name">

এখানে, Enter your first name দেওয়ার ফলে আমরা বুঝতে পারব যে, কিজন্য এই input field টি ব্যবহার করা হয়েছে। তবে যখন অমরা এই input field এ কিছু লিখব তখন আর এই hint টি দেখা যাবে না।
মনে রাখতে হবে যে, এই placeholder attribute টি শুধুমাত্র text, search, url, tel, email, এবং password নামের input type attribute এর ভ্যালুর জন্যও কাজ করবে।

HTML required Attribute এর কাজ

কোন ১ টি input field যদি অবশ্যই পূরন করা লাগে সেই ক্ষেত্রে আমরা এই required Attribute টি ব্যবহার করব। যেমন –

<input type="text" id="fname" name="fname" placeholder="Enter your first name" required>

এখন আমরা যদি এই input field টি পুূরন করা ছাড়া HTML FORM টি সাবমটি করি তাহলে একটি ইরর মসেজে দেখাবে।
মনে রাখতে হবে যে, এই required attribute টি শুধুমাত্র text, search, url, tel, email, password, date pickers, number, checkbox, radio, এবং file নামের input type attribute এর ভ্যালুর জন্য কাজ করবে।

HTML step Attribute এর কাজ

কোন input field এর নাম্বার ভ্যালূ যদি আমরা ৩, ৪ বা নির্দিষ্ট সংক্ষ্যক পরপর বাড়াতে চাই তাহলে এই step attribute টি ব্যবহার করব। যেমন –

<input type="number" id="points" name="points" step="3">

এখন যদি আমরা এই input field এর ভ্যালু বাড়াই তাহলে দেখতে যে ৩ করে বাড়ছে মানে ৬, ৯, ১২ হচ্ছে বা যদি কমাই তাহলে হবে ০, -৩, -৬ ইত্যাদি।
মনে রাখতে হবে যে, এই required attribute টি শুধুমাত্র umber, range, date, datetime-local, month, time এবং week নামের input type attribute এর ভ্যালুর জন্য কাজ করবে।

HTML autofocus Attribute এর কাজ

মনে করুন আমরা ১টি লগিন পেজে গিয়েছে। এই পেজে লগিন ফর্মটি দেখা যাচ্ছে যেখানে ২ টি input field রয়েছে। একটি হলো username এবং আরেকটি হলো password। এখন এই username ফিল্ডে টাইপ করতে হলে প্রথমে আমাদেরকে মাউসের মাধ্যমে ঐ ফিল্ডে যেতে হবে। কিন্তু আমরা যদি এটি অটোমেটিক করতে চাই তাহলে এই autofocus attribute টি ব্যবহার করব। মেযন –

<input type="text" id="username" name="username" autofocus><br>
<input type="password" id="password" name="password"><br><br>

এখানে username ফিল্ডটি অটোমেটিক ভাবে ফোকস হয়ে যাবে autofocus attribute ব্যবহার করার কারনে।

HTML list Attribute এর কাজ

HTML list attribute টি ব্যবহার করা হয় datalist নামের element এর জন্য। যেমন –

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

এই datalist element এর মাধ্যমে আমরা আগে থেকেই দেওয়া কোন ডাটা আমরা টাইপ করতে পারব বা সিলেক্ট করতে পারব।

HTML autocomplete Attribute এর কাজ

কোন input field এ টাইপ করার সাথে সাথে যদি আগের দেওয়া কোন ভ্যালু দেখাতে চাই তাহলে এই autocomplete attribute করব। autocomplete attribute ব্যবহার করা ফলে browser আমাদেরকে আগের দেওয়া input field এর ভ্যালু সাজেষ্ট করে। যেমন –

<input type="email" id="email" name="email" autocomplete="off">

এই email field এ autocomplete আর কাজ করবে না কারন আমরা এর ভ্যালু off দিয়েছি।
মনে রাখতে হবে যে, এই required attribute টি শুধুমাত্র <form> এবং text, search, url, tel, email, password, datepickers, range, and color নামের input type attribute এর ভ্যালুর জন্যও কাজ করবে।
আশা করছি এই টিউটোরিয়াল ভালো লগেছে 🙂 অবশ্যই জানাবেন।