ইনপুট অ্যাট্রিবিউট

এই অধ্যায় এ আমরা এইচটিএমএল ইনপুট এলিমেন্টের বিভিন্য অ্যাট্রিবিউট সম্পর্কে আলোচনা করবো ।

value Attribute – ভেলু এট্রিবিউট

ইনপুট value বৈশিষ্ট্য একটি ইনপুট ক্ষেত্রের জন্য একটি প্রাথমিক মান নির্দিষ্ট করে:

উদাহরন: একটি ইনপুট ফিল্ড যাতে কিছু প্রাথমিক মান দেয়া আছে

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

নিজে চেষ্টা করুন

readonly Attribute

ইনপুট readonly বৈশিষ্ট্য নির্দিষ্ট করে যে একটি ইনপুট ক্ষেত্র শুধুমাত্র পঠনযোগ্য।

এই ফিল্ড এর ভেলু শুধু পড়া যায়, পরিবর্তন করা যায়না (তবে, একজন ব্যবহারকারী এটিতে ট্যাব করতে পারেন, হাইলাইট করতে পারেন এবং এটি থেকে পাঠ্য অনুলিপি করতে পারেন)

তবে ফর্ম জমা দেওয়ার সময় একটি পঠনযোগ্য ইনপুট ক্ষেত্রের মান পাঠানো হবে!

উদাহরন: একটি রিড অনলি ফিল্ড

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

নিজে চেষ্টা করুন

disabled Attribute

ইনপুট disabled বৈশিষ্ট্য একটি ইনপুট ক্ষেত্র কে নিষ্ক্রিয় করে ।

একটি ডিজঅ্যাবল বা নিষ্ক্রিয় ইনপুট ক্ষেত্র অব্যবহারযোগ্য এবং ক্লিকযোগ্য নয় । অর্থাৎ ক্লিক করা যায়না।

এবং ফর্ম জমা দেওয়ার সময় একটি ডিজঅ্যাবল বা নিষ্ক্রিয় ইনপুট ক্ষেত্রের মান সার্ভারে পাঠানো হবে না!

উদাহরন একটি ডিজেবল ইনপুট ফিল্ড

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

নিজে চেষ্টা করুন

size Attribute

ইনপুট  size  বৈশিষ্ট্য একটি ইনপুট ক্ষেত্রের দৃশ্যমান প্রস্থ, অক্ষরে, নির্দিষ্ট করে।

ইনপুট অ্যাট্রিবিউট  size এর ডিফল্ড ভেলু 20

নোট: ইনপুট অ্যাট্রিবিউট  size  কাজ করে text, search, tel, url, email, and password এর সাথে ।

উদাহরন 

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

নিজে চেষ্টা করুন

maxlength Attribute

maxlength এট্রিবিউট টি একটি ইনপুট ফিল্ড এ অনুমোদিত অক্ষরের সর্বাধিক সংখ্যা নির্দিষ্ট করে। অর্থাৎ আপনি কতোটি অক্ষর এই ইনপুট ফিল্ডে লিখতে পারবেন তা নির্দিষ্ট করা যায় maxlength এট্রিবিউট ব্যবহার করে ।

নোট: যখন maxlength এট্রিবিউট টি সেট করা থাকে, ইনপুট ক্ষেত্রটি নির্দিষ্ট সংখ্যক অক্ষরের বেশি গ্রহণ করবে না। যদিও এটি জাভাস্ক্রিপ্ট টিয়ে ওভার রাইট করা যায় ।

উদাহরন

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

min and max Attributes

ইনপুট nin এবং max  বৈশিষ্ট্যগুলি একটি ইনপুট ক্ষেত্রের জন্য সর্বনিম্ন এবং সর্বাধিক মানগুলি নির্দিষ্ট করে ।

nin এবং max  বৈশিষ্ট্যগুলি নিম্নলিখিত ইনপুট প্রকারগুলির সাথে কাজ করে:
number, range, date, datetime-local, month, time এবং week ৷

নোট: বিভিন্য এট্রিবিউটের মানগুলির একটি পরিসর তৈরি করতে max এবং min বৈশিষ্ট্যগুলি একসাথে ব্যবহার করুন৷

উদাহরন

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

নিজে চেষ্টা করুন

multiple Attribute

ইনপুট এট্রিবিউট multiple ব্যবহারকারীকে একটি ইনপুট ক্ষেত্রে একাধিক মান প্রবেশ করার অনুমতি দেয়।

multiple বৈশিষ্ট্য নিম্নলিখিত ইনপুট গুলোর সাথে কাজ করে:
email এবং file ।

উদাহরন

নিজের উদাহরন টি একটি ফাইল আপলোডের ক্ষেত্র যা একাধিক মান গ্রহণ করে:

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

নিজে চেষ্টা করুন

pattern Attribute

ইনপুট pattern অ্যাট্রিবিউট একটি রেগুলার এক্সপ্রেশন নির্দিষ্ট করে যে ফর্মটি জমা দেওয়ার সময় ইনপুট ফিল্ডের মান চেক করা হয়।

প্যাটার্ন অ্যাট্রিবিউট নিম্নলিখিত ইনপুট প্রকারের সাথে কাজ করে:
text, date, search, url, tel, email, এবং password।

উদাহরন

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

নিজে চেষ্টা করুন

placeholder Attribute

placeholder অ্যাট্রিবিউট টি একটি ইনপুর ফিল্ড এ কি ধরনের বা কোন ডাটা চাওয়া হচ্ছে সেটা টেক্সট আকারে প্রকাশ করে । তবে এটি সব ইনপুট টাইপ এর সাথে কার করেনা ।

ব্যবহারকারীরা মান প্রবেশ করালে প্লেসহোল্ডার অ্যাট্রিবিউট এর ভেলুটি আর ফিল্ড এ থাকেনা ।

placeholder যে সব ইনপুট টাইপ এর সাথে কাজ করেঃ text, search, url, tel, email, and password

উদাহরন

<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

নিচে চেষ্টা করুন

required Attribute

required attribute টি দিয়ে যে ফিলড টি অবশ্যই লাগবে সেটি ঠিক করে দেয়া হয় । এবং এটি ফর্ম টি সাবমিট করার সময় চেক করে এবং যদি ফিল্ড টি পুরোন করা না হয়, তাহলে ফর্মটি সাবমিট হবেনা ।

required attribute টি যে যে ইনপুট টাইপের সাথে কাজ করেঃ  text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

উদাহরন

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

নিজে চেষ্টা করুন