HTML Form Input Types

HTML ফর্ম ইনপুট প্রকার

একটি HTML ফর্ম হল একটি নথির একটি বিভাগ যাতে টেক্সট ক্ষেত্র, পাসওয়ার্ড ক্ষেত্র, চেকবক্স, রেডিও বোতাম, সাবমিট বোতাম, মেনু ইত্যাদির মতো নিয়ন্ত্রণ থাকে।

একটি এইচটিএমএল ফর্ম ব্যবহারকারীকে ডেটা প্রবেশ করতে সহায়তা করে যা সার্ভারে প্রসেসিংয়ের জন্য পাঠানো হয় যেমন নাম, ইমেল ঠিকানা, পাসওয়ার্ড, ফোন নম্বর ইত্যাদি।

নিচে HTML এর সকল প্রকার উপাদানের একটি তালিকা রয়েছে।

type=" “ Description
text একটি এক-লাইন পাঠ্য ইনপুট ক্ষেত্র সংজ্ঞায়িত করে
password একটি এক-লাইন পাসওয়ার্ড ইনপুট ক্ষেত্র সংজ্ঞায়িত করে
submit সার্ভারে ফর্ম জমা দেওয়ার জন্য একটি জমা বোতাম সংজ্ঞায়িত করে
reset ফর্মের সমস্ত মান পুনরায় সেট করতে একটি রিসেট বোতাম সংজ্ঞায়িত করে।
radio একটি রেডিও বোতাম সংজ্ঞায়িত করে যা একটি বিকল্প নির্বাচন করার অনুমতি দেয়।
checkbox চেকবক্স সংজ্ঞায়িত করে যা একাধিক বিকল্প ফর্ম নির্বাচন করার অনুমতি দেয়।
button একটি সাধারণ পুশ বোতাম সংজ্ঞায়িত করে, যা একটি ইভেন্টে একটি কাজ সম্পাদন করার জন্য প্রোগ্রাম করা যেতে পারে।
file ডিভাইস স্টোরেজ থেকে ফাইল নির্বাচন করতে সংজ্ঞায়িত করে।
image একটি গ্রাফিক্যাল জমা বোতাম সংজ্ঞায়িত করে।

HTML5 এলিমেন্টে নতুন ধরনের যোগ করেছে। HTML5 এর উপাদানের প্রকারের তালিকা নিচে দেওয়া হল

type=" “ Description
color একটি নির্দিষ্ট রঙ সহ একটি ইনপুট ক্ষেত্র সংজ্ঞায়িত করে।
date তারিখ নির্বাচনের জন্য একটি ইনপুট ক্ষেত্র সংজ্ঞায়িত করে।
datetime-local সময় অঞ্চল ছাড়া একটি তারিখ প্রবেশ করার জন্য একটি ইনপুট ক্ষেত্র সংজ্ঞায়িত করে।
email একটি ইমেল ঠিকানা প্রবেশ করার জন্য একটি ইনপুট ক্ষেত্র সংজ্ঞায়িত করে।
month সময় অঞ্চল ছাড়াই মাস এবং বছরের সাথে একটি নিয়ন্ত্রণ সংজ্ঞায়িত করে।
number একটি সংখ্যা লিখতে একটি ইনপুট ক্ষেত্র সংজ্ঞায়িত করে।
url URL প্রবেশের জন্য একটি ক্ষেত্র সংজ্ঞায়িত করে
week সময় অঞ্চল ছাড়াই সপ্তাহ-বছরের সাথে তারিখ লিখতে একটি ক্ষেত্র সংজ্ঞায়িত করে।
search একটি অনুসন্ধান স্ট্রিং প্রবেশ করার জন্য একটি একক লাইন পাঠ্য ক্ষেত্র সংজ্ঞায়িত করে।
tel টেলিফোন নম্বর প্রবেশের জন্য একটি ইনপুট ক্ষেত্র সংজ্ঞায়িত করে।

উদাহরণ সহ <ইনপুট> উপাদানের প্রকারের বিবরণ নিচে দেওয়া হল।

1. :

একটি একক-লাইন ইনপুট পাঠ্য ক্ষেত্র সংজ্ঞায়িত করার জন্য “টেক্সট" টাইপের উপাদান ব্যবহার করা হয়।

