Photo By unsplash.com
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!
Table of Contents
- 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
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 thebodyelement - 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">☰</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; }
}
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:
Top comments (6)
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!
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.
A user-friendly and reliable CSS library
Fire UI
Table of Contents
Quick start
There are several quick start options available:
git clone https://github.com/fire-ui/fire-ui.gitforkon this repository and typegit clone https://github.com/<Your username>/fire-ui.gitnpm i @fire-ui/fire-uiBug 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!
LICENSE
Best regards,
Justin Maximillian Kimlim
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 👊
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 :)
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
Thanks for share ;)