Creating a Registration form in HTML using CSS.

Registration form using HTML and CSS

In this tutorial of HTML/CSS we will create a Basic Registartion form and will give some design to it using CSS.

Before starting this tutorial I'm assuming that you already have some basic knowledge of HTML tags and CSS properties.

If you want to see Registration form look / design you can click here.

So, Let us proceed to our HTML code first.

HTML CODE

<html>

<head>
    <title> REGISTRATION FORM </title>
    <link rel="stylesheet" href="Registration Form.css">
</head>

<body>
    <div class="Registration">
        <h2> REGISTER HERE..</h2>
        <div class="container">
            <form>
                <img class="avatar" src="I80W1Q0.png"  
            alt="avatar image">
                <br>
                <br>
                <label style="text-align: left;">Full Name: 
             </label><br>
                <input type="text" name="user name" 
                    placeholder="Name.." required>
                <br>
                <label>Email:</label> <br>
                <input type="text" name="email address"  
                placeholder="Email Address.." required>
                <br>
                <label>Date of Birth:</label><br>
                <input type="date" name="DOB" required><br>
                <br>

                <label>Country: </label> <br>
                <select name="country">
                   <option value="select" disabled selected>
                 --Select Country--</option>
                    <option value="India">INDIA</option>
                    <option value="USA">USA</option>
                    <option value="Canada">CANDA</option>
                    <option value="UK">UK</option>
                    <option value="ENGLAND">ENGLAND</option>
                </select>
                <br>
                <label>Phone Number:</label><br>
                <input type="tel" name="Phone Number" 
             placeholder="Enter Phone Number..">
                <br>
                <label>Password: </label> <br>
                <input type="password" name="user password" 
                 placeholder="Password" required>
                <br>
                <label>Confirm Password: </label> <br>
         <input type="password" name="confirm user password" 
             placeholder="Confirm Password" required>
                <br>
                <input type="checkbox" required> I agree to 
                Terms & Conditions<br>
                <input type="Submit" value="REGISTER">
        </div>
        </form>
    </div>
</body>
</html>

Now, basic struture of our Registration form is ready..

Let us apply some CSS Properties to give it some fancy style.

CSS Code:

* {
  padding: 0px;
  text-align: center;
}
.container {
  padding: 16px;
}
h2 {
  margin-top: 4px;
  font-family: -apple-ystem, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  vertical-align: middle;
}
.Registration {
  margin: auto;
  width: 550px;
  margin-top: 30px;
  margin-bottom: 30px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0.2);
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="date"],
select {
  width: 400px;
  border: none;
  padding: 12px 20px;
  text-align: left;
  margin: 5px 0px;
  display: inline-block;
  border: 1px solid blue;
  border-radius: 5px;
}
input[type="Submit"] {
  width: 300px;
  padding: 14px 20px;
  background-color: #4caf50;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  color: #000;
  font-weight: bold;
  font-variant: small-caps;
  border-radius: 1em;
}
input[type="Submit"]:hover {
  opacity: 0.8;
}

div label {
  font-weight: bolder;
  padding: 3px;
  margin: 0px;
  text-align: left;
}
select:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus {
  border: 2px solid blue;
}
input[type="radio"] {
  margin-left: 10px;
  display: inline-table;
}

So, now our HTML code and CSS styling code has been Completed. Let us see what we have made..

Result:

To download Source code. Click here..

Registration form Source Code (Github): Click here

Live Example below:

Credits: Codepen

See the Pen Registration Form HTML, CSS. by Abhishek Raj (@_abhishek_raj_) on CodePen.