HTML5 এর ফর্মস এবং ইনপুট ফিল্ডস

HTML5 এ ফর্মস (Forms) এবং ইনপুট ফিল্ডস (Input Fields) ব্যবহার করে ব্যবহারকারীর কাছ থেকে ডাটা সংগ্রহ করা হয়। ফর্ম HTML ডকুমেন্টে ডাটা সংগ্রহ এবং প্রক্রিয়াকরণের একটি সাধারণ উপায়, এবং ইনপুট ফিল্ড বিভিন্ন ধরনের ডাটা (যেমন টেক্সট, ইমেল, পাসওয়ার্ড, ইত্যাদি) সংগ্রহ করতে সাহায্য করে। HTML5 এ বিভিন্ন নতুন ইনপুট টাইপ এবং অ্যাট্রিবিউট যোগ করা হয়েছে, যা ফর্ম তৈরি এবং ব্যবহার আরও সহজ এবং কার্যকরী করেছে।

HTML5 এ ফর্মের কার্যকারিতা ও ইউজার এক্সপেরিয়েন্স বাড়ানোর জন্য বেশ কিছু নতুন Form Elements এবং Attributes যোগ করা হয়েছে। এগুলো ফর্মের ডাটা ইনপুট ও ভ্যালিডেশন প্রক্রিয়া আরও সহজ এবং কার্যকরী করে তোলে। নিচে HTML5 এর নতুন ফর্ম এলিমেন্ট এবং তাদের ব্যবহার নিয়ে আলোচনা করা হলো।

১. <datalist>

• বর্ণনা: <datalist> ট্যাগ একটি ইনপুট ফিল্ডের জন্য প্রি-ডিফাইনড অপশনগুলোর একটি তালিকা তৈরি করতে ব্যবহৃত হয়। ইউজাররা যখন ইনপুট ফিল্ডে কিছু টাইপ করে, তখন একটি ড্রপডাউন মেনুতে এই তালিকার অপশনগুলো প্রদর্শিত হয়।
• ব্যবহার: ইনপুটে পূর্বনির্ধারিত অপশন দেওয়ার জন্য, যাতে ইউজাররা দ্রুত সিলেক্ট করতে পারে।

উদাহরণ:

<input list="browsers" name="browser" placeholder="Choose a browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>

ব্যাখ্যা: এখানে "browsers" নামে একটি <datalist> তৈরি করা হয়েছে, যা ইনপুট ফিল্ডে টাইপ করার সময় সম্ভাব্য অপশনগুলো প্রদর্শন করবে।

২. <output>

• বর্ণনা: <output> ট্যাগ ফর্মের ডাটা থেকে ফলাফল বা আউটপুট প্রদর্শন করতে ব্যবহৃত হয়। এটি বিশেষ করে ক্যালকুলেশন বা ফর্মুলা প্রয়োগ করে রেজাল্ট দেখানোর জন্য সহায়ক।
• ব্যবহার: রিয়েল-টাইম ক্যালকুলেশন বা ফলাফল প্রদর্শন করতে।

উদাহরণ:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0"> =
    <output name="result" for="a b">0</output>
</form>

ব্যাখ্যা: দুটি ইনপুট ফিল্ডের যোগফল <output> ট্যাগে প্রদর্শিত হচ্ছে। ইউজার সংখ্যা ইনপুট করলে, তাৎক্ষণিকভাবে ফলাফল আপডেট হবে।

৩. <progress>

• বর্ণনা: <progress> ট্যাগ একটি প্রগ্রেস বার তৈরি করতে ব্যবহৃত হয়, যা কাজের সম্পন্ন হওয়ার পরিমাণ বা অগ্রগতি প্রদর্শন করে।
• ব্যবহার: লোডিং, ডাউনলোড, বা কোনো প্রক্রিয়া কতটুকু সম্পন্ন হয়েছে তা দেখাতে।

উদাহরণ:

<progress value="70" max="100">70%</progress>

ব্যাখ্যা: এখানে একটি প্রগ্রেস বার তৈরি করা হয়েছে, যা ৭০% সম্পন্ন হয়েছে বলে প্রদর্শিত হবে।

৪. <meter>

• বর্ণনা: <meter> ট্যাগ একটি মিটার বা গেজ তৈরি করতে ব্যবহৃত হয়, যা একটি নির্দিষ্ট রেঞ্জের মধ্যে কোনো মান বা ভ্যালু প্রদর্শন করে।
• ব্যবহার: স্কোর, রেটিং, বা পরিমাণগত মান প্রদর্শন করতে।

