Create a Simple Responsive Login Form With Html and CSS

The Hyper Text Markup Language is the building block of the web, each and every page you see on the web is structured with HTML and styled with the CSS. The html markup is rendered and displayed by a software program most commonly known as web browser. One that you are reading this page onto is a web browser.

Learning HTML is fun and simple and you will also find tons of resources available all around the web. Please note this tutorial assumes you have some basic knowledge of HTML and some core elements.

In this post you will learn how to create a very simple flexbox based responsive login form with HTML and CSS.

Prerequisites

Before we start, we need some tools which might already be available on your computer.

  1. A Web browser(Firefox, Opera, Chrome, Edge, etc)
  2. A Code editor (Notepad, TextEdit, Sublime Text, Vim etc)
  3. A basic knowledge of HTML

To preview the HTML/CSS code we write, we need a web browser. A web browser is a software program that renders and displays html content.

Creating the structure

The html provides the basic structure to a web page using tags or elements and every page you see on the web is structured with html.

  1. Open up your code editor and type in or copy the following html code
<!DOCTYPE html>
<html>
<head>
    <title>The Login Form</title>
</head>
<body>
</body>
</html> 

The above code you see defines an html document. The <!DOCTYPE html> conveys the browser that it should be treated as an HTML5 document.

<!DOCTYPE html>
<html>
<head>
    <title>The Login Form</title>
</head>
<body>
    <div class="wrap">
        <form class="login-form" action="">
            <div class="form-header">
                <h3>Login Form</h3>
                <p>Login to access your dashboard</p>
            </div>
            <!--Email Input-->
            <div class="form-group">
                <input type="text" class="form-input" placeholder="[email protected]">
            </div>
            <!--Password Input-->
            <div class="form-group">
                <input type="password" class="form-input" placeholder="password">
            </div>
            <!--Login Button-->
            <div class="form-group">
                <button class="form-button" type="submit">Login</button>
            </div>
            <div class="form-footer">
            Don't have an account? <a href="#">Sign Up</a>
            </div>
        </form>
    </div><!--/.wrap-->
</body>
</html>

This is just a simple markup of the login form. If you save the document with an html extension and open it in a web browser you’d see the form and the buttons in their default styles. In the following steps, we will use CSS to add styles to our markup.

Adding the CSS styles

There are well many ways to add CSS styles to a webpage like using inline styles, or an external css file or in between <style></style> tag in a document. For this login form, the styles are defined within the <head> tag with <style></style> element.

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
html{
    height: 100%;
}
body{
    font-family: 'Segoe UI', sans-serif;;
    font-size: 1rem;
    line-height: 1.6;
    height: 100%;
}
.wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fafafa;
}
.login-form{
    width: 350px;
    margin: 0 auto;
    border: 1px solid #ddd;
    padding: 2rem;
    background: #ffffff;
}
.form-input{
    background: #fafafa;
    border: 1px solid #eeeeee;
    padding: 12px;
    width: 100%;
}
.form-group{
    margin-bottom: 1rem;
}
.form-button{
    background: #69d2e7;
    border: 1px solid #ddd;
    color: #ffffff;
    padding: 10px;
    width: 100%;
    text-transform: uppercase;
}
.form-button:hover{
    background: #69c8e7;
}
.form-header{
    text-align: center;
    margin-bottom : 2rem;
}
.form-footer{
    text-align: center;
}

Now when you combine html structure and css styles together we have the following code which you can now save with an html extension and open in a web browser to preview the result.

<!DOCTYPE html>
<html>
<head>
    <title>The Login Form</title>
    <style>
    *{
        margin:0;
        padding: 0;
        box-sizing: border-box;
    }
    html{
        height: 100%;
    }
    body{
        font-family: 'Segoe UI', sans-serif;;
        font-size: 1rem;
        line-height: 1.6;
        height: 100%;
    }
    .wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fafafa;
    }
    .login-form{
        width: 350px;
        margin: 0 auto;
        border: 1px solid #ddd;
        padding: 2rem;
        background: #ffffff;
    }
    .form-input{
        background: #fafafa;
        border: 1px solid #eeeeee;
        padding: 12px;
        width: 100%;
    }
    .form-group{
        margin-bottom: 1rem;
    }
    .form-button{
        background: #69d2e7;
        border: 1px solid #ddd;
        color: #ffffff;
        padding: 10px;
        width: 100%;
        text-transform: uppercase;
    }
    .form-button:hover{
        background: #69c8e7;
    }
    .form-header{
        text-align: center;
        margin-bottom : 2rem;
    }
    .form-footer{
        text-align: center;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <form class="login-form" action="">
            <div class="form-header">
                <h3>Login Form</h3>
                <p>Login to access your dashboard</p>
            </div>
            <!--Email Input-->
            <div class="form-group">
                <input type="text" class="form-input" placeholder="[email protected]">
            </div>
            <!--Password Input-->
            <div class="form-group">
                <input type="password" class="form-input" placeholder="password">
            </div>
            <!--Login Button-->
            <div class="form-group">
                <button class="form-button" type="submit">Login</button>
            </div>
            <div class="form-footer">
            Don't have an account? <a href="#">Sign Up</a>
            </div>
        </form>
    </div><!--/.wrap-->
</body>
</html>

So now you can test your code in a web browser of your choice.

Metabust

Metabust helps you learn new things, you will find all those computers, internet software and tech related stuffs you always need to sustain your life.

Leave a Reply

Close Menu