Simple Registration Form Using HTML & CSS (Beginner Friendly Guide)

Introduction 

When we start learning web development, one of the most exciting milestones is building real-world projects. Among the first practical projects we usually create is a registration form. It helps us understand how HTML structures data and how CSS enhances the user interface.

In this article, we are going to build a simple and beginner-friendly registration form using HTML and CSS. The best part? We will keep everything clean, easy to understand, and practical so that anyone—even beginners—can follow along without confusion.


Why Should We Learn to Build Forms?

Forms are one of the most important elements in web development. Almost every website we use today includes some type of form—whether it’s for login, registration, feedback, or contact.

By learning how to build a form, we:

  • Understand how user input is collected
  • Learn different input types like text, email, radio buttons, and checkboxes
  • Practice structuring layouts using HTML
  • Improve design skills using CSS

This simple project will strengthen our fundamentals and prepare us for more advanced concepts in the future.


Project Overview

In this project, we will create a registration form that includes:

  • Name input field
  • Email input field
  • Mobile number field
  • Gender selection (radio buttons)
  • Hobbies selection (checkboxes)
  • Submit button

We will first create the structure using HTML and then style it using CSS to make it visually appealing.


Step 1: HTML Structure (index.html)

Let’s start by writing the HTML code. This defines the structure of our form.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Registration form</title>
    <link rel="stylesheet" href="./login.css" />
  </head>
  <body>
    <form>
      <div class="title">Registration Form</div>
      <div class="inputContainer">
        <label>Name</label>
        <div><input type="text" placeholder="Enter Name" /></div>
      </div>
      <div class="inputContainer">
        <label>Email</label>
        <div><input type="email" placeholder="Enter Email" /></div>
      </div>
      <div class="inputContainer">
        <label>Mobile Number</label>
        <div><input type="number" placeholder="Enter Mobile Number" /></div>
      </div>
      <div class="genderContainer">
        <label>Gender : </label>
        <input type="radio" name="gender" /><span>Male</span>
        <input type="radio" name="gender" /><span>Female</span>
      </div>
      <div class="genderContainer">
        <label>Hobbies : </label>
        <input type="checkbox" /><span>Signing</span>
        <input type="checkbox" /><span>Dancing</span>
        <input type="checkbox" /><span>Story Telling</span>
      </div>
      <button class="btnSubmit">Submit</button>
    </form>
  </body>
</html>

Understanding the HTML Code

Let’s break down what we’ve done:

  • We used a <form> tag to wrap all input elements
  • Each field is grouped using a container (inputContainer)
  • Labels help users understand what input is required
  • We used different input types:
    • text for name
    • email for email validation
    • number for mobile input
  • Radio buttons are used for selecting one option (gender)
  • Checkboxes allow selecting multiple hobbies
  • A submit button is added to complete the form

This structure ensures our form is clean and easy to expand later.


Step 2: CSS Styling (index.css)

Now let’s style our form to make it look modern and user-friendly.