উদাহরণ:

<meter value="0.7" min="0" max="1">70%</meter>

ব্যাখ্যা: এখানে একটি মিটার তৈরি করা হয়েছে, যা ০ থেকে ১ এর মধ্যে ০.৭ মান প্রদর্শন করছে, যা ৭০% হিসাবে দেখাবে।

৫. type="color"

• বর্ণনা: HTML5 এ নতুন ইনপুট টাইপ হিসেবে "color" যোগ করা হয়েছে, যা একটি কালার পিকার তৈরি করে। ইউজার একটি রঙ সিলেক্ট করতে পারে।
• ব্যবহার: ইউজারদের ইন্টারফেসে রঙ বেছে নেওয়ার সুবিধা দিতে।

উদাহরণ:

<input type="color" name="favcolor" value="#ff0000">

ব্যাখ্যা: এখানে একটি কালার পিকার ইনপুট তৈরি করা হয়েছে, যা ডিফল্টভাবে লাল রঙ সিলেক্ট করা।

৬. type="date", type="time", এবং type="datetime-local"

• বর্ণনা: HTML5 এ তারিখ এবং সময় ইনপুট করার জন্য নতুন ইনপুট টাইপ যোগ করা হয়েছে।
  • type="date": কেবলমাত্র তারিখ ইনপুট করার জন্য।
  • type="time": কেবলমাত্র সময় ইনপুট করার জন্য।
  • type="datetime-local": তারিখ এবং সময় একসাথে ইনপুট করার জন্য।
• ব্যবহার: ইভেন্ট, অ্যাপয়েন্টমেন্ট, বা সময়সূচি ইনপুট করতে।

উদাহরণ:

<input type="date" name="event-date">
<input type="time" name="event-time">
<input type="datetime-local" name="meeting">

ব্যাখ্যা: এখানে তিনটি ইনপুট ফিল্ড তৈরি করা হয়েছে, যা ইউজারকে তারিখ, সময়, এবং তারিখসহ সময় ইনপুট করার সুবিধা দেয়।

৭. type="range"

• বর্ণনা: "range" ইনপুট টাইপ একটি স্লাইডার তৈরি করতে ব্যবহৃত হয়, যেখানে ইউজার একটি নির্দিষ্ট রেঞ্জের মধ্যে মান সিলেক্ট করতে পারে।
• ব্যবহার: ভলিউম কন্ট্রোল, উজ্জ্বলতা সেটিং, বা অন্যান্য মান নির্ধারণ করতে।

উদাহরণ:

<input type="range" name="volume" min="0" max="100" value="50">

ব্যাখ্যা: এখানে একটি স্লাইডার তৈরি করা হয়েছে, যেখানে ইউজার ভলিউম ০ থেকে ১০০ এর মধ্যে নিয়ন্ত্রণ করতে পারে।

৮. type="search"

• বর্ণনা: "search" ইনপুট টাইপ একটি সার্চ বক্স তৈরি করতে ব্যবহৃত হয়। এটি সার্চ ফিল্ডের জন্য বিশেষভাবে ডিজাইন করা, যেখানে ক্লিয়ার বাটন অন্তর্ভুক্ত থাকে।
• ব্যবহার: সার্চ ফিল্ড তৈরি করতে, যেখানে ইউজার কীবোর্ডে টাইপ করে কিছু খুঁজে পেতে পারেন।

উদাহরণ:

<input type="search" name="search" placeholder="Search...">

ব্যাখ্যা: এখানে একটি সার্চ ইনপুট ফিল্ড তৈরি করা হয়েছে, যা সার্চ করার জন্য ইউজারকে নির্দেশ করে।

৯. type="month" এবং type="week"

• বর্ণনা: HTML5 এ নির্দিষ্ট মাস বা সপ্তাহ ইনপুট করার জন্য "month" এবং "week" ইনপুট টাইপ যোগ করা হয়েছে।
  • type="month": মাস এবং বছর ইনপুট করতে।
  • type="week": নির্দিষ্ট সপ্তাহ ইনপুট করতে।
• ব্যবহার: মাসিক বা সাপ্তাহিক ডেটা ইনপুট করতে।

উদাহরণ:

<input type="month" name="billing-month">
<input type="week" name="schedule-week">

ব্যাখ্যা: এখানে দুটি ইনপুট ফিল্ড তৈরি করা হয়েছে, একটি মাস ইনপুটের জন্য এবং আরেকটি সপ্তাহ ইনপুটের জন্য।

সারসংক্ষেপ

