Create a Pure CSS Sign-Up or Registration Form Using HTML

In this tutorial, you will learn how to create a simple and responsive registration form using only HTML and CSS. This form allows users to register on your website and can be easily adapted for different purposes, such as educational, e-commerce, or membership sites.

Introduction

User registration forms are commonly used on websites to collect and store user information. They help users create an account to access additional features or content.

In this guide, you will learn step by step how to create a clean and functional registration form using only HTML and CSS.

Before starting, make sure you have:

A basic understanding of HTML and CSS
A code editor such as Visual Studio Code or Sublime Text

Step 1: HTML Code

Create a new file named index.html. This file will contain the structure of the sign-up form. Copy and paste the following code into your HTML file and save it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sign Up / Registration Form </title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="center">
          <h1>Register</h1>
          <form method="POST" action="">
              <div class="txt_field">
                  <input type="text" name="name" required>
                  <span></span>
                  <label>Name</label>
              </div>
              <div class="txt_field">
                  <input type="email" name="email" required>
                  <span></span>
                  <label>Email</label>
              </div>
              <div class="txt_field">
                  <input type="password" name="password" required>
                  <span></span>
                  <label>Password</label>
              </div>
              <div class="txt_field">
                  <input type="password" name="cpassword" required>
                  <span></span>
                  <label>Confirm Password</label>
              </div>
              <input name="submit" type="Submit" value="Sign Up">
              <div class="signup_link">
                  Have an Account ? <a href="#">Login Here</a>
              </div>
          </form>
      </div>
  </div>
  </body>
</html>

Explanation

The <form> element holds all the input fields.
Each input field uses the required attribute to ensure users cannot leave it blank.
The form includes inputs for name, email, password, and confirm password.
The “Login Here” link provides an option for users who already have an account.

Step 2: CSS Code

Next, create a file named styles.css. This file will contain the styling rules for the registration form. Copy and paste the following CSS code exactly as it is.

body{
  margin: 0;
  padding: 0;
  font-family: Roboto;
  background-repeat: no-repeat;
  background-size: cover;
  background: linear-gradient(120deg, #007bff, #d0314c);
  height: 100vh;
  overflow: hidden;
}
.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 29vw;
  background: white;
  border-radius: 10px;
}
.center h1{
  text-align: center;
  padding: 0 0 20px 0;
  border-bottom: 1px solid silver;
}
.center form{
  padding: 0 40px;
  box-sizing: border-box;
}
form .txt_field{
  position: relative;
  border-bottom: 2px solid #adadad;
  margin: 30px 0;
}
.txt_field input{
  width: 100%;
  padding: 0 5px;
  height: 40px;
  font-size: 16px;
  border: none;
  background: none;
  outline: none;
}
.txt_field label{
  position: absolute;
  top: 50%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
}
.txt_field span::before{
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  width: 0px;
  height: 2px;
  background: #2691d9;
  transition: .5s;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
  top: -5px;
  color: #2691d9;
}
.txt_field input:focus ~ span::before,
.txt_field input:Valid ~ span::before{
  width: 100%;
}
.pass{
  margin: -5px 0 20px 5px;
  color: #a6a6a6;
  cursor: pointer;
}
.pass:hover{
  text-decoration: underline;
}
input[type="Submit"]{
  width: 100%;
  height: 50px;
  border: 1px solid;
  border-radius: 25px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
input[type="Submit"]:hover{
  background: #2691d9;
  color: #e9f4fb;
  transition: .5s;
}
.signup_link{
  margin: 30px 0;
  text-align: center;
  font-size: 16px;
  color: #666666;
}
.signup_link a{
  color: #2691d9;
  text-decoration: none;
}
.signup_link a:hover{
  text-decoration: underline;
}
.HomeAbout{
  width: 100vw;
  height: 25vh;
}

Explanation

The body uses a linear gradient background and removes default margins and padding.
The .center class positions the form at the center of the screen.
Each input field has an animated label that moves upward when the field is active or filled.
The submit button changes color on hover to give a clear interaction effect.
The form layout is responsive and uses viewport width and height units for scaling.

Final Output

When you open the HTML file in a web browser, you will see a simple and responsive registration form with clean animations and a gradient background.

Create a Pure CSS Sign-Up or Registration Form Using HTML

Conclusion

By following these steps, you have created a functional and visually clear registration form using only HTML and CSS.

This project demonstrates how to combine HTML structure with CSS styling to design a modern, user-friendly interface without using JavaScript. You can modify the colors, font, and layout to match your website’s design.

This basic form can serve as the starting point for building more advanced registration systems in the future.

Movies

TV Shows

Music

Celebrity

Scandals

Drama

Lifestyle

Health

Technology

Company

Movies

TV Shows

Music

Celebrity

Scandals

Drama

Lifestyle

Health

Technology

Company

Top 5 This Week

Related Posts

Create a Pure CSS Sign-Up or Registration Form Using HTML

Introduction

Step 1: HTML Code

Explanation

Step 2: CSS Code

Explanation

Final Output

Conclusion

LEAVE A REPLY Cancel reply

Popular Articles

About us

Latest Articles

Most Popular