উদাহরণ:

 
  1. <form>  
  2.     <label>Enter first namelabel><br>  
  3.     <input type=“text" name=“firstname"><br>  
  4.     <label>Enter last namelabel><br>  
  5.     <input type=“text" name=“lastname"><br>  
  6.     <p><strong>Note:strong>The default maximum cahracter lenght is 20.p>  
  7. form>  

আউটপুট:

ইনপুট “টেক্সট" টাইপ:

“টেক্সট" ক্ষেত্রটি একটি একক লাইন ইনপুট টেক্সট ক্ষেত্র সংজ্ঞায়িত করে।

প্রথম নাম লিখুন

পদবি লিখুন

দ্রষ্টব্য: ডিফল্ট সর্বোচ্চ অক্ষর দৈর্ঘ্য 20।

4. :

<ইনপুট> টাইপ “রিসেট" একটি বোতাম হিসাবেও সংজ্ঞায়িত করা হয় কিন্তু যখন ব্যবহারকারী একটি ক্লিক ইভেন্ট সঞ্চালন করে, এটি ডিফল্টরূপে সমস্ত ইনপুট করা মান পুনরায় সেট করে।

উদাহরণ:

  1. <form>  
  2.     <label>User id: label>  
  3.      <input type=“text" name=“user-id" value=“user">  
  4.               <label>Password: label>  
  5.      <input type=“password" name=“pass" value=“pass"><br><br>   
  6.      <input type=“submit" value=“login">  
  7.       <input type=“reset" value=“Reset">  
  8. form>  

আউটপুট:

Input “reset" type:

 

 

ব্যবহারকারী আইডি এবং পাসওয়ার্ডের ইনপুট মান পরিবর্তন করার চেষ্টা করুন, তারপরে আপনি যখন রিসেট এ ক্লিক করবেন, এটি ডিফল্ট মান সহ ইনপুট ক্ষেত্রগুলি পুনরায় সেট করবে।

5. :

 টাইপ “রেডিও" রেডিও বোতামগুলিকে সংজ্ঞায়িত করে, যা সম্পর্কিত বিকল্পগুলির একটি সেটের মধ্যে একটি বিকল্প বেছে নেওয়ার অনুমতি দেয়। একটি সময়ে শুধুমাত্র একটি রেডিও বোতাম বিকল্প একটি সময়ে নির্বাচন করা যেতে পারে.

উদাহরণ:

  1. <form>  
  2.   <p>Kindly Select your favorite colorp>  
  3.   <input type=“radio" name=“color" value=“red"> Red <br>  
  4.   <input type=“radio" name=“color" value=“blue"> blue <br>  
  5.   <input type=“radio" name=“color" value=“green">green <br>  
  6.   <input type=“radio" name=“color" value=“pink">pink <br>  
  7.   <input type=“submit" value=“submit">  
  8. form>  

আউটপুট:

ইনপুট “রেডিও" টাইপ

অনুগ্রহ করে আপনার প্রিয় রং নির্বাচন করুন

 লাল

 নীল

সবুজ

গোলাপী

6. :

<ইনপুট> টাইপ “চেকবক্স" বর্গাকার বাক্স হিসাবে প্রদর্শিত হয় যা প্রদত্ত বিকল্পগুলি থেকে পছন্দগুলি নির্বাচন করতে চেক বা টিক চিহ্নমুক্ত করা যেতে পারে।

দ্রষ্টব্য: “রেডিও" বোতামগুলি চেকবক্সের মতোই, তবে উভয় প্রকারের মধ্যে একটি গুরুত্বপূর্ণ পার্থক্য রয়েছে: রেডিও বোতামগুলি ব্যবহারকারীকে একবারে শুধুমাত্র একটি বিকল্প নির্বাচন করতে দেয়, যেখানে চেকবক্স ব্যবহারকারীকে এক সময়ে শূন্য থেকে একাধিক বিকল্প নির্বাচন করতে দেয় .

উদাহরণ:

  1. <form>   
  2.       <label>Enter your Name:label>  
  3.       <input type=“text" name=“name">  
  4.       <p>Kindly Select your favourite sportsp>  
  5.       <input type=“checkbox" name=“sport1" value=“cricket">Cricket<br>  
  6.       <input type=“checkbox" name=“sport2" value=“tennis">Tennis<br>  
  7.       <input type=“checkbox" name=“sport3" value=“football">Football<br>  
  8.       <input type=“checkbox" name=“sport4" value=“baseball">Baseball<br>  
  9.       <input type=“checkbox" name=“sport5" value=“badminton">Badminton<br><br>  
  10.       <input type=“submit" value=“submit">  
  11.   form>  