HTML5 এ নতুন ফর্ম এলিমেন্ট এবং ইনপুট টাইপগুলো ফর্ম ডিজাইন এবং ইউজার ইন্টারফেসের কার্যকারিতা ও সহজতা বাড়ানোর জন্য খুবই সহায়ক। এগুলো ফর্মের ইনপুট এবং ডাটা ভ্যালিডেশন প্রক্রিয়াকে আরও উন্নত করে, এবং ইউজার এক্সপেরিয়েন্স বাড়াতে সাহায্য করে।

এই নতুন এলিমেন্ট এবং ইনপুট টাইপগুলো HTML5 ফর্মকে আরও ফিচার-সমৃদ্ধ এবং রেস্পন্সিভ করে তোলে, যা ওয়েব ডেভেলপমেন্টে নতুন সুযোগ সৃষ্টি করে।

HTML5 এ ইনপুট টাইপস ব্যবহার করে বিভিন্ন ধরনের ডাটা ইনপুট ফিল্ড তৈরি করা যায়, যা ইউজারদের থেকে ডাটা সংগ্রহ করতে সহায়ক এবং ফর্ম ভ্যালিডেশনের সুবিধা প্রদান করে। HTML5 এ ইনপুট টাইপগুলোর সাহায্যে ইউজার ইন্টারফেসকে আরও কার্যকরী এবং ব্যবহারযোগ্য করা যায়। নিচে HTML5 এর সাধারণ এবং নতুন কিছু ইনপুট টাইপস নিয়ে আলোচনা করা হলো:

১. type="text"

বর্ণনা: এটি সবচেয়ে সাধারণ ইনপুট টাইপ, যা সাধারণ টেক্সট ইনপুট করতে ব্যবহার করা হয়। এটি নাম, ঠিকানা বা যেকোনো সাধারণ টেক্সট ইনপুটের জন্য উপযোগী।

উদাহরণ:

<input type="text" name="username" placeholder="Enter your name">

ব্যবহার: ইউজারের নাম, ঠিকানা, বা অন্যান্য সাধারণ তথ্য সংগ্রহের জন্য।

২. type="email"

বর্ণনা: ইমেল অ্যাড্রেস ইনপুট করার জন্য ব্যবহৃত হয় এবং ব্রাউজার ইমেল ইনপুট ভ্যালিডেট করতে পারে। এটি নিশ্চিত করে যে ইউজার একটি বৈধ ইমেল অ্যাড্রেস ইনপুট করেছেন।

উদাহরণ:

<input type="email" name="email" placeholder="Enter your email" required>

ব্যবহার: ইমেল সাবস্ক্রিপশন, ইউজার রেজিস্ট্রেশন বা কন্টাক্ট ফর্মে ইমেল অ্যাড্রেস সংগ্রহের জন্য।

৩. type="number"

বর্ণনা: এটি একটি সংখ্যার ইনপুট ফিল্ড তৈরি করে, যেখানে শুধুমাত্র সংখ্যা ইনপুট করা যায়। এর সাথে min এবং max অ্যাট্রিবিউট ব্যবহার করে ভ্যালু রেঞ্জ সীমাবদ্ধ করা যায়।

উদাহরণ:

<input type="number" name="age" min="0" max="100" placeholder="Enter your age">

ব্যবহার: সংখ্যা ইনপুটের জন্য, যেমন বয়স, প্রাইস, অথবা পরিমাণ।

৪. type="range"

বর্ণনা: একটি রেঞ্জ স্লাইডার ইনপুট তৈরি করে, যেখানে ইউজার একটি নির্দিষ্ট রেঞ্জের মধ্যে মান সিলেক্ট করতে পারে। এটি min, max, এবং step অ্যাট্রিবিউট ব্যবহার করে কাস্টমাইজ করা যায়।

উদাহরণ:

<input type="range" name="volume" min="0" max="100" value="50">

ব্যবহার: ভলিউম কন্ট্রোল, উজ্জ্বলতা সেটিং, বা অন্যান্য রেঞ্জ নির্ভর কন্ট্রোলের জন্য।

৫. type="date"

বর্ণনা: একটি তারিখ পিকার তৈরি করে, যেখানে ইউজার ক্যালেন্ডার থেকে একটি নির্দিষ্ট তারিখ সিলেক্ট করতে পারেন। এটি ফর্ম ভ্যালিডেশনের সুবিধা দেয় এবং ব্রাউজারের ডিফল্ট ক্যালেন্ডার উইজেট ব্যবহার করে।

উদাহরণ:

<input type="date" name="birthday">

