DEV Community

Cover image for HTML/CSS tutorial: create a simple responsive login form
AlbertoM
AlbertoM

Posted on • Updated on • Originally published at inspiredwebdev.com

HTML/CSS tutorial: create a simple responsive login form

Originally published on inspiredwebdev.com

 

Responsive HTML Login Form

In this tutorial you will learn how to create a simple HTML Login form like the one below. The design was taken from ColorLib, I simply recreated it from scratch.

tutorial 1 html login form

We will only use HTML and CSS, no Bootstrap, no JavaScript.

 

Setup

Before we start writing the markup for our form, let's import a couple of things: - fontawesome - Roboto, our google font Go ahead and paste this code inside the head tag of your index.html file.



    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
            crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">


Enter fullscreen mode Exit fullscreen mode

 


book banner

Get my ebook on Amazon and Leanpub

 

The HTML

Now we can move on to writing our markup. We will first write all the HTML and then start styling it with CSS. The structure is fairly simple: - form_wrapper is our main contaner that we will position in the middle of the page - form_left will be the container for the image - form_right will be the container for our input tags - input_container holds a i containing a font-awesome icon and an input tag



    <body>
        <div id="form_wrapper">
            <div id="form_left">
                <img src="icon.png" alt="computer icon">
            </div>
            <div id="form_right">
                <h1>Member Login</h1>
                <div class="input_container">
                    <i class="fas fa-envelope"></i>
                    <input placeholder="Email" type="email" name="Email" id="field_email" class='input_field'>
                </div>
                <div class="input_container">
                    <i class="fas fa-lock"></i>
                    <input  placeholder="Password" type="password" name="Password" id="field_password" class='input_field'>
                </div>
                <input type="submit" value="Login" id='input_submit' class='input_field'>
                <span>Forgot <a href="#"> Username / Password ?</a></span>
                <span id='create_account'>
                    <a href="#">Create your account ➡ </a>
                </span>
            </div>
        </div>
    </body>


Enter fullscreen mode Exit fullscreen mode

 

The CSS

Now it's the fun part: styling with CSS. To achieve the expected result we will use flexbox and grid layouts alongside with CSS variables to store our colors. Storing values inside CSS variables will make changing colors very easy, have a look at this code:



    :root {
        --body_gradient_left:#7200D0;
        --body_gradient_right: #C800C1;
        --form_bg: #ffffff;
        --input_bg: #E5E5E5;
        --input_hover:#eaeaea;
        --submit_bg: #1FCC44;
        --submit_hover: #40e263;
        --icon_color:#6b6b6b;
    }


Enter fullscreen mode Exit fullscreen mode

Good, now we will apply some default styling to override the browser default:



    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }


Enter fullscreen mode Exit fullscreen mode

The next step is to start styling the body and the form_wrapper Read the comments to better understand what we are doing here.



    body {
        /* make the body full height*/
        height: 100vh;
        /* set our custom font */
        font-family: 'Roboto',
        sans-serif;
        /* create a linear gradient*/
        background-image: linear-gradient(to right, var(--body_gradient_left), var(--body_gradient_right));
        display:flex;
    }

    #form_wrapper {
        width: 1000px;
        height: 700px;
        /* this will help us center it*/
        margin:auto;
        background-color: var(--form_bg);
        border-radius: 50px;
        /* make it a grid container*/
        display: grid;
        /* with two columns of same width*/
        grid-template-columns: 1fr 1fr;
        /* with a small gap in between them*/
        grid-gap: 5vw;
        /* add some padding around */
        padding: 5vh 15px;
    }


Enter fullscreen mode Exit fullscreen mode

On the left side we simply want to display an image centered.



    #form_left {
        /* center the image */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #form_left img {
        width: 350px;
        height: 350px;
    }


Enter fullscreen mode Exit fullscreen mode

Now let's move to styling the form_right container



    #form_right {
        display: grid;
        /* single column layout */
        grid-template-columns: 1fr;
        /* have some gap in between elements*/
        grid-gap: 20px;
        padding: 10% 5%;
    }


Enter fullscreen mode Exit fullscreen mode

And this is the style for the input tags:



    .input_container {
        background-color: var(--input_bg);
        /* vertically align icon and text inside the div*/
        display: flex;
        align-items: center;
        padding-left: 20px;
    }

    .input_container:hover {
        background-color: var(--input_hover);
    }

    .input_container,
    #input_submit {
        height: 60px;
        /* make the borders more round */
        border-radius: 30px;
        width: 100%;
    }

    .input_field {
        /* customize the input tag with lighter font and some padding*/
        color: var(--icon_color);
        background-color: inherit;
        width: 90%;
        border: none;
        font-size: 1.3rem;
        font-weight: 400;
        padding-left: 30px;
    }

    .input_field:hover,
    .input_field:focus {
        /* remove the outline */
        outline: none;
    }

    #input_submit {
        /* submit button has a different color and different padding */
        background-color: var(--submit_bg);
        padding-left: 0;
        font-weight: bold;
        color: white;
        text-transform: uppercase;
    }

    #input_submit:hover {
        background-color: var(--submit_hover);
        /* simple color transition on hover */
        transition: background-color,
            1s;
        cursor: pointer;
    }


