Home
CSS
Forms

Creating a Registration Form with Labels in HTML and CSS

Registration Form | Coding Zemigle

Creating a registration form is one of the essential skills for any web developer. It involves a combination of HTML for the structure and CSS for the styling. In this article, we’ll walk through the process of building a registration form with clear labels, ensuring a user-friendly experience.

Registration forms are crucial for websites that require user interaction, such as signing up for newsletters, accessing member-only content, or creating accounts for online services. A well-designed registration form not only looks professional but also guides the user through the process smoothly, reducing the chances of error.

Step 01: Setting up the HTML Structure

The first step in creating our registration form is to build the HTML structure. This includes the form itself and the input fields for the user's details.

✲    index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Login Form | Coding Zemigle</title>
</head>
<body>
  <form action="/login" method="post">
    <div class="container">
      <h2>Registration Form</h2>
      <label for="name">Full Name</label>
      <input type="text" name="name" id="name" required>
      <label for="email">Email Address</label>
      <input type="email" name="email" id="email" required>
      <label for="phone">Phone Number</label>
      <input type="tel" name="phone" id="phone" required>
      <label for="password">Password</label>
      <input type="password" name="password" id="password" required>
      <label for="password">Confirm Password</label>
      <input type="password" name="password" id="confirm-password">
      <button type="submit">REGISTER</button>
      <div class="registration">Already have an account › <a href="#">Login</a></div>
    </div>
  </form>
</body>
</html>



The selector resets the margin and padding for all elements, and the box-sizing property ensures consistent box models. The body is styled to center the form on the page and set a background color. A white background, padding, border-radius, and box-shadow are applied to create a card-like appearance. Centered text with margin for spacing. Margin-bottom for spacing between fields. Displayed as blocks with margin for spacing. Full-width inputs with padding, borders, and rounded corners. A green background, padding, and rounded corners with hover effects for interactivity.

Step 2: Styling the Registration Form

Next, we'll add CSS to style our form. This will make it visually appealing and improve the user experience.

✲    style.css
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;500;600;700&display=swap");

body{
  font-family: "Roboto", sans-serif;
  background: #225560;
  display: flex;
  justify-items: center;
  align-items: center;
  padding: 20px;
  height: 100%;
  margin: 0;
}

form {
    display: flex;
    flex-direction: column;
}

.container{
  background: #FFF;
  border-radius: 10px;
  padding: 10px 25px 40px 25px;
  width: 345px;
  position: absolute;
  top: 50%; /* adjust accordingly */
  left: 50%;
  transform: translate(-50%, -50%);
}

h2{
  text-align: center;
  font-size: 30px;
  margin-bottom: 40px;
}

label{
  display: block;
  margin-bottom: 10px;
}

input{
  padding: 15px;
  margin-bottom: 35px;
  font-size: 15px;
  width: 90%;
}

button{
  background: #225560;
  width: 100%;
  padding: 17px;
  border: none;
  margin-top: 10px;
  border-radius: 3px;
  font-size: 18px;
  color: #FFF;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.registration{
  text-align: center;
  margin-top: 30px;
}

.registration a{
  color: royalblue;
  text-decoration-line: none;
}



With this simple yet effective registration form, you can collect user information seamlessly. The combination of HTML for structure and CSS for styling ensures that the form is both functional and visually appealing.

Feel free to customize the styles and extend the form with additional fields as needed for your specific use case. Happy coding!