✨Build a Login and Register Form with HTML and CSS✨
Tags: tutorial, html, css, webdev
Published: 2021-03-03 13:05:09

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3r2w3y131bt1or8n6uv1.png)
*Photo By [unsplash.com](https://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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx0tuh3ag2acaiiqto3u.png)

You can access the full code [here](https://github.com/fire-ui/login-register-template) and the demo page [here](https://fire-ui.github.io/login-register-template/)!

# **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 👩‍💻👩‍💻 :
* Basic knowledge of HTML
* Text Editor (Either [Visual Studio Code](https://code.visualstudio.com/download) or [Sublime Text](https://www.sublimetext.com/3) is recommended)
* A Search Engine ([Google](https://www.google.com/chrome/), [Mozilla](https://www.mozilla.org/en-US/firefox/new/), 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
{% link https://dev.to/stanleyowen/fire-ui-a-user-friendly-and-reliable-css-framework-229d %}

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:
```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`:
```html
<!-- 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:
```html
<!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:
![HTML Extension](https://dev-to-uploads.s3.amazonaws.com/i/bocwnzfkazxs3ih2gkio.jpg)

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](https://dev-to-uploads.s3.amazonaws.com/i/gu76i5t40sno2ryou0r7.jpg)

>Before continuing further, you can access our full code in the following link: [here](https://github.com/fire-ui/login-register-template/blob/master/index.html)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3pmy7g8zg19dfh2w60h.png)
 

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
```html
<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:
```html
<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:
```css
#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; }
}
```

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

Don't forget to give a star on [GitHub](https://github.com/fire-ui/fire-ui) if you like this article!

## Happy Coding! 🎉

You may also like these articles:
{% link https://dev.to/stanleyowen/todo-application-an-open-source-and-easy-to-use-web-application-f55 %}

{% link https://dev.to/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1 %}

{% link https://dev.to/stanleyowen/build-an-awesome-profile-page-with-fire-ui-4eaj %}