ব্যবহার: জন্মতারিখ, ইভেন্টের তারিখ, বা অ্যাপয়েন্টমেন্টের সময়সূচি নির্ধারণের জন্য।

৬. type="time"

বর্ণনা: একটি সময় পিকার তৈরি করে, যেখানে ইউজার একটি নির্দিষ্ট সময় (ঘণ্টা এবং মিনিট) সিলেক্ট করতে পারেন। এটি ফর্ম ভ্যালিডেশনের সুবিধা দেয়।

উদাহরণ:

<input type="time" name="meeting-time">

ব্যবহার: মিটিং বা অ্যাপয়েন্টমেন্টের সময় নির্ধারণের জন্য।

৭. type="url"

বর্ণনা: একটি URL ইনপুট ফিল্ড তৈরি করে, যেখানে ইউজার একটি বৈধ ওয়েবসাইট অ্যাড্রেস ইনপুট করতে পারেন। এটি ইনপুটের সময় ব্রাউজার ভ্যালিডেশন নিশ্চিত করে।

উদাহরণ:

<input type="url" name="website" placeholder="Enter your website URL">

ব্যবহার: ওয়েবসাইট লিঙ্ক ইনপুট করার জন্য, যেমন প্রোফাইল লিঙ্ক, রেফারেন্স লিঙ্ক, বা ওয়েবসাইট সাবমিশন ফর্মে।

HTML5 ইনপুট টাইপগুলোর ব্যবহারিক উদাহরণ

<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="age">Age:</label>
    <input type="number" id="age" name="age" min="0" max="120" required>
    
    <label for="volume">Volume:</label>
    <input type="range" id="volume" name="volume" min="0" max="100" value="50">
    
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday" required>
    
    <label for="meeting">Meeting Time:</label>
    <input type="time" id="meeting" name="meeting" required>
    
    <label for="website">Website:</label>
    <input type="url" id="website" name="website" placeholder="https://example.com" required>
    
    <button type="submit">Submit</button>
</form>

ব্যাখ্যা:

1. type="text": ইউজারের নাম ইনপুট করতে।
2. type="email": ইমেল অ্যাড্রেস ইনপুট করতে।
3. type="number": সংখ্যা ইনপুট করতে, যেখানে বয়সের জন্য ০ থেকে ১২০ পর্যন্ত সীমাবদ্ধ করা হয়েছে।
4. type="range": একটি রেঞ্জ স্লাইডার, যেখানে ভলিউম ০ থেকে ১০০ এর মধ্যে নিয়ন্ত্রণ করা যায়।
5. type="date": একটি ক্যালেন্ডার উইজেট থেকে জন্মতারিখ ইনপুট করতে।
6. type="time": মিটিং বা অ্যাপয়েন্টমেন্টের সময় ইনপুট করতে।
7. type="url": একটি ওয়েবসাইট URL ইনপুট করতে।

ওয়েব ফর্ম ডিজাইন এবং ডেভেলপমেন্টের ক্ষেত্রে HTML5 বিভিন্ন নতুন অ্যাট্রিবিউট প্রদান করেছে যা ফর্মের ব্যবহারযোগ্যতা এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সহায়তা করে। এই লেখায় আমরা চারটি গুরুত্বপূর্ণ HTML5 ফর্ম অ্যাট্রিবিউট—Placeholder, Required, Autofocus, এবং Autocomplete—সম্বন্ধে বিস্তারিত আলোচনা করব।

১. Placeholder

Placeholder অ্যাট্রিবিউটটি ইনপুট ফিল্ডে একটি হালকা গ্রে টেক্সট প্রদর্শন করে যা ব্যবহারকারীদের ফিল্ডে কী ধরনের তথ্য প্রবেশ করতে হবে তা নির্দেশ করে। এটি ব্যবহারকারীদের জন্য ফর্ম পূরণ প্রক্রিয়াকে সহজ করে তোলে।

উদাহরণ:

<form>
  <label for="email">ইমেইল:</label>
  <input type="email" id="email" name="email" placeholder="example@domain.com">
</form>

ব্যাখ্যা: উপরের উদাহরণে, ইমেইল ইনপুট ফিল্ডে "example@domain.com" টেক্সটটি প্রদর্শিত হবে যতক্ষণ না ব্যবহারকারী তার নিজের ইমেইল লিখতে শুরু করে।

২. Required

Required অ্যাট্রিবিউটটি নির্ধারণ করে যে একটি ইনপুট ফিল্ডে তথ্য প্রবেশ করা বাধ্যতামূলক। ফর্মটি জমা দেওয়ার আগে ব্যবহারকারীকে অবশ্যই এই ফিল্ডটি পূরণ করতে হবে।

