HTML Form Validation (required, minlength, maxlength ও pattern) ব্যবহারের নিয়ম
আমরা ফর্ম তৈরি করতে শিখেছি এবং ইনপুট টাইপগুলো নিয়েও জেনেছি। কিন্তু ফর্ম তখনই কার্যকর হয়, যখন তা ইউজারের ভুল ইনপুট ঠেকাতে পারে।এজন্য আমরা ব্যবহার করি HTML Form Validation। ভ্যালিডেশন দিয়ে আমরা নির্ধারণ করতে পারি কোন ফিল্ড বাধ্যতামূলক, কত অক্ষর ইনপুট লাগবে, এবং কী ধরনের ইনপুট গ্রহণযোগ্য।
আজকে আমরা শিখবো:required, minlength, maxlength এবং pattern অ্যাট্রিবিউট কীভাবে ব্যবহার করতে হয়।💻 HTML কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation Example</title>
</head>
<body>
<h2>Signup Form</h2>
<form action="submit.php" method="post">
<!-- Required field -->
Username: <input type="text" name="username" required><br><br>
<!-- Minimum & Maximum length -->
Password: <input type="password" name="password" minlength="6" maxlength="12" required><br><br>
<!-- Pattern validation -->
Phone (10 digits): <input type="text" name="phone" pattern="[0-9]{10}" required><br><br>
<!-- Submit button -->
<input type="submit" value="Signup">
</form>
</body>
</html>
📘 প্রতিটি লাইনের ব্যাখ্যা:
🔹 required
👉 “যখন আমরা required অ্যাট্রিবিউট ব্যবহার করি, তখন সেই ইনপুট ফিল্ড ফাঁকা রেখে ফর্ম সাবমিট করা যায় না।”
📝 ইউজার যদি ইউজারনেম না দেয়, ফর্ম সাবমিট হবে না।
🔹 minlength এবং maxlength
👉 “minlength দিয়ে আমরা বলে দেই সর্বনিম্ন কত অক্ষর ইনপুট হতে হবে। আর maxlength দিয়ে সর্বোচ্চ সীমা নির্ধারণ করি।”
📝 এখানে ইউজারকে ৬ থেকে ১২ অক্ষরের মধ্যে একটি পাসওয়ার্ড দিতে হবে।
🔹 pattern
👉 “pattern অ্যাট্রিবিউট দিয়ে আমরা Regular Expression ব্যবহার করে ইনপুটের ফরম্যাট ঠিক করে দিতে পারি।”
📝 এখানে শুধুমাত্র ১০টি সংখ্যার মোবাইল নাম্বার গ্রহণযোগ্য। যদি ইউজার ৯ বা ১১ সংখ্যার কিছু দেয়, সেটা গ্রহণযোগ্য হবে না।
🔹 type="submit"
👉 “সবশেষে, submit বাটনে ক্লিক করলে ব্রাউজার আগে চেক করবে ইনপুটগুলো সঠিক কিনা। যদি ভুল থাকে, তখন সাবমিট করবে না।”
🗣️
“আজ আমরা শিখলাম কীভাবে HTML দিয়ে ফর্ম ইনপুটের সঠিকতা নিশ্চিত করা যায়।
এই required, minlength, maxlength, এবং pattern অ্যাট্রিবিউট ব্যবহার করে ইউজারের ভুল ইনপুট আটকানো যায় খুব সহজেই।
Topic Covered: validation in html, html form validation, html label for, HTML ফর্ম ভ্যালিডেশন
