DEV Community

loading...
Cover image for ✨Build a Login and Register Form with HTML and CSS✨

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

stanleyowen profile image Stanley Owen Updated on ・5 min read

image
Photo By unsplash.com

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

Simple Login and Register Form

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

Table of Contents

  1. Gather Resources
  2. Getting Started with Fire-UI
  3. 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 👩‍💻👩‍💻 :

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

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

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

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

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

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

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

So what we need is:

  1. Remove the content of body
  2. Add the attribute theme = 'light' in the body element
  3. 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

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

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

And we are done with our simple login and register template!

Don't forget to give a star on GitHub if you like this article!

Happy Coding! 🎉

You may also like these articles:

Discussion (6)

pic
Editor guide
Collapse
inhuofficial profile image
InHuOfficial

Don't forget to use <label>s for your inputs and make sure they are properly associated (this is important for screen readers). You have done this with your checkbox correctly you just need to implement it on your inputs.

Also you don't need to use <input type="submit" anymore, a simple <button> will do the trick and make your markup cleaner.

Taking the time to focus on semantics will make your life as a developer much easier and learning good habits now will make you 10x better than most developers in no time looking at what you have done as a student, as this is 100 times better than what I would have done!

Collapse
kimlimjustin profile image
Justin Maximillian Kimlim

First of all, Stanley Owen and I appreciate your taking the time to write this comment. As developers of Fire UI, we actually focus more on the main library than the examples making the examples somehow written in not up-to-date HTML tags, we are really sorry for this negligence. Of course, we'll update this soon. Another factor of this causing is indeed Stanley Owen and I are both junior high school student making us, developers of Fire UI can only googling for learning, and as you know, today technology is evolving everyday and sometimes the query of Google shows up the result coming from the past years, which are maybe not relevant nowadays.

Of course, any contributions like Opening issues like this on GitHub, opening PR, using this Fire UI on your project, or even star it on GitHub, if you will, will be much appreciated.

GitHub logo fire-ui / fire-ui

A user-friendly and reliable CSS library

Fire UI

Github issues Github forks Github stars MIT

npm version

jsDelivr stats Netlify Status

NPM

Fire UI Logo

Table of Contents

Quick start

There are several quick start options available:

Bug and feature requests

Have a bug or a feature request? please open an issue if your problem or idea is not addressed yet.

Contributing Guidelines

Thanks for your interest in contributing to Fire UI! Please take a moment to review this document before submitting a pull request.

Code of Conduct

For the Code of Conduct, please visit CODE_OF_CONDUCT.md

Our lovely community

Shoutout to all stargazers and contributors!

Stargazers repo roster for @fire-ui/fire-ui Forkers repo roster for @fire-ui/fire-ui

LICENSE

MIT




Best regards,
Justin Maximillian Kimlim

Collapse
richardoey profile image
RichardOey

This project will give you more understanding about HTML and CSS, but maybe asking someone for designing will make this project great , but overall Thumbs up ! Proud of you guys 👊

Thread Thread
kimlimjustin profile image
Justin Maximillian Kimlim

Thank you for commenting! Fire UI is free and open-source, if you will, you are more than welcome to contribute to make it better :)

Collapse
stanleyowen profile image
Stanley Owen Author

Hi InHuOfficial 👋. Sorry for the slow response, but I really appreciate your effort to write this comment✨. I have just recently updated the code on GitHub and of course on dev.to too! Happy Coding!

Sincerely,
Stanley Owen

Collapse
gustavogodoy profile image
Gustavo Godoy

Thanks for share ;)