এই অধ্যায় HTML <input> এলিমেন্টের জন্য বিভিন্ন ধরনের ইনপুট টাইপ বর্ণনা করা হবে ।
HTML Input Types
এখানে বিভিন্ন ইনপুট টাইপ তুলে ধরা হলো যা আপনি HTML এ ব্যবহার করতে পারেন:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
ইনপুট এর ডিফল্ট টাইপ এট্রিবিউট হয় “text”
ইনপুট টাইপ text
<input type="text"> একটি সিংগেল লাইন ইনপুট ফিল্ড ডিফাইন করে ।
উদাহরন
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form>
উপরের কোড টি ওয়েব ব্রাউজার এ নিচের মতো দেখাবে ।
Input Type Password
<input type=”password”> একটি পাসওয়ার্ড ফিল্ড ডিফাইন করে
উদাহরন
<form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"> </form>
নিজে চেষ্টা করুন
উপরের পাসওয়ার্ড টাইপের কোড টি ওয়েব ব্রাউজার এ নিচের মতো দেখাবে ।
একটি পাসওয়ার্ড ক্ষেত্রের অক্ষরগুলি পড়া যায়না ( তারকা বা বৃত্ত হিসাবে দেখানো হয় )
Input Type Submit
<input type="submit"> ফর্ম-হ্যান্ডলার এর কাছে ফর্ম ডেটা জমা দেওয়ার জন্য একটি বাটন সংজ্ঞায়িত করে।
ফর্ম-হ্যান্ডলার সাধারণত ইনপুট ডেটা প্রক্রিয়াকরণের জন্য একটি স্ক্রিপ্ট যা একটি সার্ভার এ থাকে ।
ফর্ম-হ্যান্ডলার ফর্মের action বৈশিষ্ট্যে নির্দিষ্ট করা আছে:
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Shariar"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Sarkar"><br><br> <input type="submit" value="Submit"> </form>
উপরের সাবমিট টাইপের কোড টি ওয়েব ব্রাউজার এ নিচের মতো দেখাবে ।
আপনি যদি সাবমিট বাটনের ভ্যালু অ্যাট্রিবিউট বাদ দেন, বাটনটি একটি ডিফল্ট টেক্সট পাবে:
<form action="/action_page.php"> <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"><br><br> <input type="submit"> </form>
Input Type Reset
<input type="reset"> একটি রিসেট বাটন সংজ্ঞায়িত করে যা সমস্ত ফর্মের মানগুলিকে তাদের ডিফল্ট মানগুলিতে পুনরায় সেট করবে:
<form action="/action_page.php"> <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"><br><br> <input type="submit" value="Submit"> <input type="reset"> </form>
যদি আপনি ইনপুট মান পরিবর্তন করেন এবং তারপর “রিসেট” বাটনে ক্লিক করেন, ফর্ম-ডেটা ডিফল্ট মানগুলিতে পুনরায় সেট করা হবে।
Input Type Radio
<input type="radio"> একটি রেডিও বাটন ডিফাইন করে
রেডিও বোতামগুলি ব্যবহারকারীকে সীমিত সংখ্যক পছন্দের মধ্যে কেবল একটি নির্বাচন করতে দেয়:
উদাহরন
রেডিও বাটন সহ একটি ফর্ম:
<p> আপনার পছন্দের Web language টি নির্বাচন করুন :</p> <form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </form>
এইভাবে উপরের HTML কোডটি একটি ব্রাউজারে প্রদর্শিত হবে:
radio button এর name এট্রিবিউট এর ভেলু সবগুলোর একই হয় একটি গ্রুপ এর মধ্যে। একই না হলে সবগুলোর মধ্যে একটি নির্বাচন করতে দেবেনা। সে ক্ষেত্রে প্রতিটি আলাদা ভাবে সিলেক্ট হবে !
Input Type Checkbox – চেকবক্স
<input type=”checkbox”> একটি চেকবক্স সংজ্ঞায়িত করে।
চেকবক্স গুলো সবগুলোই কিংবা যে কোন এক বা একাধিক কিংবা কোনটি নয় এমন ভাবে সিলেক্ট করার অপশন দেয়।
উদাহরন
চেকবক্স সহ একটি ফর্ম
<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form>
নিচের মতো করে উপরের HTML কোডটি একটি ব্রাউজারে প্রদর্শিত হবে:
Input Type Button
<input type="button"> একটি বাটন ডিফাইন করে
<input type="button" onclick="alert('Hello World!')" value="Click Me!">এইভাবে উপরের HTML কোডটি একটি ব্রাউজারে প্রদর্শিত হবে:
Input Type Color
<input type=”color”> একটি রং এর ফিল্ড ডিফাইন করে
এটি ব্রাউজার সাপোর্টের উপর নির্ভর করে, একটি রঙ বাছাইকারী ইনপুট ক্ষেত্রে প্রদর্শিত হতে পারে।
<form> <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor"> </form>
এটি নিচের মতো দেখাবে এবং এর ধরন ব্রাউজার ভেদে আলাদা আলাদা হয় ।
Input Type Date
<input type="date"> একটি তারিখ নেবার ইনপুট ফিল্ড তৈরর জন্য ব্যবহৃত হয়।
ব্রাউজার সাপোর্টের উপর নির্ভর করে এটি আলাদা আলাদা ভাবে ইনপুট ফিল্ড তৈর করে ।
উদাহরন
<form> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"> </form>
আপনি তারিখগুলিতে সীমাবদ্ধতা যোগ করতে min এবং max বৈশিষ্ট্যগুলিও ব্যবহার করতে পারেন:
উদাহরন
<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"> </form>
Input Type Datetime-local
<input type="datetime-local"> কোন টাইম জোন ছাড়াই একটি তারিখ এবং সময় ইনপুট ক্ষেত্র নির্দিষ্ট করে।
এটিও ব্রাউজার সাপোর্টের উপর নির্ভর করে ।
উদাহরন
<form> <label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> </form>
Input Type Email
<input type="email"> ব্যবহার করে একটি ইমেইল ইনপুট ফিল্ড তৈরি করা হয় যা শুধু ইমেইল ই ইনপুট হিসেবে নেবে ।
ব্রাউজার সাপোর্টের উপর নির্ভর করে, ই-মেইল ঠিকানা জমা দেওয়ার সময় স্বয়ংক্রিয়ভাবে যাচাই করা যায়।
কিছু স্মার্টফোন ইমেইলের ধরন চিনে, এবং ইমেল ইনপুট মেলাতে কীবোর্ডে “.com” এবং “@” যোগ করে।
<form> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"> </form>
Input Type File
<input type=”file”> একটি ফাইল-নির্বাচন ক্ষেত্র এবং ফাইল আপলোডের জন্য একটি “ব্রাউজ” বোতাম নির্ধারণ করে।
<form> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"> </form>
Input Type Hidden
<input type="hidden"> একটি লুকানো ইনপুট ক্ষেত্র (একটি ব্যবহারকারীর কাছে দৃশ্যমান নয়) সংজ্ঞায়িত করে।
এই হিডেন বা লুকানো ইনপুট ফিল্ড টি ডেভেলপারদের কিছু ডাটা সার্ভারে পাঠাতে সাহায্য করে যা সাধারন ইউজার রা সংশোধন করতে পারেনা ।
একটি লুকানো ক্ষেত্র প্রায়ই কোন ডাটাবেস রেকর্ড সংরক্ষণ করে যা ফর্ম জমা দেওয়ার সময় আপডেট করা প্রয়োজন।
যদিও হিডেন বা লুকানো ইনপুট ফিল্ডের তথ্য ওয়েব পেজে দেখা যায়না বা এডিট করা যায়না, কিন্তু ভিউ সোর্স বা ডেভেলপার টুল দিয়ে এগুলো দেয়া বা এডিট করা যায় । তাই কোন তথ্য সিকিউর করার জন্য হিডেন ইনপুট ব্যবহার করবেন না ।
উদাহরন
<form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="hidden" id="custId" name="custId" value="3487"> <input type="submit" value="Submit"> </form>
Input Type Month
<input type="month"> ব্যবহারকারীকে একটি মাস এবং বছর নির্বাচন করার অনুমতি দেয়।
ব্রাউজার ভেদে এটির প্রদর্শনের ধরন আলাদা হতে পারে ।
উদাহরন
<form> <label for="bdaymonth">Birthday (month and year):</label> <input type="month" id="bdaymonth" name="bdaymonth"> </form>
Input Type Number
<input type="number"> একটি নিউমেরিক ফিল্ড ডিফাইন করে ।
আপনি কোন কোন নাম্বার গ্রহন করবেন সেই সীমাবদ্ধতাও ঠিক করে দেয়া যায় ।
নিম্নলিখিত উদাহরণটি একটি সংখ্যাসূচক ইনপুট ক্ষেত্র প্রদর্শন করে, যেখানে আপনি 1 থেকে 5 পর্যন্ত একটি মান লিখতে পারেন।
উদাহরন
<form> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>
Input Restrictions – ইনপুটের সিমাবদ্ধতা
input এলিমেন্টে type এর পাশাপাশি নিম্নক্ত অ্যাট্রিবিউট ও ব্যবহার হয় ইনপুটের সিমাবদ্ধতা নির্ধারন করে ।
| অ্যাট্রিবিউট | বর্ননা |
| checked | ঠিক করে যে রেডিও বাটন বা চেকবক্স আগে থেকে সিলেক্ট বা টিক হয়ে থাকবে কিনা ( type=”checkbox” or type=”radio” ) |
| disabled | একটি ইনপুট ফিল্ডকে ডিজেবল বা অক্ষম করে |
| max | একটি ইনপুট ক্ষেত্রের জন্য সর্বোচ্চ মান নির্দিষ্ট করে |
| maxlength | একটি ইনপুট ক্ষেত্রের জন্য অক্ষরের সর্বাধিক সংখ্যা নির্দিষ্ট করে |
| min | একটি ইনপুট ক্ষেত্রের জন্য সর্বনিম্ন মান নির্দিষ্ট করে |
| pattern | ইনপুট মান পরীক্ষা করার জন্য একটি রেগুলার এক্সপ্রেশন (Regular Expression) নির্দিষ্ট করে |
| readonly | নির্দিষ্ট করে যে একটি ইনপুট ক্ষেত্র শুধুমাত্র পড়া যায় (পরিবর্তন করা যাবে না) |
| required | নির্দিষ্ট করে যে একটি ইনপুট ক্ষেত্র প্রয়োজন (পূরণ করতে হবে) |
| size | একটি ইনপুট ক্ষেত্রের প্রস্থ (অক্ষরে) নির্দিষ্ট করে |
| step | একটি ইনপুট ক্ষেত্রের জন্য সংখ্যার অন্তর নির্দিষ্ট করে |
| value | একটি ইনপুট ক্ষেত্রের জন্য ডিফল্ট মান নির্দিষ্ট করে |
আপনি পরবর্তী অধ্যায়ে ইনপুট সীমাবদ্ধতা সম্পর্কে আরও জানতে পারবেন।
নিচের উদাহরণটি একটি সংখ্যাসূচক ইনপুট ক্ষেত্র প্রদর্শন করে, যেখানে আপনি 10 এর ধাপে 0 থেকে 100 পর্যন্ত একটি মান লিখতে পারেন। ডিফল্ট ভেলু 30:
উদাহরন
<form> <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"> </form>
Input Type Range
<input type="range"> নাম্বার এর স্লাইডার কন্ট্রল তৈরি করা যায় । ডিফল্ড ভেলু 0 থেকে 100 , তবে এটি বদল ও করে নেয়া যায় যেমন টা আপনি চাইবেন তেমন করে । এবং স্টেপ ও সেট করে দেয়া যায় । নিচের উদাহরন টি দেখুন
উদাহরন
<form> <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form>
Input Type Search
<input type="search"> সার্চ ফিল্ড বা অনুসন্ধান ক্ষেত্রের জন্য ব্যবহৃত হয় ( একটি সার্চ ফিল্ড একটি সাধারন টেক্সঠ ফিল্ড এর মতোই আচোরন করে ) ।
উদাহরন
<form> <label for="gsearch">Search Google:</label> <input type="search" id="gsearch" name="gsearch"> </form>
Input Type Tel
<input type="tel"> এ্কটি টেলিফন নাম্বার নেবার জন্য ইনপুট ফিল্ড ডিফাইন করে ।
উদাহরন
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>Input Type Time
<input type="time"> ব্যবহারকারীকে একটি সময় নির্বাচন করতে দেয় ।
এটি ব্রাউজার সাপোর্ট ভেদে আলাদা হতে পারে ।
উদাহরন
<form> <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt"> </form>
Input Type Url
<input type="url"> এটি url ( Web Address ) থাকবে এমন একটি ইনপুট ফিল্ড ডিফাইন করে ।
ব্রাউজার সাপোর্ট ভেদে url ক্ষেত্রটি স্বয়ংক্রিয়ভাবে যাচাই করা যাবে যখন জমা দেওয়া হবে ।
কিছু স্মার্টফোন ইউআরএল টাইপ চিনতে পারে এবং ইউআরএল ইনপুট মেলাতে কীবোর্ডে “.com” যোগ করে।
উদাহরন
<form> <label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage"> </form>
Input Type Week
<input type="week"> ব্যবহারকারীকে একটি সপ্তাহ এবং বছর নির্বাচন করার অনুমতি দেয়।
ব্রাউজার সাপোর্ট ভেদে তারিখ সিলেক্ট করার ঘরটি আলাদা আলাদা হতে পারে ।
উদাহরন
<form> <label for="week">Select a week:</label> <input type="week" id="week" name="week"> </form>