এইচটিএমএল ফর্ম ইনপুট টাইপ - HTML Form Input Type



টিউটোরিয়ালের এই অংশে আমরা <input> এলিমেন্টের type এট্রিবিউটের বিভিন্ন মান সম্পর্কে আলোচনা করা হয়েছে।


type:text

এক লাইনের একটি টেক্সট বক্সের জন্য <input type="text"> ডিফাইন করা হয়।

উদাহরণ

<form>
First name:<br />
<input type="text" name="firstname"><br />
Last name:<br />
<input type="text" name="lastname">
</form>




type="password

টেক্সট ফিল্ডের সমস্ত এট্রিবিউট পাসওয়ার্ড ফিল্ডের জন্য প্রযোজ্য। পাসওয়ার্ড ফিল্ডের ক্ষেত্রে শুধুমাত্র টাইপ ( type ) এট্রিবিউটের পরিবর্তন হবে, অন্য সব এট্রিবিউট টেক্সট ফিল্ডের মতই হবে। এখানে পাসওয়ার্ড ফিল্ডের টাইপ হবে পাসওয়ার্ড যেমন -

 

type=”passward”


নীচে একটি উদাহরন দেখুন -

উদাহরণ দেখুন

<form>
Password: <input type="password" name="pass" />
</form>


নোট - কোন পাসওয়ার্ড ক্ষেত্রের অক্ষরগুলো তারকা চিহ্ন বা বৃত্ত হিসাবে প্রদর্শিত হয়।


type:submit

ফর্মের তথ্য সমূহ সার্ভার পেজে পাঠানোর জন্য একটি সাবমিট বাটনের প্রয়োজন হয়। আর সাবমিট বাটন তৈরি করতে <input type="submit"> ডিফাইন করা হয়।
সার্ভার পেজটি ইনপুট এলিমেন্টের তথ্য সমূহকে প্রসেসিং অথবা সংরক্ষন করে। ফর্মের 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" পেজে যাবে। এখানে যদি কোন মান না থাকে অর্থাৎ মান বাদ দেয়া হয় তবে স্বয়ংক্রিয়ভাবে ঐ ওয়েব পেজেই 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>




type="reset"

পূরণকৃত ফর্মকে আবার রিসেট করতে হলে <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>


নোট - এই বাটন ক্লিক করলে ফর্মের সকল ফিল্ডে তাদের স্বয়ংক্রিয় মান প্রদর্শিত হয়।


type="radio"

একাধিক অপশন থেকে যে কোন একটি মাত্র অপশন সিলেক্ট করার জন্য রেডিও বাটন তৈরি করা হয়। রেডিও বাটন তৈরি করার জন্য 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:checkbox

টিক চিহ্ন দিয়ে অপসন সিলেক্ট করার জন্য চেকবক্স তৈরি করা হয়। আপনি এখানে যে কোন একটি বা একাধিক বাটন সিলেক্ট করার ব্যাবস্থা করতে পারেন। চেকবক্সের জন্য আপনি যেসকল এট্রিবিউট ব্যবহার করতে পারেন তা হল type,name এবং value. নীচে এগুলোর বর্ণনা দেয়া হল -

Type – এই এট্রিবিউটের মাধ্যমে একটি চেকবক্স তৈরি হবে। এই এট্রিবিউটের value সবসময় checkbox দিতে হবে। এটি লেখার নিয়ম টি হল -
type-=”checkbox”

Name – এই এট্রিবিউটের সাহায্যে একটি চেকবক্সকে নির্দিষ্ট করে নাম দেয়া হয়। অর্থাৎ কোন একটি চেকবক্সকে নির্দিষ্টভাবে চিহ্নিত করা হয়। পিএইচপি দিয়ে ফর্ম প্রসেস করার সময় এই এট্রিবিউটের ভ্যালুর নাম ধরেই একটি চেকবক্স কল করা হয়। এই এট্রিবিউটের লেখার নিয়মটি হল -
name=”name_of_checkbox”

Value – চেকবক্স এর মান বা value নির্ধারিত করার জন্য এই এট্রিবিউট ব্যবহার করা হয়। এই এট্রিবিউট লেখার নিয়মটি হল -
value=”difolt_text”

নীচে একটি উদাহরন দেখুন -

