✨Build a Login and Register Form with HTML and CSS✨

In this article, today we will learn how to build a simple but aesthetic Login and Register Form.

You can access the full code here and the demo page here!

Gather Resources
Getting Started with Fire-UI
Start building your Landing Page
- Setup Fire-UI
- Create Navigation Bar (Navbar)
- Create Login and Register Form

1. Gather Resources

Before we continue further, some resources you might need before we start coding 👩‍💻👩‍💻 :

Basic knowledge of HTML
Text Editor (Either Visual Studio Code or Sublime Text is recommended)
A Search Engine (Google, Mozilla, etc will be fine)

So that's all for our resources, and I believed that you have downloaded all these resources. If haven't, you can open the link provided above.

2. Getting Started with Fire-UI

Fire-UI is a CSS Library allowing for easier and more standards-compliant web design.

You can read the following blog to know more about Fire-UI

Fire-UI : A User-Friendly and Reliable CSS Framework

Stanley Owen ・ Dec 19 '20

#css #javascript #opensource

To keep it simple and fast, we will move on to the next part.

3. Start building your Landing Page

a. Setup Fire-UI

Now open your text editor and type the basic of HTML:

<!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login and Register Template</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Save the following files with index.html, then we will start setting up Fire-UI. There are some methods to configure and connect Fire-UI. But in this tutorial, we will keep it simple, which is using CDN through jsdelivr:

<!-- Fire UI CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.4/FireUI.min.css">

<!-- Fire UI Javascript -->
<script src="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.4/FireUI.min.js"></script>

Thus, your index.html will now look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fire UI CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.4/FireUI.min.css">
    <!-- Fire UI Javascript -->
    <script src="https://cdn.jsdelivr.net/npm/@fire-ui/fire-ui@0.2.4/FireUI.min.js"></script>
    <title>Login and Register Template</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

After that, save the file as .html extension like the picture below:

Find the file that you have just save it recently, run it with your default browser and you will see the result like this:

Before continuing further, you can access our full code in the following link: here

Now what we are going to to is to create navigation bar (navbar). If you didn't sure what is navbar, here is how navbar look like:

So what we need is:

Remove the content of body
Add the attribute theme = 'light' in the body element
Copy and paste the Navbar code

<div class="topnav theme-reverse topnav-shadow">
    <span class="topnav-brand">Navbar</span>
    <span class="topnav-hamburger-menu" data-target = "myTopnav">&#x2630;</span>
    <div class="topnav-right" id="myTopnav">
        <a class="topnav-item" data-switch-theme="light, dark, aqua, sky, phoenix, indigo, teal">Switch theme</a>
    </div>
</div>

b. Create Login and Register Form
Then we come to the challenging part, which is building the login and register form.

Copy these code to your text editor:

<div id="form">
    <div className="centeredForm">
        <div class="box theme-reverse">
            <div class="box">
                <!-- Create a Tab that contain Login and Register Tab -->
                <div class="tab" data-tab="formTab">
                    <button class="tab-btn btn-dark" data-content="login">Login</button>
                    <button class="tab-btn btn-light" data-content="register">Register</button>
                </div>
                <div class="tab-contents" id="formTab">
                    <!-- Login Tab -->
                    <div id="login" class="tab-content tab-content-active">
                        <form action="#" method="POST">
                            <div class="form-group form-animate">
                                <label for="login-username" class="form-label">Username</label>
                                <input type="text" class="input-animate" id="login-username" required autocomplete="username">
                            </div>
                            <div class="form-group form-animate">
                                <label for="login-password" class="form-label">Password</label>
                                <input type="password" class="input-animate" id="login-password" required autocomplete="current-password">
                            </div>
                            <div class="form-group">
                                <button class="btn form-control theme-adjust">Login</button>
                            </div>
                        </form>
                    </div>
                    <!-- Register Tab -->
                    <div id="register" class="tab-content">
                        <div id="helloWorld" class="tab-content tab-content-active">
                            <form action="#" method="POST">
                                <div class="form-group form-animate">
                                    <label for="reg-username" class="form-label">Username</label>
                                    <input type="text" class="input-animate" id="reg-username" required autocomplete="username">
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group form-animate">
                                            <label for="reg-password" class="form-label">Password</label>
                                            <input type="password" class="input-animate" id="reg-password" required autocomplete="new-password">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group form-animate">
                                            <label for="confirm-password" class="form-label">Confirm Password</label>
                                            <input type="password" class="input-animate" id="confirm-password" required autocomplete="new-password">
                                        </div>
                                    </div>
                                    <input type="checkbox" id="label" required>
                                    <label for="label">By signing up, you agree to our <a href="#">Terms and Condition</a> and our <a href="#">Privacy Policy</a></label>
                                </div>
                                <div class="form-group">
                                    <button class="btn form-control theme-adjust">Register</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mb-5"></div>
    </div>
</div>

Well, we are not done yet, we will create a custom CSS to make it more aesthetic. Now we will create a index.css file which contains the following code:

#form {
    width: 60%; /* Only set the width to 60% so it would be centered vertically */
    padding-top: 100px;
    margin-left: auto;
    margin-right: auto; /* Items will be centered vertically when margin-top and margin-left is set to auto */
    transition: all .4s;
}

.centeredForm {
    margin: 20px;
    margin-bottom: 40px;
    padding: 40px 10px;
    border-radius: 10px;
    transition: all .4s;
    background-color: #F0F0F0;
}

/* This will transform the form width into full width when device width is smaller than 768px */
@media only screen and (max-width: 768px) {
    #form { width: auto; margin-left: 10px; margin-right: 10px; }
}