Online-Tools, Blogs, Social Media, Customer Environments, Webshops and more usually require an account.
You want to create a Website with customer accounts or a webshop or a blog or any webproject where you need a customer system? I will show you how to create a Login/Sign up Form developped with HTML, CSS and Javscript.
The entire development process of the login form is also shown in a Youtube video of mine. The language of the video is in German. However, you can follow the instructions step by step without the speaker.
Agenda:
- Install Bootstrap 5 or higher version to your project
- Create the layout and design of the login page
- Create an HTML — Form with inputs and submit button
- Copy & Paste the login page and change content to sign up
- Dark Theming
1. Install Bootstrap 5 or higher version to your project
Bootstrap is an open source front-end framework that can be used to create websites and web applications. Mark Otto and Jacob Thornton developed Bootstrap at Twitter to improve the consistency of the tools used and reduce maintenance. Bootstrap offers a lot of pre-built component for web programs like inputs, buttons, grid layouts and much more. It also supports better responsive behavior of your web project’s layout. Responsive design describes that your software looks coherent on all devices (pc, notebooks, mobile or even tv and smart watch).
How to install:
Go to website of Bootstrap and integrate the current version to your project. You can click on “Read the docs” or on “docs” in the navigation to enter the documentation of bootstrap. In the first sections (normally ‘Introduction’ and ‘Download’) you will find well described the process of installation. There is a content deliver network link for plain html usage, commands for install via the node package manager (npm) or yarn for node.js applications, composer installation and more.
Bootstrap CSS:
You will need to integrate the bootstrap css file to get all css classes for bootstrap. It will change the normal font of text, add designs for layouts, components and much more. It is not necessary to integrate all css files of bootstrap individually. There is a bundled version that has also been reduced in formatting to allow faster loading of the file, called bootstrap.min.css
Importing this file is enough to use all the design features of bootstrap
Bootstrap Javascript:
You will also need to integrate/import the bootstrap js files to get the belonging behaviors of bootstrap layouts and components. Again, it is not necessary to import all individual files. However, there are 2 main files that are required. One is the bootstrap.min.js and popper.min.js. Bootstrap often offers with different versions a bundled version called bootstrap.bundle.min.js.
It is sufficient to import the bundle file or the two individual files to be able to use all desired javascript features of bootstrap.
2. Create the layout and design of the login page
For the login page you need a bunch of bootstrap classes to create a white box in the center of the page. The box has a shadow to create some 3d floating effect and a logo inside. The Background has a linear gradient color from white to some sort of grey.
Let’s start with creating some html div tags for the layout. First of all you need a div around the login card to put the white box with logo in the middle. Lets give this div a class attribute: class=”page-content”.
Next your use the first time a bootstrap class name for a div for getting the bootstrap’s css rules. Lets create another div inside our page content and give it the class attribute: class=”container”. Containers put their content in a kind of center, which balances the distance to the edges on the left and right side. You can read more about Containers on the getbootstrap website inside the docs.
Next you create another div inside the container with a bootstrap class atribute: class=”col-6”. It creates a column of size 6 with a total possible size of 12, so it means that you don’t want a width of 100% but pretty much half. Instead of setting the css rule “width” to 50%, I prefer to use the col class from bootstrap, as this brings responsive properties with it.
Now you already have the layout that encloses the login box. Next you have to create a white box with the actual content. Also for this you can create a div and assign an own css class as attribute: class=”auth-card”. As long as there is no content in this box, it will have a height of 0px and will not be visible. For testing you can insert a simple button. If it can be a button with bootstrap design, then it needs the class attribute class=”btn btn-primary”. In HTML the result should look something like this:
If you look at the result in the browser, you will see that it still doesn’t look like the desired result. This is due to the missing css rules that have a huge impact on design. There are 2 ways to create css classes and set their rules. On the one hand you can create a css file (e.g. styles.css) or use a style tag in the html code. I always recommend to create a css file and create and manage the rules there. You have named 2 css classes in the layout that do not exist yet (page-content & auth-card).
Page content is the outermost div, which is only there to put the white login box in the middle of the screen. For this, the enclosing div must have a width of 100% as well as a minimum height of 100vh (equivalent to 100% of the displayed screen height). If you want you can also create a background with a gradient from light grey to white. This can be done with a linear gradient, 45deg from bottom left to top right and 2 color codes.
Auth card is the white box in which the login form will be located. So that the box is really white, you first need the background-color css rules and set the value to white or #ffffff. To achieve a 3d floating effect you can give a div a dark shadow. Such a shadow needs values like distance, size, color, intensity and so on. If you want to create your own shadow, I recommend you to search for an online box-shadow generator and use it to get a ready css rule. As default you can use the values I used (see image below). A border-radius provides rounded corners for the login box. This makes the whole thing look more friendly and modern. So that the example button does not stick directly to the edge of the box, you can give the auth card a padding to gain some distance. My styles.css class:
In my example I put a logo in the box, a headline and 2 buttons for alternative login methods. You can of course decide yourself what content you want to put in this login box. In the next pictures you can see my auth card in html, the css rules and the design result:
3. Create an HTML — Form with inputs and submit button
Now you need the actual login form with a username and password. In this example I use a HTML form, which is connected to a submit button, so that you can parse the username and password to another page or directly to REST api or any service using url for communication. Even if you do the login check with Javascript (also react.js, next.js or node.js) I always recommend to use a form.
When creating the <form> tag we assign two more attributes: action — this specifies a url to which the username and password will be sent, method — here there is the possibility to send the username and password to the end of the URL as Path parameters using GET, or as POST in the header. In my example I send data to the same url “/” and as method I always use POST for login.
Inside the form we need 2 inputs and a submit button. For the inputs I use the type “text” for the username and “password” for the password, which ensures that the input of the user is displayed with dots, so that one can not read the password. Don’t forget to add the bootstrap classes for inputs (“form-control”). You can as always read that in the docs of Bootstrap. I also put the two inputs in some divs with spacing so that it gets a booter look and feel. A small feature (it’s not necessary) can be a div under the username with a small description text that the user can enter his username or his email for login.
Last you can create a button for the Login. Make sure that you don’t create an attribute for type with the value “button”. Then the form can not be submitted with that button. You can just create it without the type attribute or use “submit” as value.
Here is the current result:
In addition, one usually still offers the function “password forgotten”. This can be built as text underneath. The word password you make best as a link, so that one can click on it to get to the page where you can reset the password. I don’t show that in this post though. Also missing is a link for creating a new account if you don’t already have one. This can also be done with a text, but Sign Up should be a clickable link. Both texts can be inside or outside the form, because a link has no influence on the execution of the form.
With some addition css we get some nice looking login page:
4. Copy & Paste the login page and change content to sign up
For the Sign Up page you can basically just copy the login page and paste it inside a new page for sign up. You need to change the Texts of the Buttons from “Login with Google” to “Sign up with Google” and so on. The username input can be the same. Normally you have two password field while creating an account so you can easily copy and paste the password input and name it something like “password repeat”. The Login Button needs to be changed to “Sign up”. You can delete the text for “Forgot password” cause in account creation you can’t forget a password when no account already exists. The “No account yet? Sign Up”. Can be changed to something like “Back to Login” and link it to the login page so that the user can jump back to login when he remembers that he already has an account. And thats it!
Make also be shure, that you change the url in the form’s action depending on what kind of “backend” you use to verify the user or create an account for the user.
5. Dark Theming
The dark theming needs to be done with all the css rules you have created. It is a good practice to split all color and background rules in different css files. You can then create a button for switching the import of the css for light theme and also for dark theme.
It would be also possible to use variables from database or from the cookies of the user or anything where you stored that the user want’s to have light or dark theme. With that variable you can then decide if the light.css or dark.css shell be used.
Dark theming is not that easy if you want to make it really usefull for peoples eyes and lower power usage of monitors.
You can find some good example and declaration of “How to dark theme” on the material design’s website:
material.io
Thank you for reading my post and don’t forget to follow me ❤
You can find my complete code also on GitHub:
GitHub-Futuric
Best regards,
and lucky coding,
Niklas — Futuric