উদাহরণ:

<form>
  <label for="username">ব্যবহারকারীর নাম:</label>
  <input type="text" id="username" name="username" required>
  
  <input type="submit" value="জমা দিন">
</form>

ব্যাখ্যা: উপরের উদাহরণে, "ব্যবহারকারীর নাম" ইনপুট ফিল্ডটি পূরণ না করলে ফর্মটি জমা দেওয়া যাবে না এবং ব্রাউজার ব্যবহারকারীকে একটি সতর্কীকরণ দেখাবে।

৩. Autofocus

Autofocus অ্যাট্রিবিউটটি পৃষ্ঠাটি লোড হওয়ার সাথে সাথে নির্দিষ্ট ইনপুট ফিল্ডটিকে স্বয়ংক্রিয়ভাবে ফোকাস করে। এটি ব্যবহারকারীদের দ্রুত ফর্ম পূরণ শুরু করতে সহায়তা করে।

উদাহরণ:

<form>
  <label for="search">অনুসন্ধান:</label>
  <input type="text" id="search" name="search" autofocus>
  
  <input type="submit" value="সার্চ করুন">
</form>

ব্যাখ্যা: উপরের উদাহরণে, পৃষ্ঠাটি লোড হওয়ার সাথে সাথে "অনুসন্ধান" ইনপুট ফিল্ডটি স্বয়ংক্রিয়ভাবে সক্রিয় হবে, যাতে ব্যবহারকারী দ্রুত টাইপ শুরু করতে পারে।

৪. Autocomplete

Autocomplete অ্যাট্রিবিউটটি ব্রাউজারকে পূর্বে পূরণ করা তথ্য স্মরণ করতে এবং পরবর্তীতে ফর্ম পূরণ করার সময় প্রস্তাবিত বিকল্পগুলি দেখাতে অনুমতি দেয়। এটি ব্যবহারকারীদের ফর্ম পূরণ করার সময় সময় বাঁচায় এবং অভিজ্ঞতা উন্নত করে।

উদাহরণ:

<form>
  <label for="fname">ফার্স্ট নেম:</label>
  <input type="text" id="fname" name="fname" autocomplete="given-name">
  
  <label for="lname">লাস্ট নেম:</label>
  <input type="text" id="lname" name="lname" autocomplete="family-name">
  
  <input type="submit" value="জমা দিন">
</form>

ব্যাখ্যা: উপরের উদাহরণে, ব্রাউজার ব্যবহারকারীর পূর্বের প্রবেশ করা "ফার্স্ট নেম" এবং "লাস্ট নেম" তথ্য স্মরণ করবে এবং পরবর্তীতে এই ফিল্ডগুলোতে প্রস্তাবিত বিকল্পগুলি দেখাবে।

HTML5 ফর্ম অ্যাট্রিবিউটসের সুবিধাসমূহ

1. ব্যবহারকারী অভিজ্ঞতা উন্নত: Placeholder এবং Autofocus ব্যবহারকারীদের ফর্ম পূরণ প্রক্রিয়াকে সহজ এবং দ্রুত করে তোলে।
2. ডাটা ভ্যালিডেশন: Required অ্যাট্রিবিউট নিশ্চিত করে যে প্রয়োজনীয় তথ্যগুলি ফর্মে পূরণ করা হয়েছে।
3. সময় সাশ্রয়: Autocomplete ব্যবহার করে ব্যবহারকারীরা দ্রুত তথ্য প্রবেশ করতে পারে, বিশেষত যদি তারা পূর্বে একই তথ্য ব্যবহার করে থাকে।
4. সেমান্টিক ফর্ম: এই অ্যাট্রিবিউটগুলি ফর্মের মান উন্নত করে এবং SEO (সার্চ ইঞ্জিন অপটিমাইজেশন) এ সহায়ক হয়।

HTML5 এর Placeholder, Required, Autofocus, এবং Autocomplete অ্যাট্রিবিউটগুলি ওয়েব ফর্মগুলিকে আরও কার্যকর, ব্যবহারকারী-বান্ধব এবং আধুনিক করে তোলে। এগুলির সঠিক ব্যবহার ফর্ম পূরণ প্রক্রিয়াকে সহজতর করে এবং ব্যবহারকারীর অভিজ্ঞতা বৃদ্ধি করে। ওয়েব ডেভেলপারদের জন্য এই অ্যাট্রিবিউটগুলি শেখা এবং কার্যকরভাবে ব্যবহার করা অত্যন্ত গুরুত্বপূর্ণ।