Enter fullscreen mode Exit fullscreen mode

Now let's finish by styling our h1 and our span and a tags



    h1,
    span {
        text-align: center;
    }

    /* shift it a bit lower */
    #create_account {
        display: block;
        position: relative;
        top: 30px;
    }

    a {
        /* remove default underline */
        text-decoration: none;
        color: var(--submit_bg);
        font-weight: bold;
    }

    a:hover {
        color: var(--submit_hover);
    }

    i {
        color: var(--icon_color);
    }


Enter fullscreen mode Exit fullscreen mode

Perfect. You now have a good-looking, simple HTML form. Let's add a few more line of CSS to make sure that it will look nice even on smaller screens:



    /* make it responsive */
    @media screen and (max-width:768px) {

        /* make the layout  a single column and add some margin to the wrapper */
        #form_wrapper {
            grid-template-columns: 1fr;
            margin-left: 10px;
            margin-right: 10px;
        }
        /* on small screen we don't display the image */
        #form_left {
            display: none;
        }
    }


Enter fullscreen mode Exit fullscreen mode

If you like this short tutorial, please leave a comment and share it with your friends. Let me know what else would you like me to cover in a future tutorial.

 


book banner

Get my ebook on Amazon and Leanpub

Top comments (15)

Collapse
 
jonaslinn profile image
Jonas Linn

Please use semantic html, right now this is very bad for accessibility. Use <form> and <label> to markup your code. #form-right could be the <form> and .input-container could be a <label>. And add a real label, maybe hide it but let it be readable for screenreaders or use a floating label. Relying on the placeholder attribute is not enough.

Collapse
 
albertomontalesi profile image
AlbertoM

Thanks for the feedback! What you said is correct, I'll probably update the code to follow better practices, this was more just a basic tutorial on on how to design one, but you are absolutely correct.

Collapse
 
texxs profile image
Texx Smith

This code is semantic enough. We can all tell what pieces of code go to what, and that's really all that matters now and all that ever mattered.

SCREW Semantic HTML. Does anyone think someone who can read the code of a webpage is not going to be able to determine the difference between the header and the sidebar when looking at the webpage? Does anyone think that a developer who is editing this code is going to be lost? No. The whole point of semantic html is to make life easier for google. And seriously, if there's no benefit to the website, I'm no longer willing to put an ounce of effort to appease google.

Collapse
 
jonaslinn profile image
Jonas Linn

Wow. Lost for words. Have you ever considered a blind person using the web?

It is not about the developer, it is about accessibility.

Tutorials like this make accessibility hard. Juniors see this markup and think it's alright, which it is not. A few changes and it would have the accessibility basics covered.

Collapse
 
shymmer69 profile image
Nick Ryan

Nice and simple however the semantic points have already been made, so please consider updating this to reflect better sematic mark up.

Also, as you are using font-anything-but-awesome then you are using JavaScript therefore claiming that it's only HTML and CSS is not accurate.

It's a good practical example otherwise.

Collapse
 
violet profile image
Elena

Very clean code, nice. If anyone is interested in learning html/css in a more visual way should check this youtube tutorial.

Collapse
 
milburngomes profile image
MilburnGomes

Great Article! CSS part was very interesting! I'm a back-end developer, so I've referred your code and made changes to login page, still in progress though. Take a look at my work:
github.com/MilburnGomes/SimpleWebs...

We could also keep adding features to make a better website for newbies.
Thanks for sharing!

Collapse
 
jlrxt profile image
Jose Luis Ramos T. • Edited

Saludos me gustaría algo así como / mi primer juego en HTML,CSS y javascript. Nivel principiante 🔰 / mi primer formulario un buen aporte para los que iniciamos en el mundo CSS. Bien 👍

Collapse
 
ankitbeniwal profile image
Ankit Beniwal

¡sí! Es un buen recurso para principiantes.

Collapse
 
thunderfury1208 profile image
Gilbert Martinez

Great stuffs thank you!

Collapse
 
anjankant profile image
Anjan Kant

Valuable stuff to learn CSS/HTML :)

Collapse
 
albertomontalesi profile image
AlbertoM

Thanks!

Collapse
 
chimexi_42 profile image
Chima Chidera Okoro

Really nice, loved it

Collapse
 
albertomontalesi profile image
AlbertoM

Thanks!

Collapse
 
gliterbaybe profile image
gliterbaybe • Edited

Awesome!