Login form

PHP
1

Good morning,

I have an html, css, js form and I would like once the user name and password are entered to be redirected to an html page and if it is incorrect an error message will be generated. display in the same window.

Can you help me create this script?

or if you have an easier script to integrate into my website I am interested.

here is my source

html

 <div id="popup2" class="popup-container">
                <div class="popup-box">
                    <h1>SE CONNECTER</h1><br>
                    <form>
                        <label for="username">Nom d'utilisateur:</label>
                        <input type="text" name="username" placeholder="Entrer votre nom d'utilisateur">
                        <label for="password">Votre mot de Passe:</label>
                        <input type="text" name="password" placeholder="Entrer votre mot de passe ">
                        <div class="check">
                            <input type="checkbox" name="remember">
                            <label for="remember">Se souvenir</label>
                        </div>

                    </form>
                    <div class="button-wrap">
                        <form action="https://fr.w3docs.com/" method="get" target="_blank">
                            <button class="close-btn" type="submit">Se connecter</button>
                        </form>
                        <button class="close-btn">Fermer</button>
                    </div>
                </div>
            </div>

css

/* Form Login */
form {
    display: flex;
    flex-direction: column;
}

label {
    font-size: 14px;
    margin-bottom: 9px;
    color: #000;
}

input[type="text"],
input[type="password"] {
    padding: 10px;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

.check {
    margin-bottom: 10px;
}

.check label {
    margin-top: 5px;
}

input[type="submit"] {
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    background-color: #ef6e12;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

input[type="submit"]:hover {
    background-color: #f07a26;
}

JS

const showPopup = document.querySelectorAll(".show-popup");
const closeBtn = document.querySelectorAll(".close-btn");

showPopup.forEach(function (popup) {
    popup.addEventListener("click", function () {
        var modalTarget = this.getAttribute("href");
        document.querySelector(modalTarget).classList.add("active");
    });
});
closeBtn.forEach(function (close) {
    close.addEventListener("click", function () {
        this.closest(".popup-container").classList.remove("active");
    });
});
2

I assume you have a database of usernames and passwords?

3

What have you tried so far? There are many tutorials on how to create a login page, but if the one you pick doesn’t use password_hash() and password_verify() to handle passwords, pick a different one.

4

First, a couple of points regarding your HTML form.

You will need to set the method attribute to post for a login form. It would also be a good idea to set an action attribute, though it should probably use the same “page” as the form, so the user sees it again (with errors) if the login fails, only redirecting if login is sucessful.

We would assume that there is a “sign up” form too, before a login form.

5

Good evening, Thank you for your response. I don’t have a db yet, I think I should find a ready-made template and integrate it when do you think? because I am a novice and not easy for me. If you know of a model that is easy to integrate, it would help me a lot.

[image]

Commentaires

6

It may be a good idea to use a framework of some sort - getting all the security correct on these login systems takes some doing, particularly as you say you’re a novice. I can’t recommend one as it’s not something I’ve done myself.

1 Like