টিপস:

• প্র্যাকটিস করুন: বিভিন্ন ফর্ম তৈরি করে এই অ্যাট্রিবিউটগুলির ব্যবহার অনুশীলন করুন।
• ডকুমেন্টেশন রেফারেন্স: MDN Web Docs - HTML Form Attributes দেখুন আরও বিস্তারিত জানতে।
• রেসপনসিভ ডিজাইন: ফর্ম ডিজাইন করার সময় বিভিন্ন ডিভাইসে কেমন দেখাবে তা নিশ্চিত করতে মিডিয়া কোয়ারিজ ব্যবহার করুন।

ওয়েব ফর্মের সঠিক এবং নিরাপদ ডাটা সংগ্রহ করা ও ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য ফর্ম ভ্যালিডেশন অপরিহার্য। HTML5 ফর্ম ভ্যালিডেশন ডিফল্টভাবে বিভিন্ন ধরনের ভ্যালিডেশন প্রদান করে এবং ডেভেলপারদের কাস্টম এরর মেসেজ প্রদানের সুযোগ দেয়। এই লেখায় আমরা HTML5 এর ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজ কিভাবে তৈরি করতে হয় তা বিস্তারিতভাবে আলোচনা করব।

১. HTML5 ফর্ম ভ্যালিডেশন কী?

ফর্ম ভ্যালিডেশন হলো একটি প্রক্রিয়া যার মাধ্যমে ওয়েব ফর্মে প্রবেশ করা তথ্যের সঠিকতা এবং পূর্ণতা যাচাই করা হয়। HTML5 ফর্ম ভ্যালিডেশন ব্রাউজার-সাইডে ঘটে, যা ব্যবহারকারীদেরকে তাড়াতাড়ি ত্রুটি শনাক্ত করতে সাহায্য করে এবং সার্ভারে অতিরিক্ত লোড কমায়।

২. HTML5 এর বিল্ট-ইন ভ্যালিডেশন অ্যাট্রিবিউটসমূহ

HTML5 বিভিন্ন ভ্যালিডেশন অ্যাট্রিবিউট সরবরাহ করে যা ফর্ম ফিল্ডের ইনপুট যাচাই করতে ব্যবহৃত হয়:

1. required: ইনপুট ফিল্ড অবশ্যই পূরণ করতে হবে।

   <input type="text" name="username" required>
   

2. type: ইনপুটের ধরন নির্ধারণ করে (যেমন email, number, url, ইত্যাদি)।

   <input type="email" name="email" required>
   

3. minlength এবং maxlength: ইনপুটের ন্যূনতম এবং সর্বোচ্চ দৈর্ঘ্য নির্ধারণ করে।

   <input type="password" name="password" minlength="8" maxlength="16" required>
   

4. pattern: নির্দিষ্ট প্যাটার্ন অনুসারে ইনপুট যাচাই করে।

   <input type="text" name="zipcode" pattern="\d{5}" required>
   

5. min এবং max: নম্বর ইনপুটের জন্য ন্যূনতম এবং সর্বোচ্চ মান নির্ধারণ করে।

   <input type="number" name="age" min="18" max="99" required>
   

6. step: নম্বর ইনপুটের স্টেপ ভ্যালু নির্ধারণ করে।

   <input type="number" name="quantity" min="1" max="10" step="1" required>
   

৩. কাস্টম এরর মেসেজ তৈরি করা

HTML5 এর ডিফল্ট এরর মেসেজগুলি প্রাথমিকভাবে কার্যকর হলেও, কাস্টম এরর মেসেজ ব্যবহার করে ফর্মের ইউজার ইন্টারফেস আরও উন্নত করা যায়। কাস্টম এরর মেসেজ প্রদানের জন্য আমরা JavaScript ব্যবহার করতে পারি।

উদাহরণ:

