এই চ্যাপ্টারে <input> এলিমেন্টের বিভিন্ন ইনপুট টাইপ বর্ণনা করা হয়েছে।
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"><input type="text"> একটি এক-লাইনের টেক্সট ইনপুট ফিল্ড নির্ধারণ করে:
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="password"> একটি পাসওয়ার্ড ফিল্ড নির্ধারণ করে:
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
পাসওয়ার্ড ফিল্ডের অক্ষরগুলো মাস্ক করা থাকে (তারকা চিহ্ন [*] বা বৃত্ত হিসেবে দেখানো হয়)।
<input type="submit"> ফর্ম ডেটা একটি ফর্ম-হ্যান্ডলারে জমা দেওয়ার জন্য একটি বাটন নির্ধারণ করে।
ফর্ম-হ্যান্ডলার সাধারণত একটি সার্ভার পেজ, যেখানে ইনপুট ডেটা প্রসেস করার একটি স্ক্রিপ্ট থাকে।
ফর্মের action অ্যাট্রিবিউটে ফর্ম-হ্যান্ডলার উল্লেখ করা হয়:
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
সাবমিট বাটনের value অ্যাট্রিবিউট বাদ দিলে, বাটনটি একটি ডিফল্ট টেক্সট পাবে:
<input type="reset"> একটি রিসেট বাটন নির্ধারণ করে, যা সব ফর্ম মান তাদের ডিফল্ট মানে ফিরিয়ে দেবে:
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
ইনপুট মান পরিবর্তন করে "Reset" বাটনে ক্লিক করলে, ফর্ম-ডেটা ডিফল্ট মানে ফিরে যাবে।
<input type="radio"> একটি রেডিও বাটন নির্ধারণ করে।
রেডিও বাটন ব্যবহারকারীকে সীমিত সংখ্যক বিকল্প থেকে শুধুমাত্র একটি বেছে নিতে দেয়:
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="checkbox"> একটি চেকবক্স নির্ধারণ করে।
চেকবক্স ব্যবহারকারীকে সীমিত সংখ্যক বিকল্প থেকে শূন্য বা তার বেশি অপশন বেছে নিতে দেয়।
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="button"> একটি বাটন নির্ধারণ করে:
<input type="button" onclick="alert('Hello World!')" value="Click Me!">উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
HTML5-এ বেশ কিছু নতুন ইনপুট টাইপ যোগ করা হয়েছে:
যে নতুন ইনপুট টাইপগুলো পুরনো ওয়েব ব্রাউজারে সমর্থিত নয়, সেগুলো <input type="text">-এর মতো আচরণ করবে।
<input type="color"> এমন ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়, যাতে একটি রঙ থাকা উচিত।
ব্রাউজার সমর্থনের উপর নির্ভর করে, ইনপুট ফিল্ডে একটি কালার পিকার দেখা যেতে পারে।
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="date"> এমন ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়, যাতে একটি তারিখ থাকা উচিত।
ব্রাউজার সমর্থনের উপর নির্ভর করে, ইনপুট ফিল্ডে একটি ডেট পিকার দেখা যেতে পারে।
<form>
Birthday:
<input type="date" name="bday">
</form>তারিখে সীমাবদ্ধতা যোগ করতে আপনি min এবং max অ্যাট্রিবিউটও ব্যবহার করতে পারেন:
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="datetime-local"> একটি তারিখ ও সময়ের ইনপুট ফিল্ড নির্ধারণ করে, যেখানে কোনো টাইম জোন থাকে না।
ব্রাউজার সমর্থনের উপর নির্ভর করে, ইনপুট ফিল্ডে একটি ডেট পিকার দেখা যেতে পারে।
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="email"> এমন ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়, যাতে একটি ইমেইল ঠিকানা থাকা উচিত।
ব্রাউজার সমর্থনের উপর নির্ভর করে, জমা দেওয়ার সময় ইমেইল ঠিকানা স্বয়ংক্রিয়ভাবে ভ্যালিডেট হতে পারে।
কিছু স্মার্টফোন email টাইপ শনাক্ত করে, এবং ইমেইল ইনপুটের সাথে মিলিয়ে কিবোর্ডে ".com" যোগ করে।
<form>
E-mail:
<input type="email" name="email">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="file"> ফাইল আপলোডের জন্য একটি ফাইল-সিলেক্ট ফিল্ড এবং একটি "Browse" বাটন নির্ধারণ করে।
<form>
Select a file: <input type="file" name="myFile">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="month"> ব্যবহারকারীকে একটি মাস ও বছর বেছে নেওয়ার সুযোগ দেয়।
ব্রাউজার সমর্থনের উপর নির্ভর করে, ইনপুট ফিল্ডে একটি ডেট পিকার দেখা যেতে পারে।
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="number"> একটি সংখ্যাসূচক ইনপুট ফিল্ড নির্ধারণ করে।
কোন সংখ্যাগুলো গ্রহণযোগ্য তার সীমাবদ্ধতাও আপনি সেট করতে পারেন।
নিচের উদাহরণে একটি সংখ্যাসূচক ইনপুট ফিল্ড দেখানো হয়েছে, যেখানে আপনি 1 থেকে 5-এর মধ্যে একটি মান দিতে পারবেন:
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
এখানে কিছু সাধারণ ইনপুট রেস্ট্রিকশনের তালিকা দেওয়া হলো:
| অ্যাট্রিবিউট | বিবরণ |
|---|---|
| disabled | নির্ধারণ করে যে একটি ইনপুট ফিল্ড নিষ্ক্রিয় থাকবে |
| max | একটি ইনপুট ফিল্ডের সর্বোচ্চ মান নির্ধারণ করে |
| maxlength | একটি ইনপুট ফিল্ডের সর্বোচ্চ অক্ষর সংখ্যা নির্ধারণ করে |
| min | একটি ইনপুট ফিল্ডের সর্বনিম্ন মান নির্ধারণ করে |
| pattern | ইনপুট মান যাচাই করার জন্য একটি রেগুলার এক্সপ্রেশন নির্ধারণ করে |
| readonly | নির্ধারণ করে যে একটি ইনপুট ফিল্ড শুধু পড়ার জন্য (পরিবর্তন করা যাবে না) |
| required | নির্ধারণ করে যে একটি ইনপুট ফিল্ড বাধ্যতামূলক (অবশ্যই পূরণ করতে হবে) |
| size | একটি ইনপুট ফিল্ডের প্রস্থ (অক্ষরে) নির্ধারণ করে |
| step | একটি ইনপুট ফিল্ডের বৈধ সংখ্যার ব্যবধান নির্ধারণ করে |
| value | একটি ইনপুট ফিল্ডের ডিফল্ট মান নির্ধারণ করে |
পরের চ্যাপ্টারে ইনপুট রেস্ট্রিকশন সম্পর্কে আরও জানবেন।
নিচের উদাহরণে একটি সংখ্যাসূচক ইনপুট ফিল্ড দেখানো হয়েছে, যেখানে আপনি 0 থেকে 100-এর মধ্যে, 10-এর ধাপে একটি মান দিতে পারবেন। ডিফল্ট মান হলো 30:
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="range"> এমন একটি সংখ্যা দেওয়ার জন্য একটি কন্ট্রোল নির্ধারণ করে, যার সঠিক মান তেমন গুরুত্বপূর্ণ নয় (যেমন একটি স্লাইডার কন্ট্রোল)। ডিফল্ট রেঞ্জ 0 থেকে 100। তবে, min, max, এবং step অ্যাট্রিবিউট দিয়ে আপনি কোন সংখ্যাগুলো গ্রহণযোগ্য তার সীমাবদ্ধতা সেট করতে পারেন:
<form>
<input type="range" name="points" min="0" max="10">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="search"> সার্চ ফিল্ডের জন্য ব্যবহৃত হয় (একটি সার্চ ফিল্ড সাধারণ টেক্সট ফিল্ডের মতোই আচরণ করে)।
<form>
Search Google:
<input type="search" name="googlesearch">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="tel"> এমন ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়, যাতে একটি টেলিফোন নম্বর থাকা উচিত।
<form>
Telephone:
<input type="tel" name="phone" pattern="[0-9]{4}-[0-9]{3}-[0-9]{3}">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<input type="time"> ব্যবহারকারীকে একটি সময় বেছে নেওয়ার সুযোগ দেয় (কোনো টাইম জোন থাকে না)।
ব্রাউজার সমর্থনের উপর নির্ভর করে, ইনপুট ফিল্ডে একটি টাইম পিকার দেখা যেতে পারে।
<form>
Select a time:
<input type="time" name="usr_time">
</form>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
মনে রাখবেন: Safari অথবা Internet Explorer 12 এবং তার আগের ভার্সনে type="time" সমর্থিত নয়।
<input type="url"> এমন ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়, যাতে একটি URL ঠিকানা থাকা উচিত।
ব্রাউজার সমর্থনের উপর নির্ভর করে, জমা দেওয়ার সময় url ফিল্ড স্বয়ংক্রিয়ভাবে ভ্যালিডেট হতে পারে।
কিছু স্মার্টফোন url টাইপ শনাক্ত করে, এবং url ইনপুটের সাথে মিলিয়ে কিবোর্ডে ".com" যোগ করে।
<form>
Add your homepage:
<input type="url" name="homepage">
</form>মনে রাখবেন: IE9 এবং তার আগের ভার্সনে type="url" সমর্থিত নয়।
lt;&input type="week"> ব্যবহারকারীকে একটি সপ্তাহ ও বছর বেছে নেওয়ার সুযোগ দেয়।
ব্রাউজার সমর্থনের উপর নির্ভর করে, ইনপুট ফিল্ডে একটি ডেট পিকার দেখা যেতে পারে।
<form>
Select a week:
<input type="week" name="week_year">
</form>মনে রাখবেন: Firefox, Safari অথবা Internet Explorer 11 এবং তার আগের ভার্সনে type="week" সমর্থিত নয়।