body {
  background-color: rgb(238, 238, 243);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
form {
  background-color: white;
  border-radius: 10px;
  border: 1px solid rgb(226, 226, 235);
  padding: 20px;
}
.title {
  color: black;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}
label {
  font-size: 14px;
  font-weight: 600;
}

.inputContainer input {
  padding: 8px;
  border-radius: 5px;
  outline: none;
  border: 1px solid rgb(206, 206, 206);
  width: 95%;
  margin-bottom: 10px;
}
.inputContainer input::placeholder {
  font-size: 12px;
}
.genderContainer {
  margin-bottom: 10px;
}
.genderContainer span {
  font-size: 14px;
  font-weight: 500;
}
.btnSubmit {
  width: 100%;
  border: none;
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
}


Understanding the CSS

Here’s what we achieved using CSS:

  • We centered the form using Flexbox
  • Added a clean white background with rounded corners
  • Styled inputs for better readability and spacing
  • Improved typography for labels and titles
  • Designed a simple and attractive submit button

This styling gives our form a professional look while keeping it beginner-friendly.


Key Takeaways from This Project

By completing this project, we have learned:

  • How to structure a form using HTML
  • How to use different input types effectively
  • How to group and organize form elements
  • How to style layouts using CSS
  • How to create a clean and user-friendly UI

These are essential skills that we will use in almost every web development project.


Tips to Improve This Form

Once you understand the basics, we can enhance this project further by:

  • Adding form validation using JavaScript
  • Making the form responsive for mobile devices
  • Using icons for better UI
  • Connecting the form to a backend (Node.js / MongoDB)
  • Adding hover effects and transitions


Conclusion

In this tutorial, we successfully built a simple registration form using HTML and CSS while understanding each

step clearly. By combining basic HTML structure with clean CSS styling, we created a form that is both functional and

visually appealing. As beginners, projects like this help us gain confidence and strengthen our core web development

skills. Instead of just learning theory, we are applying concepts in a practical way, which is the most effective method

to grow as developers.

Going forward, we can improve this project by adding validation, responsiveness, and backend integration.

Step by step, these small projects will help us build complete full-stack applications.

Keep practicing, keep building, and most importantly—keep learning 🚀


📚 Explore Full Series

Continue learning step by step from our complete roadmap click the link below:
👉 HTML & CSS Learning Series


What’s Coming Next?

In the next part of our HTML & CSS series, we will build a card design project. This will help us understand
layout design, spacing, and styling in a more practical way.

By continuing this series, we will gradually move from beginner to intermediate level with strong fundamentals.

Follow for More

If you’re interested in learning HTML, CSS, React, and MERN Stack,

stay connected for more beginner-friendly tutorials and real-world projects.



Comments

Post a Comment

Popular posts from this blog

Complete HTML Layout Tutorial for Beginners (With Examples & Explanation)

Image
Introduction to HTML Layout If you are starting your web development journey, understanding the HTML layout structure is the first and most important step. Every website you see on the internet is built using HTML as its foundation, and learning how the layout works will help you build structured and professional web pages. HTML layout defines how content is arranged on a webpage. It helps developers organize text, images, links, and other elements in a meaningful way so that users can easily navigate and understand the content. In this tutorial, we will learn: What HTML is Basic HTML structure Explanation of each element Important meta tags What is HTML? HTML (Hyper Text Markup Language) is the standard language used to create web pages. It provides the basic structure of a website, which is then styled using CSS and made interactive using JavaScript. 🔹 HyperText HyperText refers to text that contains links. These links allow users to move from one webpage to another or nav...
Read more

HTML Tags and Attributes Explained (Beginner Guide with Form Examples)

Image
Introduction to HTML Tags and Attributes If you are starting your journey in web development, understanding HTML tags and attributes is the first and most important step. These are the core building blocks of every webpage, especially when creating forms like registration forms, login forms, and signup forms. Every website you see on the internet is made using HTML elements, and tags are used to define those elements. Attributes enhance those elements by providing additional functionality and information. Without understanding tags and attributes, it becomes difficult to build structured and interactive web pages. In this tutorial, we will learn: What HTML tags are What HTML attributes are Types of HTML tags Essential HTML tags used in forms What Is an HTML Tag? An HTML tag is a keyword enclosed in angle brackets ( < > ) used to define the structure and content of a webpage. Tags tell the browser how to display content such as headings, paragraphs, images, links, and mo...
Read more

Most Commonly Used HTML Tags (Beginner-Friendly Guide)

Image
HTML (HyperText Markup Language) is the foundation of every website we see on the internet. Whether we are building a simple webpage or a complex web application, HTML is the starting point that helps us structure content effectively. In this article, we will explore the most commonly used HTML tags, understand how they work, and learn the difference between block-level elements and inline elements. This guide is designed especially for beginners who want to build a strong foundation in web development. By learning these essential concepts, we can improve our coding skills, write cleaner and more organized code, and create well-structured, professional-looking web pages. It also helps us understand how browsers render content and how different elements behave in real-world projects. Why Should We Learn HTML Tags? Before diving into the types of elements, let’s understand why learning HTML tags is important. When we understand HTML properly: We can create well-structured web pages ...
Read more