HTML কোড দিয়ে কিভাবে আপনি সাইন আপ স্ক্রিন ডিজাইন করতে পারবেন

সাইন আপ পেজটি অনেক গুরুত্বপূর্ণ, কারণ এটি ব্যবহারকারীদের প্রথম ধাপে সাইটের সঙ্গে সংযোগ স্থাপন করতে সাহায্য করে। সুতরাং, এটি পরিষ্কার, ব্যবহারযোগ্য এবং আকর্ষণীয় হওয়া প্রয়োজন। এই পোস্টে আমরা HTML, CSS, এবং JavaScript ব্যবহার করে একটি সাইন আপ পেজ ডিজাইন করব।

ধাপ ১: HTML স্ট্রাকচার তৈরি করা

আমরা প্রথমে সাইন আপ ফর্মের জন্য HTML স্ট্রাকচার তৈরি করবো। এই ফর্মে তিনটি ইনপুট ফিল্ড থাকবে—ইউজারনেম, ইমেল, পাসওয়ার্ড, এবং একটি সাবমিট বাটন।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>সাইন আপ পেজ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="signup-container">
        <h2>সাইন আপ করুন</h2>
        <form action="#" method="POST" id="signup-form">
            <div class="input-group">
                <label for="username">ইউজারনেম</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="email">ইমেল</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="input-group">
                <label for="password">পাসওয়ার্ড</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit" class="signup-btn">সাইন আপ</button>
        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>

এখানে, <form> ট্যাগের ভিতরে তিনটি ইনপুট ফিল্ড রয়েছে—ইউজারনেম, ইমেল, এবং পাসওয়ার্ড। একটি সাবমিট বাটন যুক্ত করা হয়েছে, যা সাইন আপ ফর্ম সাবমিট করবে।

ধাপ ২: CSS দিয়ে ডিজাইন তৈরি করা

এখন আমরা CSS দিয়ে সাইন আপ পেজটি সুন্দরভাবে ডিজাইন করবো। এটি আমাদের পেজটিকে আরো আধুনিক এবং পরিষ্কার দেখাবে। নিচে কোডটি দেওয়া হলো:

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.signup-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

h2 {
    margin-bottom: 20px;
    color: #333;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #666;
}

.input-group input {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
}

.input-group input:focus {
    border-color: #4CAF50;
    outline: none;
}

.signup-btn {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.signup-btn:hover {
    background-color: #45a049;
}

এখানে, আমরা:

বডি এবং কনটেইনার ডিজাইন: পেজটির ব্যাকগ্রাউন্ড এবং কনটেইনারকে সেন্টারে রেখেছি, যাতে এটি দেখতে আরও আকর্ষণীয় হয়।
ইনপুট ফিল্ড ডিজাইন: ইনপুট ফিল্ডগুলির জন্য বর্ডার, padding, এবং focus স্টাইলিং যোগ করেছি।
বাটন ডিজাইন: সাইন আপ বাটনটি সবুজ রঙে সাজিয়েছি এবং হোভার এফেক্ট দিয়েছি যাতে এটি ইন্টারঅ্যাকটিভ দেখায়।

ধাপ ৩: JavaScript দিয়ে ফর্ম ভ্যালিডেশন

এখন আমরা JavaScript দিয়ে সাইন আপ ফর্মের ভ্যালিডেশন যোগ করবো। এতে, ব্যবহারকারীর ইনপুট ভুল হলে, সিস্টেম তাদের জানিয়ে দিবে।

// script.js
document.getElementById('signup-form').addEventListener('submit', function(event) {
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    if (username === '' || email === '' || password === '') {
        alert('দয়া করে সকল ফিল্ড পূর্ণ করুন!');
        event.preventDefault(); // ফর্ম সাবমিট বন্ধ করা
    } else if (!validateEmail(email)) {
        alert('অনুগ্রহ করে সঠিক ইমেল প্রদান করুন!');
        event.preventDefault();
    }
});

function validateEmail(email) {
    const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    return regex.test(email);
}

এখানে, আমরা সাইন আপ ফর্ম সাবমিট করার আগে তিনটি ইনপুট ফিল্ড চেক করেছি। যদি কোন ফিল্ড খালি থাকে, তাহলে একটি আলার্ট মেসেজ দেখানো হবে। এছাড়া, ইমেলের ফর্ম্যাট সঠিক কিনা তাও চেক করা হয়েছে।

সমাপ্তি:

এটি ছিল একটি সিম্পল এবং সুন্দর সাইন আপ পেজ ডিজাইন করার প্রক্রিয়া। HTML দিয়ে আমরা পেজের কাঠামো তৈরি করেছি, CSS দিয়ে ডিজাইন করেছি, এবং JavaScript দিয়ে ফর্ম ভ্যালিডেশন করেছি।

এই পদ্ধতিটি আপনি আপনার প্রজেক্টে ব্যবহার করতে পারেন। চাইলে আপনি সাইন আপ ফর্মে আরো ফিচার যেমন, রিসেট বাটন, পাসওয়ার্ড ভ্যালিডেশন বা রিচ ক্যাপচা যোগ করতে পারেন।

এছাড়া, আপনি চাইলে এই সাইন আপ পেজের ডিজাইনটি আরও আধুনিক বা নির্দিষ্ট ব্র্যান্ডিংয়ের সাথে মেলে এমন করে কাস্টমাইজ করতে পারেন।

HTML কোড দিয়ে কিভাবে আপনি সাইন আপ স্ক্রিন ডিজাইন করতে পারবেন