DEV Community

Cover image for Build a Login Register Form with HTML and CSS using Fire UI
Vishal Bhamare
Vishal Bhamare

Posted on

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.

login

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)
Enter fullscreen mode Exit fullscreen mode

So that's all for our resources.

  1. Project Setup

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

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.

emmet

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

index1

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)