DEV Community

Cover image for How to make a basic login form and registration form using HTML and CSS?
keshavs759
keshavs759

Posted on • Originally published at vidyasheela.com

How to make a basic login form and registration form using HTML and CSS?



A login page is a web page or website entry page that requires user identification and authentication, which is often accomplished by providing a username and password combination. Logins might give you access to the full site or just a section of it. Logging in allows the website to track the user's activity and habits in addition to providing site access.

Following is the code for a simple login form/login page and a registration form/page in HTML with CSS code. It is a basic login page + Registration page written completely using HTML. You can use this login form and registration form on your website without any restrictions.

I recommend you to watch this video along with the code, it will help you to understand the code better,

Also Read:

Code for a Login form:

Code for a Registration form:

Download the source code:  Download Link

You can download several website templates, webpages and widgets for free from here:

https://vidyasheela.com/website-components.php

Discussion (2)

Collapse
lukeshiru profile image
LUKESHIRU

For the password validation, you can use native validations:

document
    .querySelector("#pass")
    .addEventListener("input", ({ currentTarget: { value } }) =>
        document
            .querySelector("#confirm-pass")
            .setAttribute(
                "pattern",
                `^(${value.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")})$`
            )
    );
Enter fullscreen mode Exit fullscreen mode

Also, ideally you should add a title to the #confirm-pass input so it's shown when the user tries to submit the form, and all the inputs should be required in this case (you might also want to set some other validations for password and username).

Cheers!

Collapse
posandu profile image
Posandu

I'm not being rude, But honestly It's ugly design