আউটপুট:

ইনপুট “চেকবক্স" টাইপ

নিবন্ধন ফর্ম

আপনার নাম প্রবেশ করুন:
অনুগ্রহ করে আপনার প্রিয় খেলা নির্বাচন করুন
 
ক্রিকেট
টেনিস
ফুটবল
বেসবল
ব্যাডমিন্টন
 

7. :

<ইনপুট> টাইপ “বোতাম" একটি সাধারণ পুশ বোতামকে সংজ্ঞায়িত করে, যেটি যেকোনো ইভেন্টে যেমন, ক্লিক ইভেন্টে কার্যকরীভাবে নিয়ন্ত্রণ করতে প্রোগ্রাম করা যেতে পারে।

দ্রষ্টব্য: এটি প্রধানত জাভাস্ক্রিপ্টের সাথে কাজ করে।

উদাহরণ: 

  1. <form>  
  2.      <input type=“button" value=“Clcik me “ onclick=“alert(‘you are learning HTML’)">  
  3. form>  

আউটপুট:

ইনপুট “বোতাম" টাইপ।

ফলাফল দেখতে বোতামে ক্লিক করুন:

দ্রষ্টব্য: উপরের উদাহরণে আমরা JS-এর “সতর্কতা" ব্যবহার করেছি, যা আপনি আমাদের JS টিউটোরিয়ালে শিখবেন। এটি একটি পপ উইন্ডো দেখানোর জন্য ব্যবহৃত হয়

8. :

“ফাইল" টাইপ সহ <ইনপুট> উপাদানটি ব্যবহারকারীর ডিভাইস স্টোরেজ থেকে এক বা একাধিক ফাইল নির্বাচন করতে ব্যবহৃত হয়। একবার আপনি ফাইলটি নির্বাচন করলে এবং জমা দেওয়ার পরে, এই ফাইলটি JS কোড এবং ফাইল API এর সাহায্যে সার্ভারে আপলোড করা যেতে পারে।

উদাহরণ:

  1. <form>  
  2.      <label>Select file to upload:label>  
  3.      <input type=“file" name=“newfile">  
  4.      <input type=“submit" value=“submit">  
  5. form>  

আউটপুট:

ইনপুট “ফাইল" টাইপ।

আমরা এটি নির্দিষ্ট না করা পর্যন্ত আমরা যেকোনো ধরনের ফাইল বেছে নিতে পারি! নির্বাচিত ফাইলটি “ফাইল চয়ন করুন" বিকল্পের পাশে প্রদর্শিত হবে

9. :

<ইনপুট> টাইপ “ইমেজ" ইমেজ আকারে একটি জমা বোতাম উপস্থাপন করতে ব্যবহৃত হয়।

উদাহরণ:

  1. >  
  2. <html>  
  3. <body>  
  4. <h2>Input “image" type.h2>  
  5. <p>We can create an image as submit buttonp>  
  6.   <form>  
  7.     <label>User id:label><br>  
  8.      <input type=“text" name=“name"><br><br>  
  9.      <input type=“image" alt=“Submit" src=“login.png"  width=“100px">  
  10.   form>  
  11.   
  12.  body>  
  13. html>  

HTML5 নতুন যোগ করা  প্রকার উপাদান

1. :

 টাইপ “color" একটি ইনপুট ক্ষেত্র সংজ্ঞায়িত করতে ব্যবহৃত হয় যাতে একটি রঙ থাকে। এটি একটি ব্যবহারকারীকে ব্রাউজারে ভিজ্যুয়াল কালার ইন্টারফেসের মাধ্যমে রঙ নির্দিষ্ট করতে দেয়।

দ্রষ্টব্য: “রঙ" প্রকারটি শুধুমাত্র হেক্সাডেসিমেল বিন্যাসে রঙের মানকে সমর্থন করে এবং ডিফল্ট মান হল #000000 (কালো)।

উদাহরণ:

 
  1. <form>  
  2.     Pick your Favorite color: <br><br>  
  3.     <input type=“color" name=“upclick" value=“#a52a2a"> Upclick<br><br>  
  4.     <input type=“color" name=“downclick" value=“#f5f5dc"> Downclick  
  5. form>  

আউটপুট:

ইনপুট “রঙ" প্রকার:

আপনার প্রিয় রঙ চয়ন করুন:

আপ-ক্লিক করুন

ডাউন-ক্লিক করুন