উদাহরণ দেখুন

<form>
<input type="checkbox" name="animal" value="Cat" /> Cat <br />
<input type="checkbox" name="animal" value="Dog" /> Dog
</form>




type:button

একটি ইনপুট ফিল্ডকে ক্লিক যোগ্য বাটনে রুপান্তর করতে <input type="button"> ব্যবহার করা হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ

<input type="button" onclick="alert('Hello World!')" value="Click Me!">




এইচটিএমএল ৫ এর নতুন ইনপুট টাইপ

এইচটিএমএল ৫ এ নতুন কিছু ইনপুট টাইপ যোগ করা হয়েছে। নিচে এদের নাম দেখুন -

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

নোট - এইচটিএমএল ৫ এর নতুন ইনপুট টাইপ গুলো যে সকল পুরনো ব্রাউজারে সমরথন বা support করে না সেসকল ক্ষেত্রে <input type="text"> এর মত আচরণ করবে।


Type Color

<input type="color"> ব্যবহার করা হয় ইনপুট ফিল্ডে রঙ দিতে। ব্রাউজার support এর ওপর নির্ভর করে ইনপুট ফিল্ডে একটি কালার পিকার প্রদর্শন হয়।

উদাহরণ

<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>




type="date"

<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>




type="datetime-local"

কোন টাইম জোন বাদে সময় এবং তারিখ এর ইনপুট ফিল্ড তইরি করতে <input type="datetime-local"> ব্যবহার করা হয়। ব্রাউজার support এর ওপর নিরভর করে ইনপুট ফিল্ডে একটি ডেট পিকার প্রদর্শিত হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ

<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>




type="email"

<input type="email"> ব্যবহার করা হয় এমন একটি ইনপুট ফিল্ড তইরি করার জন্য জেটা একটি ই-মেইল এড্রেস ধারন করে। ব্রাউজার support এর ওপর নিরভর করে ই-মেইল এড্রেসটি স্বয়ংক্রিয়ভাবেই ভ্যালিডেট হয়।

কিছু স্মার্টফোন স্বয়ংক্রিয়ভাবে ই-মেইল ইনপুট ফিল্ড ছিন্তে পারে এবং কিবোর্ডে ".com" নামে একটি বাটন যোগ করে।

উদাহরণ

<form>
E-mail:
<input type="email" name="email">
</form>




type="file"

<input type="file"> ব্যবহার করে কোন ফাইল আপলোড করার জন্য "Browse" নামে একটি বাটন তইরি করা হয়। এই বাতনে ক্লিক করলে ফাইল নির্বাচন করার জন্য একটি উইন্ডো প্রদর্শিত হয়।

উদাহরণ

<form>
Select a file: <input type="file" name="myFile">
</form>




type="month"

<input type="month"> ব্যবহার করে আমন একটি ইনপুট ফিল্ড তৈরি করা যায়, যেখানে মাস এবং বছর ইনপুট করা যায়। ব্রাউজার support এর ওপর নিরভর করে ইনপুট ফিল্ডে একটি ডেট পিকার প্রদর্শিত হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ

<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>




type="number"

<input type="number"> ব্যবহার করে কোন গাণিতিক ইনপুট ফিল্ড তৈরি করা যায়। এই ইনপুট ফিল্ডে সীমাবদ্ধতাও করে দেয়া যায়।

নিচে একটি উদাহরন দেখুন, এখানে ইনপুট ফিল্ডে কেবল মাত্র ১ থেকে ৯ পর্যন্ত সংখ্যা গুলোই ইনপুট করা যায়।

উদাহরণ

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




ইনপুট সীমাবদ্ধতা

নিচে টেবিলে কত গুলো সাধারন ইনপুট সীমাবদ্ধতা দেয়া হল, এর মাঝে কত গুলো আবার এইচটিএমএল ৫ এ নতুন।