ধরা যাক, আমাদের একটি ফর্ম আছে যেখানে ব্যবহারকারীকে একটি ইমেইল ঠিকানা প্রদান করতে হবে এবং আমরা কাস্টম এরর মেসেজ প্রদর্শন করতে চাই।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>ফর্ম ভ্যালিডেশন উদাহরণ</title>
    <style>
        .error {
            color: red;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <form id="myForm" novalidate>
        <label for="email">ইমেইল:</label>
        <input type="email" id="email" name="email" required>
        <span class="error" id="emailError"></span>
        <br><br>
        <input type="submit" value="জমা দিন">
    </form>

    <script>
        const form = document.getElementById('myForm');
        const email = document.getElementById('email');
        const emailError = document.getElementById('emailError');

        form.addEventListener('submit', function(event) {
            // ফর্ম জমা দেওয়ার ডিফল্ট আচরণ বন্ধ করা
            event.preventDefault();
            
            // এরর মেসেজ রিসেট করা
            emailError.textContent = '';

            // ইমেইল ফিল্ডের ভ্যালিডেশন
            if (!email.validity.valid) {
                if (email.validity.valueMissing) {
                    emailError.textContent = 'ইমেইল অবশ্যই পূরণ করতে হবে।';
                } else if (email.validity.typeMismatch) {
                    emailError.textContent = 'অনুগ্রহ করে একটি সঠিক ইমেইল ঠিকানা প্রদান করুন।';
                }
                // ফোকাস ইনপুট ফিল্ডে সেট করা
                email.focus();
            } else {
                // ফর্ম জমা দেওয়া
                alert('ফর্ম সফলভাবে জমা হয়েছে!');
                form.submit();
            }
        });
    </script>
</body>
</html>

ব্যাখ্যা:

1. novalidate অ্যাট্রিবিউট ব্যবহার করে ব্রাউজারের ডিফল্ট ভ্যালিডেশন বন্ধ করা হয়েছে যাতে কাস্টম ভ্যালিডেশন কার্যকর করা যায়।
2. ফর্ম জমা দেওয়ার সময় JavaScript ইভেন্ট লিসেনার ব্যবহার করে ইনপুট যাচাই করা হয়।
3. ভ্যালিডেশন ত্রুটি থাকলে কাস্টম এরর মেসেজ প্রদর্শন করা হয় এবং ফোকাস ইনপুট ফিল্ডে সেট করা হয়।
4. ভ্যালিড ইনপুট থাকলে ফর্ম সফলভাবে জমা হয়।

৪. আরও কাস্টম ভ্যালিডেশন উদাহরণ

পাসওয়ার্ড এবং কনফার্ম পাসওয়ার্ড ভ্যালিডেশন:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>পাসওয়ার্ড ভ্যালিডেশন</title>
    <style>
        .error {
            color: red;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <form id="passwordForm" novalidate>
        <label for="password">পাসওয়ার্ড:</label>
        <input type="password" id="password" name="password" minlength="8" required>
        <span class="error" id="passwordError"></span>
        <br><br>
        <label for="confirmPassword">পাসওয়ার্ড নিশ্চিত করুন:</label>
        <input type="password" id="confirmPassword" name="confirmPassword" required>
        <span class="error" id="confirmPasswordError"></span>
        <br><br>
        <input type="submit" value="জমা দিন">
    </form>

    <script>
        const passwordForm = document.getElementById('passwordForm');
        const password = document.getElementById('password');
        const confirmPassword = document.getElementById('confirmPassword');
        const passwordError = document.getElementById('passwordError');
        const confirmPasswordError = document.getElementById('confirmPasswordError');

        passwordForm.addEventListener('submit', function(event) {
            event.preventDefault();
            passwordError.textContent = '';
            confirmPasswordError.textContent = '';

            let valid = true;

            // পাসওয়ার্ড ভ্যালিডেশন
            if (!password.validity.valid) {
                if (password.validity.valueMissing) {
                    passwordError.textContent = 'পাসওয়ার্ড অবশ্যই পূরণ করতে হবে।';
                } else if (password.validity.tooShort) {
                    passwordError.textContent = `পাসওয়ার্ড কমপক্ষে ${password.minLength} অক্ষর হওয়া উচিত।`;
                }
                valid = false;
            }

            // কনফার্ম পাসওয়ার্ড ভ্যালিডেশন
            if (confirmPassword.value !== password.value) {
                confirmPasswordError.textContent = 'পাসওয়ার্ড মিলছে না।';
                valid = false;
            }

            if (valid) {
                alert('ফর্ম সফলভাবে জমা হয়েছে!');
                passwordForm.submit();
            }
        });
    </script>
</body>
</html>

ব্যাখ্যা:

1. ব্যবহারকারীর পাসওয়ার্ড এবং কনফার্ম পাসওয়ার্ড ফিল্ডের মান মিলছে কিনা তা যাচাই করা হয়েছে।
2. পাসওয়ার্ডের ন্যূনতম দৈর্ঘ্য নিশ্চিত করা হয়েছে।
3. ভ্যালিডেশন ত্রুটি থাকলে কাস্টম এরর মেসেজ প্রদর্শন করা হয়েছে।

৫. Validity API এর ব্যবহার

HTML5 এর Validity API ব্যবহার করে ইনপুট ফিল্ডের বিভিন্ন ভ্যালিডেশন স্টেট সম্পর্কে বিস্তারিত তথ্য পাওয়া যায়।

উদাহরণ:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Validity API উদাহরণ</title>
    <style>
        .error {
            color: red;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <form id="validityForm" novalidate>
        <label for="username">ব্যবহারকারীর নাম:</label>
        <input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
        <span class="error" id="usernameError"></span>
        <br><br>
        <input type="submit" value="জমা দিন">
    </form>

    <script>
        const validityForm = document.getElementById('validityForm');
        const username = document.getElementById('username');
        const usernameError = document.getElementById('usernameError');

        validityForm.addEventListener('submit', function(event) {
            event.preventDefault();
            usernameError.textContent = '';

            if (!username.validity.valid) {
                if (username.validity.valueMissing) {
                    usernameError.textContent = 'ব্যবহারকারীর নাম অবশ্যই পূরণ করতে হবে।';
                } else if (username.validity.patternMismatch) {
                    usernameError.textContent = 'ব্যবহারকারীর নাম কমপক্ষে ৩টি অক্ষর এবং শুধুমাত্র অক্ষর হতে হবে।';
                }
            } else {
                alert('ফর্ম সফলভাবে জমা হয়েছে!');
                validityForm.submit();
            }
        });
    </script>
</body>
</html>

ব্যাখ্যা:

1. pattern="[A-Za-z]{3,}" দ্বারা ব্যবহারকারীর নাম কমপক্ষে ৩টি অক্ষর এবং শুধুমাত্র অক্ষর হতে হবে বলে নির্ধারণ করা হয়েছে।
2. Validity API ব্যবহার করে ইনপুট ফিল্ডের ভ্যালিডেশন স্টেট যাচাই করা হয়েছে এবং উপযুক্ত এরর মেসেজ প্রদর্শন করা হয়েছে।

৬. বেস্ট প্র্যাকটিস

1. সঠিক ইনপুট টাইপ ব্যবহার করুন: যেমন email, url, number ইত্যাদি ব্যবহার করে ডাটা ভ্যালিডেশন সহজ করুন।
2. ব্যবহারকারী বান্ধব এরর মেসেজ প্রদান করুন: স্পষ্ট এবং বোধগম্য ভাষায় এরর মেসেজ লিখুন।
3. জাভাস্ক্রিপ্ট ব্যাকআপ ভ্যালিডেশন: যদিও HTML5 ভ্যালিডেশন কার্যকর, তবে জাভাস্ক্রিপ্ট ব্যবহার করে অতিরিক্ত ভ্যালিডেশন নিশ্চিত করুন।
4. অ্যাক্সেসিবিলিটি নিশ্চিত করুন: এরর মেসেজগুলি স্ক্রিন রিডার ব্যবহারকারীদের জন্যও উপলব্ধ করুন।
5. ফর্ম ডিজাইন: ফর্ম ফিল্ডগুলিকে সুসংহতভাবে সাজান এবং যথাযথ লেবেল ব্যবহার করুন।

HTML5 ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজ ব্যবহার করে ওয়েব ফর্মগুলিকে আরও শক্তিশালী, নিরাপদ এবং ব্যবহারকারী বান্ধব করা যায়। ডিফল্ট ভ্যালিডেশন অ্যাট্রিবিউটগুলি দ্রুত ও সহজ ভ্যালিডেশন প্রদান করে, যেখানে কাস্টম এরর মেসেজ ব্যবহার করে ফর্মের ইউজার ইন্টারফেস উন্নত করা যায়। ওয়েব ডেভেলপারদের জন্য এই টেকনিকগুলি শেখা এবং প্রয়োগ করা অত্যন্ত গুরুত্বপূর্ণ যাতে তারা ব্যবহারকারীদেরকে একটি ভালো ফর্ম পূরণ অভিজ্ঞতা প্রদান করতে পারেন।

টিপস:

• ডকুমেন্টেশন রেফারেন্স: MDN Web Docs - Constraint Validation আরও বিস্তারিত জানতে।
• প্র্যাকটিস করুন: বিভিন্ন ফর্ম তৈরি করে বিভিন্ন ভ্যালিডেশন অ্যাট্রিবিউট এবং কাস্টম এরর মেসেজ প্রয়োগ করুন।
• রেসপনসিভ ভ্যালিডেশন: বিভিন্ন ডিভাইসে ফর্ম কিভাবে কাজ করে তা নিশ্চিত করতে টেস্ট করুন।