Registration Form with HTML & CSS #1
Tags: html, webdev, beginners, tutorial
Published: 2020-08-10 09:38:02

---
title: Registration Form with HTML & CSS #1
published: true
canonical_url: https://thecodeangle.com/registration-form-with-html-css-1/ 
description: 
tags: HTML, webdev, beginners, tutorial
cover_image: https://res.cloudinary.com/dz4tt9omp/image/upload/v1596415821/registration.jpg
---

> _What we know matters but who we are matters more._
> _-Brené Brown_


##Introduction

Today we are going to build a simple registration form. The requirements for this tutorial is just a basic knowledge of  **Html** and **CSS** as well as a **code editor**.

A Preview of What We Are Going To Build:

![Form Gif]
(https://media.giphy.com/media/McDd4XN5HckKc1CVhg/giphy.gif)

Let us get started.


##Code Structure

First, in our code editor, we are going to create a new folder. We can call the folder form. Inside that folder, we will create two files. The **index.html** and the **style.css**.

###HTML

In the **index.html** file, we should have a bare bone structure similar to what is shown below:

{% gist https://gist.github.com/desoga10/d09b7892e75228c44a63a34f7e11d2da %}

Next, I am going to add the tags to the **HTML** page.

{% gist https://gist.github.com/desoga10/477d53da131a4ec62b9cf5f4881b2a7a %}

From the code above, we started by adding a form tag. In the form tag, there are four label tags and a button tag. Each input tag is wrapped in a label.

These labels are very important because they tell the user what information to provide in the form element.

This is all we need for the **Html** code and our form should look something like this:

<img src="https://res.cloudinary.com/dz4tt9omp/image/upload/v1596991305/html.png" alt="Image">

Yes, that is ugly. Time for some **CSS**!

###CSS

We start in the **style.css** file by adding colour to the background of the page and also styling the form tag:

{% gist https://gist.github.com/desoga10/0578c0ec8a67eb5bcc5853f8e8bfadd0 %}

_The Outcome:_

<img src="https://res.cloudinary.com/dz4tt9omp/image/upload/v1596991585/css1.png" alt="Image">

Furthermore, we need to style the labels and input. For the label, we will be adding **letter-spacing**, **color**, **margin**, **padding** and a positional direction for the label and the texts that will be within it.

{% gist https://gist.github.com/desoga10/fc272c22bf7580750526feef2cf748ce %}

_The Outcome:_

<img src="https://res.cloudinary.com/dz4tt9omp/image/upload/v1596991641/css2.png" alt="Image">

Finally, we will be styling the line for the input field and the button.

To get the line effect, we need to set the height in the .line-box class. This will make the line visible. Also, we will be adding some transition effect when the input field is active.

The design for the button class is straight forward, We added a **hover color**, a **background color**, **padding** and **border-radius**. We also set the display to inline-block, this allows us to set padding to the side of the button.

{% gist https://gist.github.com/desoga10/38ae8b85b02ef828fa8730ca2445f698 %}

_Final Results:_

![Form Gif]
(https://media.giphy.com/media/McDd4XN5HckKc1CVhg/giphy.gif)

###Conclusion

I know this is a very basic tutorial, but I hope you can learn one or two things from it.

Here is the link to the repo on <a href="https://github.com/desoga10/registration-form">Github</a>.

Support me by subscribing to my newsletter <a href="http://eepurl.com/gZ-jJH" target="_blank">here</a>.