এট্রিবিউট বর্ণনা
disabled কোন ইনপুট ফিল্ড disable করা উচিৎ সেটা নির্ধারণ করে।
max কোন ইনপুট ফিল্ডের সবরছহ মান নির্ধারণ করে।
maxlength কোন ইনপুট ফিল্ডের সবরছহ ক্যারেক্টার সংখ্যা নির্ধারণ করে।
min কোন ইনপুট ফিল্ডের সর্বনিম্ন মান নির্ধারণ করে।
pattern ইনপুট করা মান, সাধারন মানের সাথে তুলনা করে।
readonly কোন ইনপুট ফিল্ড পরিবর্তন করা যাবে না অর্থাৎ কেবল মাত্র পরা যাবে, তা নির্ধারণ করে।
required কোন ইনপুট ফিল্ড অবশ্যই পূরণ করা উচিৎ সেটা নির্ধারণ করে।
size কোন ইনপুট ফিল্ডের প্রস্থ বা width নির্ধারণ করে।
step কোন ইনপুট ফিল্ডের সংখ্যা গুলোর অন্তর নির্ধারণ করে।
value কোন ইনপুট ফিল্ডের স্বয়ংক্রিয় মান নির্ধারণ করে।

ইনপুট সীমাবদ্ধতা সম্পর্কে পরবর্তী অধ্যায়ে আরও আলোচনা করা হয়েছে।

নিচের উদাহরনে একটি গাণিতিক ইনপুট ফিল্ড তৈরি করা হয়েছে, যেখানে 0 থেকে 100 পর্যন্ত সংখ্যা নির্ধারণ করা যায়, প্রতি 5 পর পর মান পরিবর্তন করা যায় এবং স্বয়ংক্রিয় মান হল 30.

উদাহরণ

<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>




type="range"

<input type="range"> ব্যবহার করে একটি নম্বর লিখা যায়, যার সঠিক মানটি গুরুত্বপূর্ণ নয় (যেমন একটি স্লাইডার কন্ট্রোল)। এর স্বয়ংক্রিয় মান হল 0 থেকে 100, তবে এর সাথে min, max এবং step এট্রিবিউট ব্যবহার করে বিধিনিষেধ তৈরি করা যায়। নিচে একটি উদাহরন দেখুন।

উদাহরণ

<form>
<input type="range" name="points" min="0" max="10">
</form>




type="search"

<input type="search"> ব্যবহার করে কোন সার্চ ফিল্ড তৈরি করা হয়, আতা দেখতে সাধারন টেক্সট ফিল্ডের মতই হয়।

উদাহরণ

<form>
Search Google:
<input type="search" name="googlesearch">
</form>




type="tel"

<input type="tel"> ব্যবহার করে কোন টেলিফোন নাম্বার লেখার জন্য ইনপুট ফিল্ড তৈরি করা হয়।

উদাহরণ

<form>
Telephone:
<input type="tel" name="usrtel">
</form>


নোট - type="tel" বর্তমানে কেবলমাত্র সাফারি ৮ ভার্সনেই সমর্থন করে।


type="time"

<input type="time"> ব্যবহার করে এমন একটি ইনপুট ফিল্ড তৈরি করা যায়, যেখানে কোন টাইম জোন বাদেই সময় বা time ইনপুট করা যায়। ব্রাউজার support এর ওপর নির্ভর করে ইনপুট ফিল্ডে একটি টাইম পিকার প্রদর্শিত হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ

<form> Select a time: <input type="time" name="usr_time"> </form>




type="url"

<input type="url"> ব্যবহার করে এমন একটি ইনপুট ফিল্ড তৈরি করা হয়, যেটা কোন URL ধারন করতে পারে। ব্রাউজার support এর ওপর নিরভর করে URLটি স্বয়ংক্রিয়ভাবেই ভ্যালিডেট হয়।

কিছু স্মার্টফোন স্বয়ংক্রিয়ভাবে ই-মেইল ইনপুট ফিল্ড ছিন্তে পারে এবং কিবোর্ডে ".com" নামে একটি বাটন যোগ করে।

উদাহরণ

<form>
Add your homepage:
<input type="url" name="homepage">
</form>




name="week"

<input type="week"> ব্যবহার করে আমন একটি ইনপুট ফিল্ড তৈরি করা যায়, যেটাতে সপ্তাহ এবং বছর নির্ধারণ করা যায়। ব্রাউজার support এর ওপর নির্ভর করে ইনপুট ফিল্ডে একটি ডেট পিকার প্রদর্শিত হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ

<form>
Select a week:
<input type="week" name="week_year">
</form>









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.