Form HTML-এর ভূমিকা: কাঠামো, ইনপুট প্রকার এবং উদাহরণ

HTML form হল ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ যা ব্যবহারকারীদের একটি ওয়েবসাইটের সাথে ইন্টারঅ্যাক্ট করতে এবং সার্ভারে ডেটা জমা দিতে দেয়। Form বিভিন্ন উদ্দেশ্যে ব্যবহার করা হয়, যেমন ব্যবহারকারী সংগ্রহ করা form, ব্যবহারকারীর ইনপুট প্রক্রিয়াকরণ এবং ওয়েবসাইটে ব্যবহারকারীর ক্রিয়াকলাপ সক্ষম করা। এই নিবন্ধে, আমরা গুণাবলী এবং বিভিন্ন ধরনের ইনপুট ক্ষেত্র, নির্বাচন উপাদান, টেক্সটেরিয়া এবং সাধারণত HTML-এ ব্যবহৃত বোতামগুলি অন্বেষণ করব form ।

ইনপুট ক্ষেত্র

  • <input type="text">: একটি পাঠ্য ইনপুট ক্ষেত্র তৈরি করে যেখানে ব্যবহারকারীরা আলফানিউমেরিক অক্ষর লিখতে পারে।
  • <input type="password">: একটি পাসওয়ার্ড ইনপুট ক্ষেত্র প্রদর্শন করে যা প্রবেশ করা অক্ষরগুলিকে মাস্ক করে।
  • <input type="email">: একটি বৈধ ইমেল ঠিকানা প্রয়োজন ইনপুট ক্ষেত্রগুলির জন্য ইমেল বৈধতা প্রদান করে৷
  • <input type="number">: শুধুমাত্র সংখ্যাসূচক মান ইনপুট সীমাবদ্ধ.
  • <input type="checkbox">: একটি চেকবক্স প্রতিনিধিত্ব করে যা ব্যবহারকারীরা নির্বাচন বা অনির্বাচন করতে পারে৷
  • <input type="radio">: একটি রেডিও বোতাম প্রতিনিধিত্ব করে যা ব্যবহারকারীদের বিকল্পগুলির একটি গ্রুপ থেকে একটি বিকল্প নির্বাচন করতে দেয়৷
  • <input type="file">: ব্যবহারকারীদের ফাইল নির্বাচন এবং আপলোড করতে সক্ষম করে।
  • <input type="submit">: একটি বোতাম প্রদর্শন করে যা form ক্লিক করার সময় জমা দেয়।
  • <input type="reset">: একটি বোতাম প্রদর্শন করে যা form তার প্রাথমিক অবস্থায় পুনরায় সেট করে।
  • <input type="date">: তারিখ নির্বাচনের জন্য একটি তারিখ চয়নকারী প্রদান করে৷
  • <input type="time">: ব্যবহারকারীদের সময় মান ইনপুট করার অনুমতি দেয়।

উপাদান নির্বাচন করুন

  • <select>: নির্বাচনযোগ্য বিকল্প সহ একটি ড্রপডাউন মেনু তৈরি করে।
  • <option>: ট্যাগের ভিতরে রাখা ড্রপডাউন মেনুর মধ্যে একটি বিকল্প নির্ধারণ করে <select>
  • <optgroup>: ড্রপডাউন মেনুর মধ্যে একসাথে গোষ্ঠী সম্পর্কিত বিকল্পগুলি।
  • <select multiple>: ক্লিক করার সময় Ctrl কী(বা ম্যাকের কমান্ড কী) চেপে ধরে ব্যবহারকারীদের একসাথে একাধিক বিকল্প নির্বাচন করার অনুমতি দেয়।

Textareas

<textarea>: একটি মাল্টিলাইন পাঠ্য ইনপুট ক্ষেত্র তৈরি করে যেখানে ব্যবহারকারীরা পাঠ্যের দীর্ঘ ব্লকগুলি প্রবেশ করতে এবং সম্পাদনা করতে পারে। rows এটির আকার পরিবর্তন করা এবং cols এর মাত্রা নির্ধারণের মতো বৈশিষ্ট্যগুলির সাথে কনফিগার করা যেতে পারে ।

বোতাম

<button>: একটি বোতাম প্রতিনিধিত্ব করে যা একটি এর মধ্যে বিভিন্ন ক্রিয়া ট্রিগার করতে পারে form । form এটি একটি, প্রতি form একটি জাভাস্ক্রিপ্ট ফাংশন জমা দিতে, বা একটি ভিন্ন পৃষ্ঠায় নেভিগেট করতে ব্যবহার করা যেতে পারে ।

উদাহরণ ব্যবহার:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

এই উদাহরণটি ক্ষেত্র,, এবং একটি বোতাম form সহ বিভিন্ন উপাদানের ব্যবহার প্রদর্শন করে ৷ আপনার নির্দিষ্ট প্রয়োজনীয়তার উপর ভিত্তি করে উপাদান এবং বৈশিষ্ট্য কাস্টমাইজ করতে নির্দ্বিধায়. input textarea checkbox select dropdown submit form