XHTML ডকুমেন্টে ফর্ম (form) তৈরি করা এবং তার মাধ্যমে তথ্য সংগ্রহ করার প্রক্রিয়াটি গুরুত্বপূর্ণ। ফর্ম ভ্যালিডেশন এবং সাবমিশন হল এমন দুটি গুরুত্বপূর্ণ পদক্ষেপ যা নিশ্চিত করে যে ব্যবহারকারী সঠিক তথ্য প্রবাহিত করছে এবং সেগুলি সঠিকভাবে প্রক্রিয়া হচ্ছে। ফর্ম ভ্যালিডেশন ব্যবহারকারীর ইনপুট যাচাই করতে সাহায্য করে, এবং সাবমিশন প্রক্রিয়া ডেটা সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়।
এই অংশে আমরা আলোচনা করবো ফর্ম ভ্যালিডেশন এবং সাবমিশন নিয়ে, কীভাবে XHTML ডকুমেন্টে সেগুলো বাস্তবায়ন করতে হয়, এবং কীভাবে JavaScript দিয়ে ফর্ম ভ্যালিডেশন করা যায়।
১. ফর্ম (form) কী?
ফর্ম হল একটি HTML বা XHTML উপাদান যা ব্যবহারকারীর ইনপুট গ্রহণ করে। এটি সাধারণত form ট্যাগের মধ্যে থাকে এবং একটি বা একাধিক ইনপুট ফিল্ড (যেমন টেক্সট বক্স, রেডিও বাটন, চেকবক্স) ধারণ করে।
উদাহরণ:
<form action="submit_form.php" 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 />
<input type="submit" value="Submit" />
</form>
এই ফর্মটি ব্যবহারকারীর নাম এবং ইমেইল সংগ্রহ করবে এবং সেই তথ্য submit_form.php ফাইলে পোস্ট (post) করে পাঠাবে।
২. ফর্ম ভ্যালিডেশন
২.1 ফর্ম ভ্যালিডেশন কী?
ফর্ম ভ্যালিডেশন হল একটি প্রক্রিয়া যার মাধ্যমে নিশ্চিত করা হয় যে ব্যবহারকারী সঠিকভাবে ডেটা পূর্ণ করেছে। ফর্ম ভ্যালিডেশন করতে সাধারণত JavaScript ব্যবহার করা হয় যাতে ডেটার সঠিকতা এবং পূর্ণতা যাচাই করা যায়, যেমন ইমেইল ঠিকানা সঠিক ফরম্যাটে আছে কিনা, ফিল্ডগুলি খালি না থাকে ইত্যাদি।
২.2 HTML5 এবং XHTML ফর্ম ভ্যালিডেশন
HTML5 এবং XHTML ফর্মে বিল্ট-ইন ভ্যালিডেশন ফিচার রয়েছে। উদাহরণস্বরূপ:
required: এটি নিশ্চিত করে যে একটি ফিল্ড খালি থাকে না।type: বিভিন্ন ইনপুট টাইপের জন্য ভ্যালিডেশন সরবরাহ করে (যেমনemail,number,url)।pattern: এটি একটি নিয়ম (regular expression) ব্যবহার করে ইনপুটের প্যাটার্ন যাচাই করে।
উদাহরণ: বিল্ট-ইন ভ্যালিডেশন
<form action="submit_form.php" 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="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="\d{10}" title="Phone number must be 10 digits" required />
<input type="submit" value="Submit" />
</form>
এই ফর্মে:
required: নিশ্চিত করে যে ব্যবহারকারী একটি নাম এবং ইমেইল প্রদান করেছে।type="email": ইমেইল ফিল্ডে সঠিক ইমেইল ফরম্যাটের জন্য ভ্যালিডেশন করবে।pattern="\d{10}": ফোন নম্বরের ক্ষেত্রে এটি শুধুমাত্র ১০টি ডিজিট অনুমোদন করে।
৩. JavaScript দিয়ে ফর্ম ভ্যালিডেশন
৩.1 কাস্টম ভ্যালিডেশন
যদিও HTML5 এবং XHTML স্বয়ংক্রিয় ভ্যালিডেশন সাপোর্ট করে, তবুও আপনি চাইলে JavaScript ব্যবহার করে কাস্টম ভ্যালিডেশন যোগ করতে পারেন। JavaScript দিয়ে আপনি আরও জটিল ভ্যালিডেশন কনফিগার করতে পারবেন।
উদাহরণ: JavaScript দিয়ে ফর্ম ভ্যালিডেশন
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Form Validation Example</title>
<script type="text/javascript">
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
if (name == "") {
alert("Name must be filled out");
return false;
}
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!email.match(emailPattern)) {
alert("Please enter a valid email address");
return false;
}
var phonePattern = /^\d{10}$/;
if (!phone.match(phonePattern)) {
alert("Phone number must be 10 digits");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="submit_form.php" method="post" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
এখানে:
validateForm()JavaScript ফাংশনটি ফর্ম সাবমিট হওয়ার আগে ইনপুট ভ্যালিডেশন চেক করবে।- ইমেইল এবং ফোন নম্বরের প্যাটার্ন যাচাই করা হয়েছে।
- যদি কোনো ইনপুট সঠিক না থাকে, তাহলে ব্যবহারকারীকে একটি সতর্কবার্তা দেখানো হবে এবং ফর্মটি সাবমিট হবে না।
৪. ফর্ম সাবমিশন
ফর্ম সাবমিশন হল ফর্মের ইনপুট ডেটা সার্ভারে পাঠানোর প্রক্রিয়া। এটি সাধারণত action এবং method অ্যাট্রিবিউটের মাধ্যমে কনফিগার করা হয়।
৪.1 Action এবং Method অ্যাট্রিবিউট
- action: এই অ্যাট্রিবিউটটি নির্দেশ করে যে ফর্মটি কোথায় সাবমিট হবে (যেমন, সার্ভার-সাইড স্ক্রিপ্ট বা URL)।
- method: এটি ফর্মের ডেটা সাবমিট করার জন্য HTTP পদ্ধতি নির্ধারণ করে। সাধারণত দুটি পদ্ধতি ব্যবহৃত হয়:
GET: ফর্মের ডেটা URL-এ যোগ করা হয় (এটি নিরাপদ নয়, কারণ ডেটা URL-এ দেখা যায়)।POST: ফর্মের ডেটা HTTP রিকোয়েস্ট বডিতে পাঠানো হয়, যা নিরাপদ এবং বেশি পরিমাণে ডেটা পাঠানো যায়।
উদাহরণ:
<form action="submit_form.php" 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 />
<input type="submit" value="Submit" />
</form>
এই ফর্মটি ব্যবহারকারীর ডেটা submit_form.php ফাইলে POST পদ্ধতিতে পাঠাবে।
ফর্ম ভ্যালিডেশন এবং সাবমিশন ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ। XHTML ডকুমেন্টে ফর্ম ভ্যালিডেশন ব্যবহার করে আপনি নিশ্চিত করতে পারেন যে ব্যবহারকারী সঠিক ডেটা ইনপুট করছে এবং সেই ডেটা সঠিকভাবে সার্ভারে সাবমিট হচ্ছে। HTML5-এর বিল্ট-ইন ভ্যালিডেশন ফিচার এবং JavaScript-এর কাস্টম ভ্যালিডেশন আপনার ওয়েব ফর্মগুলোর কার্যকারিতা বাড়াতে সাহায্য করবে।
Read more
