Build a Login Register Form with HTML and CSS using Fire UI

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

Table of Contents

1 Prerequisite
2 Project Setup
3 Build Demo Page
I Setup Fire-UI
II Create Navigation Bar
III Create Login and Register Form

1. Prerequisite

Resources you might need before starting:

Basic knowledge of HTML
Text Editor (Any of your favorites will do. I'll use VS Code)
Browser (Mozilla, Chrome, Safari, etc. I'll use Mozilla)

So that's all for our resources.

1. Project Setup

You will need one HTML and one CSS stylesheet page in a single folder.

This is how your folder should look like

If you are also using VS Code in index.html you can use emmet or similar extension to create HTML boilerplate by,

typing ' ! ' and pressing enter.

Setup FIRE UI

Your index should look like this after adding fire UI CSS and fire UI js ( You can find a link in Fire UI DOCS ).

Add a link to your stylesheet in the head tag and open the HTML page in a browser.

3 Start building

! Remove the content of the 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>

Login and Register form

<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>

Styles(CSS)

#form {
    width: 40%;
    padding-top: 100px;
    margin-left: auto;
    margin-right: auto;
    transition: all .4s;
}

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

@media only screen and (max-width: 768px) {
    #form { width: auto; margin-left: 10px; margin-right: 10px; }
}

For VS Code in the extension tab download the LIVE SERVER extension to see results as you code along.

Happy Coading !!!

Give a star on Git