AMP Form Component (amp-form) হলো AMP এর একটি বিশেষ কম্পোনেন্ট যা ব্যবহারকারীদের দ্বারা পূর্ণ করা ফর্মের ডেটা প্রসেস করতে ব্যবহৃত হয়। এটি ব্যবহারকারীর ইনপুট গ্রহণ করে এবং ফর্ম সাবমিশনের জন্য অ্যাসিনক্রোনাস রিকোয়েস্ট প্রেরণ করতে সহায়তা করে, যেন পেজের রেন্ডারিং ব্লক না হয় এবং দ্রুত লোডিং নিশ্চিত হয়।
AMP Form Component এর ব্যবহার
AMP ফর্ম কম্পোনেন্টটি ব্যবহার করে ফর্ম তৈরি করার জন্য কিছু নির্দিষ্ট নিয়ম এবং কনফিগারেশন রয়েছে। এই কম্পোনেন্টটি সাধারণ HTML ফর্মের মতোই কাজ করে, তবে এতে কিছু সীমাবদ্ধতা এবং উপাদান রয়েছে যা বিশেষভাবে AMP প্ল্যাটফর্মের জন্য তৈরি।
AMP Form Component এর মূল উপাদান:
- ফর্মের সংজ্ঞা:
- AMP ফর্মের জন্য
<form>ট্যাগেamp-formঅ্যাট্রিবিউট যোগ করতে হবে।
- AMP ফর্মের জন্য
- ডেটা সাবমিশন:
- ফর্ম সাবমিশনের জন্য,
action-xhrঅ্যাট্রিবিউট ব্যবহার করা হয়, যা অ্যাসিনক্রোনাস HTTP রিকোয়েস্ট প্রেরণ করে ফর্মের ডেটা সার্ভারে পাঠাতে সহায়তা করে। এটি সাধারণ POST বা GET রিকোয়েস্ট প্রেরণ করতে ব্যবহৃত হয়।
- ফর্ম সাবমিশনের জন্য,
- response:
- ফর্মের সাবমিশনের পর সার্ভার থেকে প্রাপ্ত রেসপন্সের ভিত্তিতে পেজের কিছু অংশ আপডেট করা যায়। এর জন্য
targetএবংsubmit-success/submit-errorঅ্যাট্রিবিউট ব্যবহার করা হয়।
- ফর্মের সাবমিশনের পর সার্ভার থেকে প্রাপ্ত রেসপন্সের ভিত্তিতে পেজের কিছু অংশ আপডেট করা যায়। এর জন্য
AMP Form Example:
এখানে একটি সাধারণ AMP ফর্মের উদাহরণ দেয়া হলো:
<!DOCTYPE html>
<html amp>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AMP Form Example</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<style amp-custom>
body {
font-family: Arial, sans-serif;
}
h1 {
color: #4CAF50;
}
.form-container {
max-width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Submit Your Information</h1>
<div class="form-container">
<form method="POST" action-xhr="/submit-form" target="_blank">
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
<label for="email">Email</label>
<input type="email" name="email" id="email" required>
<button type="submit">Submit</button>
</form>
<!-- Success message -->
<div submit-success>
<template type="amp-mustache">
<p>Thank you for your submission, {{name}}! We will get back to you soon.</p>
</template>
</div>
<!-- Error message -->
<div submit-error>
<template type="amp-mustache">
<p>Sorry, something went wrong. Please try again.</p>
</template>
</div>
</div>
</body>
</html>এই AMP ফর্মের প্রধান উপাদান:
<form>ট্যাগেরaction-xhrঅ্যাট্রিবিউট:action-xhrঅ্যাট্রিবিউটটি ফর্মের ডেটা প্রেরণের জন্য ব্যবহৃত হয়। এই অ্যাট্রিবিউটটি সাধারণত সার্ভারে রিকোয়েস্ট পাঠায়, এবং অ্যাসিনক্রোনাস ভাবে সার্ভার থেকে রেসপন্স নেয়।method="POST": এখানে POST পদ্ধতিতে ডেটা প্রেরণ করা হচ্ছে।target="_blank": সাবমিশন শেষে সার্ভারের রেসপন্স নতুন উইন্ডোতে প্রদর্শন হবে।
submit-successএবংsubmit-error:submit-successএবংsubmit-errorব্লক ফর্ম সাবমিশনের পর সার্ভার থেকে রেসপন্স অনুযায়ী সফল বা ব্যর্থ সাবমিশন মেসেজ দেখায়।- এই ব্লকগুলিতে AMP Mustache টেমপ্লেট ব্যবহার করা হয়, যা রেসপন্সের ডেটা ডাইনামিকভাবে টেমপ্লেটের মধ্যে প্রবাহিত করে।
amp-formস্ক্রিপ্ট:<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>: AMP ফর্ম ব্যবহারের জন্য এই স্ক্রিপ্টটি লোড করতে হয়। এটি AMP ফর্মের কার্যকারিতা নিশ্চিত করে।
AMP ফর্ম কম্পোনেন্টের সুবিধা:
- অ্যাসিনক্রোনাস সাবমিশন: ফর্মের ডেটা পাঠানো হয় অ্যাসিনক্রোনাস ভাবে, অর্থাৎ পেজটি রিফ্রেশ না হয়ে ডেটা সার্ভারে পাঠানো হয়।
- সার্ভার রেসপন্সের উপর ভিত্তি করে কাস্টম মেসেজ: সাবমিশন সফল হলে কাস্টম সফল বা ত্রুটি মেসেজ দেখানো সম্ভব।
- ব্যবহারকারী অভিজ্ঞতা উন্নত: দ্রুত লোড হওয়া এবং ইন্টারঅ্যাকটিভ ফর্ম সবার জন্য ভালো অভিজ্ঞতা প্রদান করে।
AMP ফর্মের কিছু সীমাবদ্ধতা:
- JavaScript সীমাবদ্ধতা: AMP ফর্মে কাস্টম JavaScript ব্যবহার করা যায় না, তাই ফর্ম সাবমিশনের জন্য শুধুমাত্র
action-xhrব্যবহৃত হয়। - ডেটা প্রক্রিয়াকরণ: সার্ভারে ডেটা প্রক্রিয়াকরণ খুবই গুরুত্বপূর্ণ, কারণ ফর্মের ডেটা সার্ভার থেকে ব্যাকএন্ড সিস্টেমে পাঠানো হয়।
এভাবে AMP ফর্ম কম্পোনেন্ট ব্যবহার করে আপনি ওয়েবসাইটে সহজ এবং দ্রুত সাবমিশন ফর্ম তৈরি করতে পারেন যা মোবাইল ডিভাইসে দ্রুত লোড হয়।
Content added By
Read more
