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

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

এখানে, <form> ট্যাগটি লগিন স্ক্রীনের জন্য ফর্ম তৈরি করছে। input ফিল্ড দুটি ইউজারনেম এবং পাসওয়ার্ড গ্রহণ করবে, এবং একটি সাবমিট বাটন থাকবে লগিন করার জন্য।

ধাপ ২: 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;
}

.login-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;
}

.login-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;
}

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

এখানে, আমরা:

বডি এবং কনটেইনারের ডিজাইন: পেজের ব্যাকগ্রাউন্ড এবং সেন্টারিং স্টাইল করেছি। flex লেআউট ব্যবহার করে কনটেইনারটি সেন্টারে রাখেছি।
ইনপুট ফিল্ড এবং বাটনের স্টাইল: প্রতিটি ইনপুট ফিল্ডের জন্য স্পেসিং, বর্ডার, এবং হোভার এফেক্ট সংযুক্ত করেছি। একইভাবে, বাটনের জন্য হোভার এফেক্ট এবং ব্যাকগ্রাউন্ড কালার যুক্ত করেছি।

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

এখন আসি JavaScript দিয়ে ফর্ম ভ্যালিডেশন তৈরি করার দিকে। এখানে, আমরা একটি সিম্পল চেক করবো যাতে ইউজার ইউজারনেম এবং পাসওয়ার্ড ফিল্ড পূর্ণ না করলে সাবমিট করতে না পারে।

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

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

এখানে, আমরা একটি সিম্পল ইভেন্ট লিসেনার ব্যবহার করেছি যা ফর্ম সাবমিট হলে চেক করবে ইউজারনেম এবং পাসওয়ার্ড ফিল্ড পূর্ণ আছে কি না। যদি কোন একটি ফিল্ডও খালি থাকে, তাহলে একটি আলার্ট মেসেজ দেখানো হবে এবং ফর্ম সাবমিট বন্ধ হয়ে যাবে।

সমাপ্তি:

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

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

এছাড়া, আপনি চাইলে আরও উন্নত ডিজাইন করতে বা আরও নিরাপত্তা ফিচার যেমন, সেশন ম্যানেজমেন্ট, OAuth ইত্যাদি যুক্ত করতে পারেন।

এইভাবে আপনি একটি লগিন পেজ ডিজাইন করতে পারেন HTML, CSS, এবং JavaScript ব্যবহার করে। আশা করি, আপনি এটি ব্যবহার করে একটি সুন্দর লগিন পেজ তৈরি করতে পারবেন।

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