Enjoying this content? Then you'll love my Chrome Extension WittCepter!

Create a Login Form Using HTML and CSS

Author: WittCode

Created: 3/17/2024

Create a login form using HTML and CSS. We will learn about flexbox, importing external CSS files, and more.

Project Structure
create-a-login-form-using-html-and-css
index.html
styles.css
space.jpg

Below is what we are going to build using HTML and CSS.

Boilerplate HTML Setup and Stylesheet Imports

First lets write the boilerplate HTML and CSS imports.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Page</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'>
</head>
<body>

</body>
</html>

The first link element is for our stylesheet. The second link element is for an external library that allows us to use icons. We need to specify the rel attribute as stylesheet as these are stylesheets (rel is short for relationship).

Writing the HTML Form

Now lets write the HTML form. An HTML form is used to collect user input.

index.html
<form action="YOUR_ENDPOINT" method="post">  
  <div id="login-container">
    <!-- Title and Logo -->
    <i style="font-size: xxx-large;" class='bx bxs-planet'></i>
    <h1>Login</h1>

    <!-- Username and password -->
    <input class="login-input" type="text" placeholder="Username" name="username" required>
    <input class="login-input" type="password" placeholder="Password" name="password" required>

    <!-- Submit button -->
    <button class="login-input" type="submit">Login</button>

    <!-- Switch to register -->
    <p>Don't have an account? <a href="#">Register</a></p>
  </div>
</form>

Create a form that sends POST requests to the provided endpoint. The action attribute specifies where to send the form data when it is submitted.
Create a container div, title, logo, and username/password inputs.
Create a submit button. Setting the type attribute on a button to submit will submit the form data when the button is clicked.
Create a register link. We can place the anchor tag inside the paragraph tag as the anchor tag is an inline element while the paragraph tag is a block element.

Writing the CSS

Now lets style our login page. First lets import the font we will be using.

styles.css
@import url('https://fonts.googleapis.com/css?family=Rubik+Moonrocks');

The @import rule allows us to import a style sheet into another style sheet. Here, we are using it to import a Google font. Now lets create some variables for the colors we will be using.

styles.css
:root {
  --primary: white;
  --secondary: rgba(255, 255, 255, 0.5);
  --tertiary: black;
}

Here we create 3 global CSS color variables by using the :root selector. Now lets create a simple CSS reset to standardize some element properties.

styles.css
* {
  color: var(--primary);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Rubik Moonrocks;
}

Now lets style our body element. We will give it a background image and make it so all its children are centered horizontally and vertically on the screen.

styles.css
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url('./space.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
  background-attachment: fixed;
}

Use flexbox to center the children of the body element. This includes display, flex-direction, etc.
Set the min-height to 100vh so that our body spans the entire view.
Set the background image to take up the entire body element.

Now lets style our login container. We will give it a blurred background and position its child elements using flexbox.

styles.css
#login-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background-color: transparent;
  backdrop-filter: blur(10px);
  border: 1px solid var(--secondary);
  width: 450px;
  height: 550px;
  padding: 30px;
  margin: 20px;
  border-radius: 5px;
}

Use flexbox to center the child elements horizontally and space them out evenly vertically.
Give it a blurred background using the backdrop-filter property with the blur function. The backdrop-filter property lets us apply graphical effects behind an element.
Set its width, margins, padding, etc.
Round its edges using the border-radius property.

Now lets style our input elements to have rounded edges, a border, and some padding.

styles.css
.login-input {
  border-radius: 20px;
  border: 1px solid var(--secondary);
  width: 100%;
  padding: 10px;
}

Lets give our username and password inputs some more specific styling. Including a different color, background color, and some transitions.

styles.css
input[type=text], input[type=password] {
  color: var(--primary);
  background-color: transparent;
  transition: border-color .2s linear;
}

Now lets change the color of the placeholder text inside the inputs. The placeholder text describes the value that the input field expects.

styles.css
input::placeholder {
  color: var(--secondary)
}

Now lets add some styles to our input elements when they are in focus or being hovered over.

styles.css
input[type=text]:focus, input[type=text]:hover,
input[type=password]:focus, input[type=password]:hover {
  outline: none;
  border-color: var(--primary);
  transition: border-color .2s linear;
}

Finally, lets style our submit button. We will give it some coloring and transitions.

styles.css
button {
  color: var(--tertiary);
  transition: background-color .2s linear, color .2s linear;
}

button:hover {
  cursor: pointer;
  background-color: var(--secondary);
  color: white;
  transition: background-color .2s linear, color .2s linear;
}

Conclusion

But there we go! If you enjoyed this article please consider supporting me by downloading my chrome extension WittCepter from the chrome web store or checking out my YouTube channel WittCode!