Polymer ফ্রেমওয়ার্কে Form তৈরি করা অত্যন্ত সহজ এবং কার্যকর। Polymer আপনাকে কাস্টম HTML উপাদান তৈরি করতে এবং তাদের সাথে ফর্মের বিভিন্ন উপাদান যুক্ত করতে সক্ষম করে। Polymer এর মাধ্যমে ফর্ম তৈরি করার জন্য, সাধারণত HTML ফর্ম উপাদান (যেমন <input>, <select>, <textarea>, ইত্যাদি) ব্যবহার করা হয়, এবং আপনি এই উপাদানগুলিকে কাস্টম ফর্ম উপাদান হিসেবে তৈরি করতে পারেন।
এখানে Polymer ব্যবহার করে একটি সাধারণ ফর্ম তৈরি করার উদাহরণ দেওয়া হলো, যা ব্যবহারকারীর ইনপুট গ্রহণ করে এবং সেই ডেটা প্রক্রিয়া করে।
Polymer Framework এ Form তৈরি করা:
১. ফর্মের জন্য কাস্টম কম্পোনেন্ট তৈরি করা:
<dom-module id="custom-form">
<template>
<style>
:host {
display: block;
padding: 20px;
max-width: 400px;
margin: auto;
border: 1px solid #ccc;
border-radius: 5px;
}
input, textarea, select {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
</style>
<h2>Contact Form</h2>
<form on-submit="submitForm">
<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" required></textarea>
<button type="submit">Submit</button>
</form>
<div id="form-message" hidden>
<p>Your message has been sent successfully!</p>
</div>
</template>
<script>
class CustomForm extends Polymer.Element {
static get is() {
return 'custom-form';
}
submitForm(event) {
event.preventDefault(); // Prevent form from submitting normally
const formData = new FormData(event.target);
const formObject = {};
formData.forEach((value, key) => {
formObject[key] = value;
});
console.log('Form Data:', formObject);
// Display success message
this.shadowRoot.querySelector('#form-message').hidden = false;
// You can add AJAX calls here to submit the form data to a server if needed
}
}
customElements.define(CustomForm.is, CustomForm);
</script>
</dom-module>
ব্যাখ্যা:
- Form Structure:
- এখানে একটি সাধারন ফর্ম তৈরি করা হয়েছে যার মধ্যে তিনটি ফিল্ড রয়েছে:
Name,Email, এবংMessage। - প্রতিটি ইনপুট ফিল্ডের জন্য
requiredঅ্যাট্রিবিউট দেওয়া হয়েছে, যাতে ফর্মটি জমা দেওয়ার আগে এই ফিল্ডগুলো পূর্ণ করতে হবে।
- এখানে একটি সাধারন ফর্ম তৈরি করা হয়েছে যার মধ্যে তিনটি ফিল্ড রয়েছে:
- CSS Styling:
- কিছু বেসিক CSS স্টাইলিং যোগ করা হয়েছে, যা ইনপুট ফিল্ডগুলো এবং বাটনকে সুন্দরভাবে সাজায়।
- Form Submission:
submitFormমেথডটি ফর্ম জমা দেওয়ার জন্য ব্যবহৃত হয়। এটি ফর্মটি সাধারণভাবে জমা দেওয়া থেকে বিরত রাখে (event.preventDefault()) এবং ফর্মের সব ইনপুট ডেটা সংগ্রহ করে।FormDataঅবজেক্ট ব্যবহার করে ফর্মের সমস্ত ডেটা একটি অবজেক্টে পরিণত করা হয়। এরপর, কনসোলে সেই ডেটা লগ করা হয় (এটি আপনার সার্ভারে পাঠানোর জন্য ব্যবহার করা যেতে পারে)।- ফর্ম জমা দেওয়ার পর, একটি সফল বার্তা দেখানোর জন্য
#form-messageএলিমেন্টটি প্রদর্শিত হয়।
- Custom Element:
CustomFormনামে একটি কাস্টম Polymer উপাদান তৈরি করা হয়েছে, যা<custom-form>ট্যাগ ব্যবহার করে HTML ডকুমেন্টে ব্যবহার করা যাবে।
ফর্মের HTML ব্যবহার:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polymer Form Example</title>
<script src="https://unpkg.com/@polymer/polymer@3.0.0/polymer-element.js"></script>
</head>
<body>
<!-- Using the Custom Form Component -->
<custom-form></custom-form>
</body>
</html>
এই HTML ডকুমেন্টে <custom-form></custom-form> ব্যবহার করে, আপনি Polymer কম্পোনেন্টটিকে ওয়েব পেজে সন্নিবেশিত করতে পারেন।
AJAX দিয়ে ফর্ম ডেটা সাবমিট করা:
আপনি যদি Polymer ফ্রেমওয়ার্কের মাধ্যমে ফর্মের ডেটা সার্ভারে পাঠাতে চান, তবে AJAX কল ব্যবহার করতে পারেন। এই উদাহরণে আমরা fetch() API ব্যবহার করে ফর্ম ডেটা পাঠানোর প্রক্রিয়া দেখাচ্ছি।
submitForm(event) {
event.preventDefault(); // Prevent form from submitting normally
const formData = new FormData(event.target);
const formObject = {};
formData.forEach((value, key) => {
formObject[key] = value;
});
console.log('Form Data:', formObject);
// Example AJAX request to submit the form data
fetch('https://your-server.com/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formObject)
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
this.shadowRoot.querySelector('#form-message').hidden = false;
})
.catch((error) => {
console.error('Error:', error);
});
}
ব্যাখ্যা:
- ফর্ম ডেটা
fetch()API দিয়ে সার্ভারে পাঠানো হচ্ছে, যেখানেPOSTপদ্ধতি ব্যবহার করা হচ্ছে এবং ডেটাJSON.stringify()এর মাধ্যমে সার্ভারে পাঠানো হচ্ছে। - সফলভাবে ডেটা সাবমিট হলে, ব্যবহারকারীকে একটি সফল বার্তা দেখানো হবে।
Polymer ফ্রেমওয়ার্ক ব্যবহার করে আপনি খুব সহজেই কাস্টম ফর্ম উপাদান তৈরি করতে পারেন। Polymer এর FormData API এবং fetch() ব্যবহার করে আপনি ফর্ম ডেটা গ্রহণ এবং AJAX কলের মাধ্যমে সার্ভারে পাঠাতে পারেন। এটি আপনাকে একটি সম্পূর্ণ কাস্টম, ডাইনামিক, এবং ইন্টারঅ্যাকটিভ ফর্ম তৈরি করতে সাহায্য করবে যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করবে।
Read more