দ্রষ্টব্য: “রঙ" টাইপের ডিফল্ট মান হল #000000 (কালো)। এটি শুধুমাত্র হেক্সাডেসিমেল বিন্যাসে রঙ মান সমর্থন করে।

2. :

“তারিখ" টাইপের <ইনপুট> উপাদানটি একটি ইনপুট ক্ষেত্র তৈরি করে, যা ব্যবহারকারীকে একটি প্রদত্ত বিন্যাসে তারিখ ইনপুট করতে দেয়। একজন ব্যবহারকারী টেক্সট ফিল্ড বা ডেট পিকার ইন্টারফেসের মাধ্যমে তারিখ লিখতে পারেন।

উদাহরণ:

  1. <form>  
  2. Select Start and End Date: <br><br>  
  3. <input type=“date" name=“Startdate"> Start date:<br><br>  
  4. <input type=“date" name=“Enddate"> End date:<br><br>  
  5. <input type=“submit">  
  6. form>  

আউটপুট:

ইনপুট “তারিখ" প্রকার

শুরু এবং শেষ তারিখ নির্বাচন করুন:

dd-mm-yyyy

শুরুর তারিখ:

dd-mm-yyyy

শেষ তারিখ:

জমা দিন

3. :

“datetime-local" টাইপের  উপাদানটি ইনপুট ক্ষেত্র তৈরি করে যা একজন ব্যবহারকারীকে সময় অঞ্চলের তথ্য ছাড়াই ঘন্টা এবং মিনিটে তারিখের পাশাপাশি স্থানীয় সময় নির্বাচন করতে দেয়।

উদাহরণ:

  1. <form>  
  2.     <label>  
  3.  Select the meeting schedule: <br><br>  
  4.  Select date & time: <input type=“datetime-local" name=“meetingdate"> <br><br>  
  5. label>  
  6. <input type=“submit">  
  7. form>  

আউটপুট:

ইনপুট “তারিখ সময়-স্থানীয়" প্রকার

মিটিং সময়সূচী নির্বাচন করুন:

তারিখ এবং সময় নির্বাচন করুন:

dd-mm-yyyy —:-

জমা দিন

4. :

<ইনপুট> টাইপ “ইমেল" একটি ইনপুট ক্ষেত্র তৈরি করে যা একজন ব্যবহারকারীকে প্যাটার্ন বৈধতা সহ ই-মেইল ঠিকানা প্রবেশ করতে দেয়। একাধিক গুণাবলী একজন ব্যবহারকারীকে একাধিক ইমেল ঠিকানা প্রবেশ করার অনুমতি দেয়।

উদাহরণ:

  1. <form>  
  2.          <label><b>Enter your Email-addressb>label>  
  3.         <input type=“email" name=“email" required>  
  4.         <input type=“submit">  
  5.          <p><strong>Note:strong>User can also enter multiple email addresses separating by comma or whitespace as following: p>  
  6.          <label><b>Enter multiple Email-addressesb>label>  
  7.          <input type=“email" name=“email"  multiple>  
  8.         <input type=“submit">  
  9. form>     

Output:

ইনপুট “ইমেল" প্রকার

তোমার ই – মেইল ​​ঠিকানা লেখো

জমা দিন

দ্রষ্টব্য: ব্যবহারকারী নিম্নরূপ কমা বা হোয়াইটস্পেস দ্বারা পৃথক করে একাধিক ইমেল ঠিকানাও প্রবেশ করতে পারেন:

একাধিক ইমেল ঠিকানা লিখুন

জমা দিন

5. :

<ইনপুট> টাইপ “মাস" একটি ইনপুট ক্ষেত্র তৈরি করে যা একজন ব্যবহারকারীকে “MM, YYYY" ফর্ম্যাটে সহজেই মাস এবং বছর প্রবেশ করতে দেয় যেখানে MM মাসের মান নির্ধারণ করে এবং YYYY বছরের মান নির্ধারণ করে৷ নতুন

উদাহরণ:

  1. <form>  
  2.     <label>Enter your Birth Month-year: label>  
  3.     <input type=“month" name=“newMonth">  
  4.     <input type=“submit">  
  5. form>  

আউটপুট:

ইনপুট “মাস" প্রকার:

আপনার জন্ম মাস-বছর লিখুন:

———, —-

জমা দিন

