Jinsi ya Kutengeneza Login na Sign Up Form kwa Ajili ya Website

Jinsi ya Kutengeneza Login na Sign Up Form kwa Ajili ya Website | DSN TECHNOLOGY

Imeandikwa na Danieli Emmanueli – DSN TECHNOLOGY

Katika ulimwengu wa teknolojia, kila website ya kisasa inahitaji sehemu ya Login na Sign Up ili watumiaji waweze kujiandikisha na kuingia kwa akaunti zao kwa usalama. Kama unataka kutengeneza sehemu hii kwa ubora wa hali ya juu, basi uko mahali sahihi! Katika makala hii, nitakuonyesha jinsi ya kutengeneza Login na Sign Up form kwa kutumia HTML, CSS, na JavaScript kwa mwonekano wa kisasa na wa kuvutia.

Kwa Nini Login na Sign Up Form Ni Muhimu?

Usalama wa Watumiaji – Inazuia watu wasiohusika kupata taarifa za ndani.
Urahisi wa Kutunza Data – Inasaidia kuhifadhi taarifa za watumiaji kwa urahisi.
Mwonekano wa Kitaalamu – Inafanya website yako ionekane ya kisasa na inayovutia.

Sasa, twende moja kwa moja kwenye hatua za kutengeneza Login na Sign Up Form kwa website yako!

1. KODI YA HTML

Tunaanza kwa kuunda muundo wa kimsingi wa form hizi kwa kutumia HTML. Tutatumia divs ili kuweka mipangilio mizuri.

<!DOCTYPE html>
<html lang="sw">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login & Sign Up | DSN TECHNOLOGY</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <div class="form-box">
        <h2 id="form-title">Login</h2>
        <form id="auth-form">
            <div class="input-box">
                <input type="email" id="email" required>
                <label>Email</label>
            </div>
            <div class="input-box">
                <input type="password" id="password" required>
                <label>Password</label>
            </div>
            <button type="submit" id="submit-btn">Login</button>
            <p class="toggle-form">Huna akaunti? <a href="#" id="switch-signup">Jiunge hapa</a></p>
        </form>
    </div>
</div>

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

2. KODI YA CSS (Mwonekano wa Kisasa na Kuvutia)

Sasa, tutatumia CSS kuifanya form ionekane ya kisasa, yenye mvuto, na inayovutia watumiaji.

/* FONT NA MISINGI YA PAGE */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #1f1c2c, #928DAB);
}

/* STAILI ZA FORM */
.container {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    width: 350px;
    text-align: center;
}

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

.input-box {
    position: relative;
    margin: 20px 0;
}

.input-box input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    font-size: 16px;
}

.input-box label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #666;
    pointer-events: none;
    transition: 0.3s;
}

.input-box input:focus + label,
.input-box input:valid + label {
    top: 5px;
    font-size: 12px;
    color: #007BFF;
}

button {
    width: 100%;
    padding: 10px;
    background: #007BFF;
    border: none;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background: #0056b3;
}

.toggle-form {
    margin-top: 15px;
}

.toggle-form a {
    color: #007BFF;
    text-decoration: none;
    font-weight: bold;
}

.toggle-form a:hover {
    text-decoration: underline;
}

3. KODI YA JAVASCRIPT (Kubadilisha kati ya Login na Sign Up)

Kwa kutumia JavaScript, tutawezesha mabadiliko kati ya Login na Sign Up Form kwa kubonyeza link ya "Jiunge hapa".

document.getElementById('switch-signup').addEventListener('click', function(event) {
    event.preventDefault();

    let formTitle = document.getElementById('form-title');
    let submitBtn = document.getElementById('submit-btn');
    let toggleText = document.querySelector('.toggle-form');

    if (formTitle.innerText === "Login") {
        formTitle.innerText = "Sign Up";
        submitBtn.innerText = "Sign Up";
        toggleText.innerHTML = 'Una akaunti? <a href="#" id="switch-login">Ingia hapa</a>';
    } else {
        formTitle.innerText = "Login";
        submitBtn.innerText = "Login";
        toggleText.innerHTML = 'Huna akaunti? <a href="#" id="switch-signup">Jiunge hapa</a>';
    }

    document.getElementById('switch-login')?.addEventListener('click', function(event) {
        event.preventDefault();
        formTitle.innerText = "Login";
        submitBtn.innerText = "Login";
        toggleText.innerHTML = 'Huna akaunti? <a href="#" id="switch-signup">Jiunge hapa</a>';
    });
});

Hitimisho

DOWNLOAD CODE👈

Kwa kutumia HTML, CSS, na JavaScript, tumeweza kuunda Login na Sign Up Form yenye mwonekano mzuri na wa kisasa. Unaweza kutumia hii form kwenye website yoyote inayohitaji usajili wa watumiaji.

Je, una maswali au unahitaji msaada zaidi?
Tembelea DSN TECHNOLOGY kila siku kwa makala mpya za teknolojia. Usisahau kushiriki post hii kwa wengine!

DSN TECHNOLOGY

Jinsi ya Kutengeneza Login na Sign Up Form kwa Ajili ya Website