টিউটোরিয়ালের এই অংশে <input> এলিমেন্টের type এট্রিবিউটের বিভিন্ন মান সম্পর্কে আলোচনা করা হয়েছে।
<input> এলিমেন্টের type এট্রিবিউটের জন্য অনেক প্রকার মান বা value নির্ধারণ করা যায়, যেমন - text, button, checkbox, password, submit, email ইত্তাদি। নিছে এই সকল প্রকার মানের সিনট্যাক্স দেখুন।
<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> ট্যাগ সম্পর্কে জানতে W3C এর 4.3.10.4 The input element ওয়েব পেজটি ব্রাউজ করুন।
এক লাইনের একটি টেক্সট বক্স তৈরি করতে <input type="text"> কোড ব্যাবহার করা হয়। এইচটিএমএল ফরমে সর্বাধিক বাবহ্রিত হল এই কোডটি। নিছে এর একটি উদাহরন দেখুন।
<form> First name:<br /> <input type="text" name="firstname"><br /> Last name:<br /> <input type="text" name="lastname"> </form>
টেক্সট ফিল্ডের সমস্ত এট্রিবিউট পাসওয়ার্ড ফিল্ডের জন্য প্রযোজ্য। পাসওয়ার্ড ফিল্ডের ক্ষেত্রে শুধুমাত্র টাইপ ( type ) এট্রিবিউটের পরিবর্তন হবে, অন্য সব এট্রিবিউট টেক্সট ফিল্ডের মতই হবে। এখানে পাসওয়ার্ড ফিল্ডের টাইপ হবে পাসওয়ার্ড যেমন -
type=”passward”
নীচে একটি উদাহরন দেখুন -
<form> Password: <input type="password" name="pass" /> </form>
নোট - কোন পাসওয়ার্ড ক্ষেত্রের অক্ষরগুলো তারকা চিহ্ন বা বৃত্ত হিসাবে প্রদর্শিত হয়।
ফর্মে ইনপুট করা তথ্য গুলো সার্ভারে প্রেরন করার জন্য একটি সাবমিট বাটন ব্যবহার করা হয়। এই সাবমিট বাটন তৈরি করতে
<input type="submit"> কোড ব্যবহার করা হয়।
সার্ভার এর পেজটি ইনপুট এলিমেন্টের তথ্য গুলোকে execute করে। তারপর ফর্মের action এট্রিবিউট সার্ভার
পেজটিকে পরবর্তী ধাপে পাঠায়।
<form action="/action_page.php"> First name:<br /> <input type="text" name="firstname" value="Bugs"><br /> Last name:<br /> <input type="text" name="lastname" value="Bunny"><br /><br /> <input type="submit" value="Submit"> </form>
উধাহরণে সাবমিট বাটনে ক্লিক করার পর ফর্মের তথ্য গুলো "action_page" নামে ".php" extension যুক্ত পেজে যাবে। এখানে যদি কোন মান না থাকে অর্থাৎ মান বাদ দেয়া হয় তবে স্বয়ংক্রিয়ভাবে ঐ ওয়েব পেজেই action সম্পন্ন হবে।
<form action="/action_page.php"> First name:<br /> <input type="text" name="firstname" value="Bugs"><br /> Last name:<br /> <input type="text" name="lastname" value="Bunny"><br /><br /> <input type="submit"> </form>
পূরণকৃত ফর্মকে আবার রিসেট করতে হলে <input type="reset"> ব্যবহার করতে হয়। এই বাটন ক্লিক করলে ফর্মের সকল ফিল্ডে তাদের স্বয়ংক্রিয় মান প্রদর্শিত হয়।
<form action="/action_page.php"> First name:<br /> <input type="text" name="firstname" value="Bugs"><br /> Last name:<br /> <input type="text" name="lastname" value="Bunny"><br /><br /> <input type="submit" value="Submit"> <input type="reset"> </form>
নোট - এই বাটন ক্লিক করলে ফর্মের সকল ফিল্ডে তাদের স্বয়ংক্রিয় মান প্রদর্শিত হয়।
একাধিক অপশন থেকে যে কোন একটি মাত্র অপশন সিলেক্ট করার জন্য রেডিও বাটন তৈরি করা হয়। রেডিও বাটন তৈরি করার জন্য input ট্যাগের সাথে যেসকল এট্রিবিউট ব্যবহার করা যায় তা হল type, name এবং value. Checked এট্রিবিউট ব্যবহার করে আপনি আগে থেকেই অর্থাৎ ডিফল্ট মান হিসেবে একটি রেডিও বাটন সিলেক্ট করে রাখতে পারেন। এর মান বা value হল yes. এটি লেখার নিয়ম হল -
checked=”yes”
নীচে এর একটি উদাহরন দেয়া হল।
<form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form>
টিক চিহ্ন দিয়ে অপসন সিলেক্ট করার জন্য চেকবক্স তৈরি করা হয়। আপনি এখানে যে কোন একটি বা একাধিক বাটন সিলেক্ট করার ব্যাবস্থা করতে পারেন। চেকবক্সের জন্য আপনি যেসকল এট্রিবিউট ব্যবহার করতে পারেন তা হল type,name এবং value. নীচে এগুলোর বর্ণনা দেয়া হল -
নীচে একটি উদাহরন দেখুন -
<form> <input type="checkbox" name="Flower" value="Sun-flower" /> Sun-flower <br /> <input type="checkbox" name="Flower" value="Marigold" /> Marigold </form>
কোন ইনপুট ফিল্ডকে ক্লিক যোগ্য বাটন রুপে তৈরি করতে <input type="button"> কোড ব্যবহার করা হয়। নিচে এর একটি উদাহরন দেখুন।
<input type="button" onclick="alert('Good day to you !')" value="Click Me!">
এইচটিএমএল ৫.০ এ নতুন যে সকল ইনপুট টাইপ যোগ করা হয়েছে, নিচে এদের নাম দেখুন -
নোট - এইচটিএমএল ৫.০ এর নতুন ইনপুট টাইপ গুলো যে সকল পুরনো ব্রাউজারে সমরথন বা support করে না সেসকল ক্ষেত্রে <input type="text"> এর মত আচরণ করবে।
এইচটিএমএল <input> ট্যাগ সম্পর্কে জানতে W3C এর 4.3.10.4 The input elementওয়েব পেজটি ব্রাউজ করুন।
<input type="color"> ব্যবহার করে হেক্সাডেসিম্যাল মানের মাধ্যমে রঙের মান ইনপুট দিতে এই আত্ত্রিবুত ব্যাবহার করা হয়। ব্রাউজার support এর ওপর নির্ভর করে ইনপুট ফিল্ডে একটি কালার পিকার প্রদর্শন হয়।
<form> Select your favorite color: <input type="color" name="favcolor"> </form>
কোন টাইম জোন ও স্থানীয় সময় বাদে তারিখ এর ইনপুট ফিল্ড তৈরি করতে <input type="datetime-local"> ব্যবহার করা হয়। ব্রাউজার support এর ওপর নির্ভর করে ইনপুট ফিল্ডে একটি ডেট পিকার প্রদর্শিত হয়। নিচে এর একটি উদাহরন দেখুন।
<form> Birthday (date and time): <input type="datetime-local" name="bdaytime"> </form>
<input type="date"> ব্যবহার করা হয় এমন সব ক্ষেত্রে যে সকল ফিল্ডে তারিখ থাকে। ব্রাউজার support এর ওপর নিরভর করে ইনপুট ফিল্ডে একটি ডেট পিকার প্রদর্শিত হয়।
<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>
<input type="month"> ব্যবহার করে এমন একটি ইনপুট ফিল্ড তৈরি করা যায়, যেখানে মাস এবং বছর ইনপুট করা যায়। ব্রাউজার support এর ওপর নিরভর করে ইনপুট ফিল্ডে একটি ডেট পিকার প্রদর্শিত হয়। নিচে এর একটি উদাহরন দেখুন।
<form> Birthday (month and year): <input type="month" name="bdaymonth"> </form>
<input type="email"> ব্যবহার করা হয় এমন একটি ইনপুট ফিল্ড তইরি করার জন্য জেটা একটি ই-মেইল এড্রেস
ধারন করে।
ব্রাউজার support এর ওপর নিরভর করে ই-মেইল এড্রেসটি স্বয়ংক্রিয়ভাবেই ভ্যালিডেট হয়।
কিছু স্মার্টফোন স্বয়ংক্রিয়ভাবে ই-মেইল ইনপুট ফিল্ড ছিন্তে পারে এবং কিবোর্ডে ".com" নামে একটি বাটন যোগ করে।
<form> E-mail: <input type="email" name="email"> </form>
<input type="file"> ব্যবহার করে কোন ফাইল আপলোড করার জন্য "Browse" নামে একটি বাটন তইরি করা হয়। এই বাতনে ক্লিক করলে ফাইল নির্বাচন করার জন্য একটি উইন্ডো প্রদর্শিত হয়।
<form> Select a file: <input type="file" name="myFile"> </form>
<input type="number"> ব্যবহার করে এমন কোন ইনপুট ফিল্ড তৈরি করা যায়, যা কেবল গাণিতিক
সংখ্যা ইনপুট হিসেবে গ্রহন করে। এই ইনপুট ফিল্ডে সীমাবদ্ধতাও
করে দেয়া যায়।
নিচে একটি উদাহরন দেখুন, এখানে ইনপুট ফিল্ডে কেবল মাত্র ১ থেকে ৯ পর্যন্ত সংখ্যা গুলোই ইনপুট করা যায়।
<form> Quantity (between 1 and 9): <input type="number" name="quantity" min="1" max="9"> </form>
নিচে টেবিলে কত গুলো সাধারন ইনপুট সীমাবদ্ধতা দেয়া হল, এর মাঝে কত গুলো আবার এইচটিএমএল ৫ এ নতুন।
এট্রিবিউট | বর্ণনা |
---|---|
disabled | কোন ইনপুট ফিল্ড disable করা উচিৎ সেটা নির্ধারণ করে। |
max | কোন ইনপুট ফিল্ডের ইনপুট করার মত সবরছহ মান নির্ধারণ করে। |
maxlength | কোন ইনপুট ফিল্ডের ইনপুট করার মত সরবছহ ক্যারেক্টার সংখ্যা নির্ধারণ করে। |
min | কোন ইনপুট ফিল্ডের ইনপুট করার মত সর্বনিম্ন মান নির্ধারণ করে। |
pattern | ইনপুট করা মান, সাধারন মানের সাথে তুলনা করে। |
readonly | কোন ইনপুট ফিল্ড পরিবর্তন করা যাবে না অর্থাৎ কেবল মাত্র পরা যাবে, তা নির্ধারণ করে। |
required | কোন ইনপুট ফিল্ড অবশ্যই পূরণ করা উচিৎ সেটা নির্ধারণ করে। |
size | কোন ইনপুট ফিল্ডের দৈর্ঘ্য নির্ধারণ করে। |
step | কোন ইনপুট ফিল্ডের সংখ্যা গুলোর অন্তর নির্ধারণ করে। |
value | কোন ইনপুট ফিল্ডের স্বয়ংক্রিয় মান নির্ধারণ করে। |
ইনপুট সীমাবদ্ধতা সম্পর্কে পরবর্তী অধ্যায়ে আরও আলোচনা করা হয়েছে।
নিচের উদাহরনে একটি গাণিতিক ইনপুট ফিল্ড তৈরি করা হয়েছে, যেখানে 0 থেকে 100 পর্যন্ত সংখ্যা নির্ধারণ করা যায়, প্রতি 5 পর পর মান পরিবর্তন করা যায় এবং স্বয়ংক্রিয় মান হল 30.
<form> Quantity: <input type="number" name="points" min="0" max="100" step="10" value="30"> </form>
<input type="tel"> ব্যবহার করে কোন টেলিফোন নাম্বার লেখার জন্য ইনপুট ফিল্ড তৈরি করা হয়।
<form> Telephone: <input type="tel" name="usrtel"> </form>
নোট - type="tel" বর্তমানে কেবলমাত্র সাফারি ৮ সংস্করণেই বা version এ সমর্থন করে।
<input type="range"> ব্যবহার করে এমন একটি নম্বর লিখা যায়, যার সঠিক মানটি গুরুত্বপূর্ণ নয় (যেমন একটি স্লাইডার কন্ট্রোল)। এর স্বয়ংক্রিয় মান হল 0 থেকে 100, তবে এর সাথে min, max এবং step এট্রিবিউট ব্যবহার করে বিধিনিষেধ তৈরি করা যায়। নিচে এর একটি উদাহরন দেখুন।
<form> <input type="range" name="points" min="0" max="10"> </form>
<input type="search"> ব্যবহার করে কোন সার্চ ফিল্ড তৈরি করা হয়, এটা দেখতে সাধারন টেক্সট ফিল্ডের মতই হয়।
<form> Search Google: <input type="search" name="googlesearch"> </form>
<input type="time"> ব্যবহার করে এমন একটি ইনপুট ফিল্ড তৈরি করা যায়, যেখানে কোন টাইম জোন বাদেই সময় বা time ইনপুট করা যায়। ব্রাউজার support এর ওপর নির্ভর করে ইনপুট ফিল্ডে একটি টাইম পিকার প্রদর্শিত হয়। নিচে এর একটি উদাহরন দেখুন।
<form> Select a time: <input type="time" name="usr_time"> </form>
<input type="url"> ব্যবহার করে এমন একটি ইনপুট ফিল্ড তৈরি করা হয়, যেটা কোন URL ধারন করতে পারে।
ব্রাউজার support এর ওপর নিরভর করে URLটি স্বয়ংক্রিয়ভাবেই ভ্যালিডেট হয়।
কিছু স্মার্টফোন স্বয়ংক্রিয়ভাবে ই-মেইল ইনপুট ফিল্ড ছিন্তে পারে এবং কিবোর্ডে ".com" নামে একটি বাটন যোগ করে।
<form> Add your homepage: <input type="url" name="homepage"> </form>
<input type="week"> ব্যবহার করে আমন একটি ইনপুট ফিল্ড তৈরি করা যায়, যেটাতে সপ্তাহ এবং বছর নির্ধারণ করা যায়। ব্রাউজার support এর ওপর নির্ভর করে ইনপুট ফিল্ডে একটি ডেট পিকার প্রদর্শিত হয়। নিচে এর একটি উদাহরন দেখুন।
<form> Select a week: <input type="week" name="week_year"> </form>