HTML ইনপুট টাইপ
- পূর্ববর্তী পৃষ্ঠা HTML ফর্ম ইলেমেন্ট
- পরবর্তী পৃষ্ঠা HTML Input অ্যাট্রিবিউট
এই চপটি <input> ইলেকট্রন টাইপের বর্ণনা করে।
ইনপুট টাইপ: text
<input type="text"> সংজ্ঞায়িতটেক্সট ইনপুটএর একলাইন ইনপুট ফিল্ড:
উদাহরণ
<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>
উপরোক্ত HTML কোড ব্রাউজারে এমনভাবে দেখা যাবে:
ইনপুট টাইপ: password
<input type="password"> সংজ্ঞাপাসওয়ার্ড ফিল্ড：
উদাহরণ
<form> ইউজার নাম:<br> <input type="text" name="username"> <br> ইউজার পাসওয়ার্ড:<br> <input type="password" name="psw"> </form>
উপরোক্ত HTML কোড ব্রাউজারে এমনভাবে দেখা যাবে:
মন্তব্য:পাসওয়ার্ড ফিল্ডের অক্ষরগুলি মাস্কিং প্রক্রিয়ার মাধ্যমে হবে (স্টার বা হালকা বল্ব দিয়ে দেখা যাবে)。
ইনপুট টাইপ: submit
<input type="submit"> সংজ্ঞাজমা দিতেফর্ম ডাটা প্রতিফর্ম হ্যান্ডলারবুটন
ফর্ম হ্যান্ডলার (form-handler) সাধারণত ইনপুট ডাটা প্রক্রিয়াজাতকরণের স্ক্রিপ্ট ধারণকারী সার্ভার পেজ。
In the form's action attribute, specify the form handler (form-handler):
উদাহরণ
<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 কোড ব্রাউজারে এমনভাবে দেখা যাবে:
If you omit the value attribute of the submit button, then the button will get the default text:
উদাহরণ
<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"> </form>
Input Type: radio
<input type="radio"> Radio button defines.
Radio buttons let a user select ONLY ONE of a limited number of choices:
উদাহরণ
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
উপরোক্ত HTML কোড ব্রাউজারে এমনভাবে দেখা যাবে:
Input Type: checkbox
<input type="checkbox"> চিহ্নিক ফিল্ডকে সংজ্ঞা দেয়。
চিহ্নিক ফিল্ড ব্যবহারকারীকে সীমিত সংখ্যক বিকল্প থেকে শূন্যসংখ্যক বা একাধিক বিকল্প নির্বাচন করতে দেয়。
উদাহরণ
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
উপরোক্ত HTML কোড ব্রাউজারে এমনভাবে দেখা যাবে:
Input Type: button
<input type="button"> সংজ্ঞাবাটন。
উদাহরণ
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
উপরোক্ত HTML কোড ব্রাউজারে এমনভাবে দেখা যাবে:
HTML5 ইনপুট ধরন
HTML5-এ অনেকগুলি নতুন ইনপুট ধরন যোগ করা হয়েছে:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
মন্তব্য:পুরানো ওয়েব ব্রাউজারগুলি সমর্থন করতে পারে না এমন ইনপুট ধরন, তা text হিসাবে দেখা যাবে。
ইনপুট ধরন: number
<input type="number"> সংখ্যালঘু যোগ্য ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়。
আপনি সংখ্যার সীমানা নির্ধারণ করতে পারেন。
ব্রাউজারের সমর্থন অনুযায়ী, সীমানা ইনপুট ফিল্ডে লাগানো যাবে。
উদাহরণ
<form> পরিমাণ (১ থেকে ৫): <input type="number" name="quantity" min="1" max="5"> </form>
ইনপুট সীমানা
এখানে সাধারণত ব্যবহৃত ইনপুট সীমানা তালিকাভুক্ত করা হয়েছে (যার মধ্যে কিছু HTML5-এ নতুন হয়েছে):
| বৈশিষ্ট্য | বর্ণনা |
|---|---|
| disabled | ইনপুট ফিল্ডটিকে নিষ্ক্রিয় করা হবে。 |
| max | ইনপুট ফিল্ডের মহত্তম মান নির্ধারণ করুন。 |
| maxlength | ইনপুট ফিল্ডের মহত্তম অক্ষর সংখ্যা নির্ধারণ করুন。 |
| min | ইনপুট ফিল্ডের ন্যূনতম মান নির্ধারণ করুন。 |
| pattern | ইনপুট মানের পরীক্ষা করার জন্য ব্যবহৃত প্রক্রিয়াসূত্রকে নির্ধারণ করুন。 |
| readonly | ইনপুট ফিল্ডটিকে অপসারণ করা যাবে (পরিবর্তন করা যাবে না)。 |
| required | ইনপুট ফিল্ডটি বাধ্যতামূলক (বাধ্যতামূলক পূর্ণ) হবে। |
| size | ইনপুট ফিল্ডের প্রস্থ (অক্ষর অনুযায়ী) নির্ধারণ করুন。 |
| step | ইনপুট ফিল্ডের সম্ভাব্য সংখ্যালঘু নির্ধারণ করুন。 |
| value | ইনপুট ফিল্ডের ডিফল্ট মান নির্ধারণ করুন。 |
আপনি পরবর্তী চাপের মধ্যে ইনপুট সীমানা সম্পর্কে আরও একটু শিখবেন。
উদাহরণ
<form> পরিমাণ: <input type="number" name="points" min="0" max="100" step="10" value="30"> </form>
ইনপুট ধরন: date
<input type="date"> তারিখ যোগযোগ্য ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়。
ব্রাউজারের সহায়তা অনুযায়ী, তারিখ বাছাইকারী ইনপুট ক্ষেত্রে দেখা যাবে。
উদাহরণ
<form> জন্মদিন: <input type="date" name="bday"> </form>
আপনি ইনপুটে সীমানা যোগ করতে পারেন:
উদাহরণ
<form> একটি তারিখ ভরুন ১৯৮০-০১-০১ পরে: <input type="date" name="bday" max="1979-12-31"><br> 2000-01-01 পরের তারিখ এন্টার করুন: Enter a date after 2000-01-01:<br> </form>
ইনপুট ধরন: color
<input type="color"> এমন ইনপুট ক্ষেত্রগুলির জন্য ব্যবহৃত হয় যারা একটি রঙ ধারণ করবে。
ব্রাউজারের সহায়তা অনুযায়ী, রঙ বাছাইকারী ইনপুট ক্ষেত্রে দেখা যাবে。
উদাহরণ
<form> আপনার পছন্দের রঙ নির্বাচন করুন: <input type="color" name="favcolor"> </form>
ইনপুট ধরন: range
<input type="range"> এমন ইনপুট ক্ষেত্রগুলির জন্য ব্যবহৃত হয় যারা একটি বিশেষ সীমাবদ্ধ সময়ের মধ্যে মান ধারণ করবে。
ব্রাউজারের সহায়তা অনুযায়ী, ইনপুট ক্ষেত্রটি স্লাইডার কন্ট্রোল হিসাবে দেখা যাবে。
উদাহরণ
<form> <input type="range" name="points" min="0" max="10"> </form>
আপনি এমন বৈশিষ্ট্যগুলি ব্যবহার করে সীমাবদ্ধতা নির্ধারণ করতে পারেন: min, max, step, value。
ইনপুট ধরন: month
<input type="month"> ব্যবহারকারীকে মাস ও বছর নির্বাচন করতে দেয়。
ব্রাউজারের সহায়তা অনুযায়ী, তারিখ বাছাইকারী ইনপুট ক্ষেত্রে দেখা যাবে。
উদাহরণ
<form> জন্মদিন (মাস ও বছর): <input type="month" name="bdaymonth"> </form>
ইনপুট ধরন: week
<input type="week"> ব্যবহারকারীকে সপ্তাহ ও বছর নির্বাচন করতে দেয়。
ব্রাউজারের সহায়তা অনুযায়ী, তারিখ বাছাইকারী ইনপুট ক্ষেত্রে দেখা যাবে。
উদাহরণ
<form> একটি সপ্তাহ নির্বাচন করুন: <input type="week" name="week_year"> </form>
ইনপুট ধরন: time
<input type="time"> ব্যবহারকারীকে সময় নির্বাচন করতে দেয় (সময়ক্ষেত্র নেই)。
ব্রাউজারের সহায়তা অনুযায়ী, সময় বাছাইকারী ইনপুট ক্ষেত্রে দেখা যাবে。
উদাহরণ
<form> একটি সময় নির্বাচন করুন: <input type="time" name="usr_time"> </form>
ইনপুট ধরন: datetime
<input type="datetime"> ব্যবহারকারীকে তারিখ ও সময় নির্বাচন করতে দেয় (সময়ক্ষেত্র আছে)。
ব্রাউজারের সহায়তা অনুযায়ী, তারিখ বাছাইকারী ইনপুট ক্ষেত্রে দেখা যাবে。
উদাহরণ
<form> জন্মদিন (তারিখ ও সময়): <input type="datetime" name="bdaytime"> </form>
ইনপুট ধরন: datetime-local
<input type="datetime-local"> ব্যবহারকারীকে তারিখ ও সময় নির্বাচন করতে দেয় (সময়ক্ষেত্র নেই)。
ব্রাউজারের সহায়তা অনুযায়ী, তারিখ বাছাইকারী ইনপুট ক্ষেত্রে দেখা যাবে。
উদাহরণ
<form> জন্মদিন (তারিখ ও সময়): <input type="datetime-local" name="bdaytime"> </form>
ইনপুট ধরন: email
<input type="email"> ইনপুট ফিল্ড যা ই-মেল ঠিকানা যোগ করবে
প্রস্তাব করার সময়, ই-মেল ঠিকানা স্বয়ংক্রিয়ভাবে পরীক্ষা করা যাবে
কিছু স্মার্টফোন e-mail ধরন পরিচিত করে, এবং কীবোর্ডে '.com' যোগ করে, যাতে ই-মেল ইনপুটটির সাথে মিলতে পারে
উদাহরণ
<form> ই-মেল: <input type="email" name="email"> </form>
ইনপুট ধরন: search
<input type="search"> সর্চ ফিল্ড (সর্চ ফিল্ডটির প্রকাশনা সাধারণ টেক্সট ফিল্ডের মতো)
উদাহরণ
<form> Google সর্চ: <input type="search" name="googlesearch"> </form>
ইনপুট ধরন: tel
<input type="tel"> ইনপুট ফিল্ড যা টেলিফোন নম্বর যোগ করবে
এখনও শুধুমাত্র Safari 8 টেল ধরনকে সমর্থন করে
উদাহরণ
<form> টেলিফোন: <input type="tel" name="usrtel"> </form>
ইনপুট ধরন: url
<input type="url"> ইনপুট ফিল্ড যা URL ঠিকানা যোগ করবে
ব্রাউজার সমর্থন অনুযায়ী, প্রস্তাব করার সময় url ফিল্ডটির স্বয়ংক্রিয়ভাবে পরীক্ষা করা যাবে
কিছু স্মার্টফোন url ধরন পরিচিত করে, এবং কীবোর্ডে '.com' যোগ করে, যাতে url ইনপুটটির সাথে মিলতে পারে
উদাহরণ
<form> আপনার হোমপেজ যোগ করুন: <input type="url" name="homepage"> </form>
- পূর্ববর্তী পৃষ্ঠা HTML ফর্ম ইলেমেন্ট
- পরবর্তী পৃষ্ঠা HTML Input অ্যাট্রিবিউট
