Home-theater-designers
যোগাযোগের ফর্মগুলি ওয়েবসাইটগুলির একটি গুরুত্বপূর্ণ উপাদান, যা ব্যবহারকারীদের অনুসন্ধান, প্রতিক্রিয়া বা অনুরোধের সাথে আপনার কাছে পৌঁছানোর অনুমতি দেয়।
দিনের MUO ভিডিও কন্টেন্টের সাথে চালিয়ে যেতে স্ক্রোল করুন
এখানে আপনি আপনার ওয়েবসাইটের জন্য একটি মৌলিক যোগাযোগ ফর্ম তৈরি করার প্রক্রিয়া শিখবেন। প্রজেক্ট সেট আপ করা থেকে শুরু করে ফর্মের বৈধতা এবং স্টাইলিং যোগ করা, শেষ পর্যন্ত আপনার কাছে একটি কার্যকরী এবং আনন্দদায়ক যোগাযোগ ফর্ম রয়েছে তা নিশ্চিত করা।
প্রজেক্ট সেট আপ করা হচ্ছে
আপনি কোডিং শুরু করার আগে, আপনার উন্নয়ন পরিবেশ সেট আপ করা হয়েছে তা নিশ্চিত করুন। আপনার পছন্দের পাঠ্য সম্পাদক খুলুন বা প্রস্তাবিত সমন্বিত উন্নয়ন পরিবেশের একটি (IDEs) পছন্দ ভিজ্যুয়াল স্টুডিও কোড বা সাবলাইম টেক্সট .
আপনার HTML এবং CSS ফাইলগুলিকে সংগঠিত রাখতে একটি প্রকল্প ফোল্ডার তৈরি করুন৷
এই ফোল্ডারের মধ্যে, HTML এর জন্য আলাদা ফাইল তৈরি করুন ( index.html ) এবং CSS ( style.css ) অবশেষে, আপনার HTML নথিতে আপনার CSS ফাইল লিঙ্ক করুন <মাথা> বিভাগটি ব্যবহার করে <লিঙ্ক> ট্যাগ
HTML স্ট্রাকচার তৈরি করা
যেকোন যোগাযোগ ফর্মের ভিত্তি হল এর HTML গঠন। আপনার যোগাযোগ ফর্মের জন্য আপনি কীভাবে প্রয়োজনীয় HTML উপাদান তৈরি করতে পারেন তা এখানে।
<main>
<h1>Welcome to my Form</h1>
<form id="form">
<div class="input__container">
<label for="name">Name</label>
<!-- The 'required' prop ensures a filled field before submission -->
<input type="text" id="name" name="name" required />
</div>
<div class="input__container">
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
</div>
<div class="input__container">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<button>Submit</button>
</form>
</main>
উপরের এইচটিএমএল কোডটি একটি ফর্ম উপাদান তৈরি করে এবং পরিচিতি ফর্মের জন্য ব্যবহারকারীর ইনপুটগুলি গ্রহণ করার জন্য একাধিক ইনপুট ক্ষেত্র তৈরি করে৷
এই মুহুর্তে, আপনার যোগাযোগের ফর্মটি এইরকম দেখাচ্ছে:
কিভাবে বায়োস থেকে উইন্ডোজ 10 পুনরায় ইনস্টল করবেন
যোগাযোগ ফর্ম স্টাইলিং
একটি আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব যোগাযোগ ফর্ম সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা বাড়ায়। নিচের সিএসএস কোডটি ফ্লেক্সবক্স এবং সিএসএস বক্স মডেলের বৈশিষ্ট্যগুলি ব্যবহার করে যেমন প্যাডিং এবং মার্জিন একটি ভাল উপস্থিতির জন্য পরিচিতি ফর্মটিকে স্টাইল করতে।
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: "Mulish", sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 40rem;
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
margin: 0 auto;
height: 45rem;
border-radius: 2rem;
padding: 2rem;
}
h1 {
text-align: center;
font-size: 3rem;
padding: 1rem 2rem;
}
form {
margin: 3rem 0;
display: flex;
flex-direction: column;
row-gap: 2rem;
}
.input__container {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.input__container label { font-size: 1.6rem; }
.input__container input,
textarea {
padding: 1rem 2rem;
border-radius: 5px;
border: 1px solid #555;
resize: none;
}
button {
align-self: flex-start;
padding: 1rem 2rem;
border-radius: 5px;
border: none;
background: #333;
color: #fff;
cursor: pointer;
}
আপনার যোগাযোগ ফর্ম এখন এই মত দেখায়:
ফর্ম বৈধতা বাস্তবায়ন
ব্যবহারকারী-প্রদত্ত তথ্যের যথার্থতা এবং সম্পূর্ণতা নিশ্চিত করা সবচেয়ে গুরুত্বপূর্ণ। একটি কার্যকর পদ্ধতি জড়িত ক্লায়েন্ট-সাইড ফর্ম বৈধতার জন্য জাভাস্ক্রিপ্ট ব্যবহার করে . শুরু করতে, আপনার HTML ফাইলের শেষে একটি স্ক্রিপ্ট ট্যাগ তৈরি করুন এবং ফর্ম উপাদানটিকে লক্ষ্য করুন৷
<script>
"use strict";
const form = document.getElementById("form");
</script>
তারপর ব্যবহারকারীর দ্বারা জমা দেওয়ার জন্য ফর্মের সাথে একটি ইভেন্ট শ্রোতা সংযুক্ত করুন।
form.addEventListener("submit", function (event) { });
এর পরে, ফর্মগুলির দ্বারা ডিফল্ট পৃষ্ঠা পুনঃলোড ক্রিয়া প্রতিরোধ করুন এবং ইমেল ক্ষেত্রের মান নির্বাচন করুন৷
form.addEventListener("submit", function (event) {
// Prevent page reload on submit
event.preventDefault();
// Selecting the email value filled by the user
const email = document.getElementById("email").value;
});
অবশেষে, বৈধতার জন্য ব্যবহারকারীর ইমেল পরীক্ষা করতে নিয়মিত এক্সপ্রেশন ব্যবহার করুন এবং ইমেলের মান অনুযায়ী একটি বার্তা দেখান।
form.addEventListener("submit", function (event) {
// Preventing page reload on submit
event.preventDefault();
// Selecting the email value filled by the user
const email = document.getElementById("email").value;
// Checking for valid email using a simple regex pattern
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert("Wrong email format");
return;
}
// If everything passes, show success message
alert("Form submitted successfully");
});
এই পদক্ষেপটি সাধারণ ত্রুটিগুলি প্রতিরোধ করতে এবং ব্যবহারকারীকে শুধুমাত্র বৈধ ডেটা জমা দেওয়ার বিষয়টি নিশ্চিত করতে সহায়তা করবে৷
ফায়ারফক্স কি ক্রোমের চেয়ে কম র্যাম ব্যবহার করে?
চূড়ান্ত যোগাযোগ ফর্মের পরীক্ষা এবং সমস্যা সমাধান
পুঙ্খানুপুঙ্খ পরীক্ষা ছাড়া কোনো প্রকল্প সম্পূর্ণ হয় না। আপনার ফর্ম সঠিকভাবে কাজ করে তা নিশ্চিত করার জন্য, প্রয়োজনীয় মানগুলি ইনপুট করুন, ফর্মটি জমা দিন এবং যাচাই করুন যে এটি উদ্দিষ্ট ফলাফল তৈরি করে।
আপনার যোগাযোগ ফর্ম কাস্টমাইজ করুন
আপনি আপনার ওয়েবসাইটের জন্য একটি মৌলিক যোগাযোগ ফর্ম তৈরি করেছেন৷ আপনি প্রজেক্ট সেটআপ, এইচটিএমএল স্ট্রাকচার, সিএসএস স্টাইলিং, জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন এবং পুঙ্খানুপুঙ্খ পরীক্ষায় দক্ষতা অর্জন করেছেন।
একটি ভালভাবে তৈরি যোগাযোগ ফর্ম ব্যবহারকারীর মিথস্ক্রিয়াকে উন্নত করে, যা দর্শকদের আপনার সাথে সংযোগ করা সহজ করে তোলে। আপনার নির্দিষ্ট চাহিদা মেটাতে এর কার্যকারিতা কাস্টমাইজ এবং প্রসারিত করতে নির্দ্বিধায়।