6. :

 উপাদান প্রকার সংখ্যা ইনপুট ক্ষেত্র তৈরি করে যা একজন ব্যবহারকারীকে সাংখ্যিক মান প্রবেশ করতে দেয়। এছাড়াও আপনি ন্যূনতম এবং সর্বোচ্চ বৈশিষ্ট্য ব্যবহার করে একটি সর্বনিম্ন এবং সর্বোচ্চ মান লিখতে সীমাবদ্ধ করতে পারেন।

উদাহরণ;

  1. <form>  
  2. <label>Enter your age: label>  
  3. <input type=“number" name=“num" min=“50" max=“80">  
  4. <input type=“submit">  
  5. form>  

আউটপুট:

ইনপুট “সংখ্যা" প্রকার

আপনার বয়স প্রবেশ:

জমা দিন

দ্রষ্টব্য: এটি 50-80 সীমার মধ্যে নম্বর প্রবেশ করার অনুমতি দেবে। আপনি যদি পরিসর ছাড়া অন্য নম্বর লিখতে চান তবে এটি একটি ত্রুটি দেখাবে।

7. :

“url" টাইপের উপাদানটি একটি ইনপুট ক্ষেত্র তৈরি করে যা ব্যবহারকারীকে URL এ প্রবেশ করতে সক্ষম করে।

উদাহরণ:

  1. <form>  
  2. <label>Enter your website URL: label>  
  3. <input type=“url" name=“website" placeholder=“http://example.com"><br>  
  4. <input type=“submit" value=“send data">  
  5. form>  

আউটপুট:

ইনপুট “url" প্রকার

আপনার ওয়েবসাইটের URL লিখুন:

http://example.com

তথ্য পাঠান

8. :

টাইপ সপ্তাহ একটি ইনপুট ক্ষেত্র তৈরি করে যা একজন ব্যবহারকারীকে টাইম জোন ছাড়াই ড্রপ-ডাউন ক্যালেন্ডারে একটি সপ্তাহ এবং বছর নির্বাচন করতে দেয়।

উদাহরণ:

  1. <form>  
  2. <label><b>Select your best week of year:b>label><br><br>  
  3. <input type=“week" name=“bestweek">  
  4. <input type=“submit" value=“Send data">  
  5. form>  

আউটপুট:

ইনপুট “সপ্তাহ" প্রকার

আপনার বছরের সেরা সপ্তাহ বেছে নিন:

সপ্তাহ –, —–

তথ্য পাঠান

9. :

টাইপ “অনুসন্ধান" একটি ইনপুট ফাইল তৈরি করে যা একজন ব্যবহারকারীকে একটি অনুসন্ধান স্ট্রিং প্রবেশ করতে দেয়। এগুলি টেক্সট ইনপুট প্রকারের সাথে কার্যকরীভাবে প্রতিসম, কিন্তু ভিন্নভাবে স্টাইল করা যেতে পারে।

উদাহরণ:

  1. <form>  
  2. <label>Search here:label>  
  3. <input type=“search" name=“q">  
  4. <input type=“submit" value=“search">  
  5. form>  

আউটপুট:

ইনপুট “অনুসন্ধান" প্রকার

এখানে অনুসন্ধান করুন:

অনুসন্ধান

10. :

টাইপের <ইনপুট> উপাদান ?tel? টেলিফোন নম্বর প্রবেশ করার জন্য ফাইল করা একটি ইনপুট তৈরি করে। “টেল" প্রকারে ইমেলের মতো ডিফল্ট বৈধতা নেই, কারণ টেলিফোন নম্বর প্যাটার্ন বিশ্বব্যাপী পরিবর্তিত হতে পারে।

উদাহরণ:

  1. <form>  
  2.       <label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):b>label>  
  3.       <input type=“tel" name=“telephone" pattern=“[0-9]{3}-[0-9]{3}-[0-9]{4}" required>  
  4.       <input type=“submit"><br><br>  
  5.    form>   

আউটপুট:

ইনপুট “টেল" টাইপ

আপনার টেলিফোন নম্বর লিখুন (xxx-xxx-xxxx ফরম্যাটে):

জমা দিন

দ্রষ্টব্য: এখানে আমরা দুটি বৈশিষ্ট্য ব্যবহার করছি যা “প্যাটার্ন" এবং “প্রয়োজনীয়" যা ব্যবহারকারীকে প্রদত্ত বিন্যাসে নম্বরটি প্রবেশ করার অনুমতি দেবে এবং ইনপুট ক্ষেত্রে নম্বরটি প্রবেশ করতে হবে৷



Leave a Reply