In this article, I will be guiding you through how to design a cool HTML CSS Dating Registration Form step-by-step from scratch like in the screenshot below.
Just so you are aware, I will be only showing you the design of the registration form using HTML and CSS.
In order to get the most out of this blog, you should have knowledge of basic HTML and CSS. By the end of this article, you will be able to understand and build your own cool registration form! Let’s get cracking!
Step 1: Download the Start Folder
I have already created a folder called Start and inside that folder, I have created an HTML file and a CSS file. You can download the folder here to follow along.
✅ Recommended:
Web Design for Beginners: Real World Coding in HTML & CSS
Step 2: Initialize the Form
The form element can be used to initialize a form that could be a contact, register or login form in any HTML page. I am adding a form element inside the body element in your HTML page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Register Form Start</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="signup-form" action="/register" method="post">
</form>
</body>
</html>
I have added three attributes to the form start tag, which are class, action and method.
As you know, class attributes can be used to target an element in CSS or JavaScript normally referred to as selectors.
The purpose of the action attribute containing a URL or any server-side file name is to tell it to post the form values to that URL or the file name when submitting the form. The method attribute tells which HTTP method the browser should use to submit the form.
✅ Recommended:
Build Responsive Real World Websites with HTML5 and CSS3
Step 3: Form Structure
Once we have the form element in place, I add three more DIVs inside it representing the header, body and footer of the form element like in the code below.
<form class="signup-form" action="/register" method="post">
<!-- form header -->
<div class="form-header">
</div>
<!-- form body -->
<div class="form-body">
</div>
<!-- form footer -->
<div class="form-footer">
</div>
</form>
✅ Recommended
Complete Flexbox Course: Learn CSS3 Flexbox in 2020
Step 4: Form Header
Add an H1 element inside the .form-header element.
<!-- form header -->
<div class="form-header">
<h1>Create Account</h1>
</div>
Now, we need to add some CSS code for .form-header in our CSS file like below.
@import url('httpss://fonts.googleapis.com/css?family=Roboto');
body {
background:linear-gradient(to right, #78a7ba 0%, #385D6C 50%, #78a7ba 99%);
}
.signup-form {
font-family: "Roboto", sans-serif;
width:650px;
margin:30px auto;
background:linear-gradient(to right, #ffffff 0%, #fafafa 50%, #ffffff 99%);
border-radius: 10px;
}
.form-header {
background-color: #EFF0F1;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.form-header h1 {
font-size: 30px;
text-align:center;
color:#666;
padding:20px 0;
border-bottom:1px solid #cccccc;
}
I have an import statement at the top of the CSS code indicating that I am getting my favorite font from the Google font collection. If you would like to use a different font, you can go here.
The above CSS code is for the main form container and the header part of the form. At this stage, you should be able to see the header design on the browser when you refresh.
Next, let’s add some HTML form elements inside .form-body one by one.
✅ Recommended
CSS – The Complete Guide 2020 (incl. Flexbox, Grid & Sass)
Step 5: Form Body (Firstname and Lastname)
In the HTML code below, I am creating a div with the class name .horizontal-group inside .form-body. Then, I am creating two more DIVs with the same class name .form-group inside .horizontal-group. Adding an additional .left or .right class represents where the .form-group is to be on the page. There are two more HTML elements lable and input inside .form-group as you can see below.
<!-- form body -->
<div class="form-body">
<!-- Firstname and Lastname -->
<div class="horizontal-group">
<div class="form-group left">
<label for="firstname" class="label-title">First name *</label>
<input type="text" id="firstname" class="form-input" placeholder="enter your first name" required="required" />
</div>
<div class="form-group right">
<label for="lastname" class="label-title">Last name</label>
<input type="text" id="lastname" class="form-input" placeholder="enter your last name" />
</div>
</div>
</div>
Here is the CSS code for the firstname and lastname .horizontal-group.
/*---------------------------------------*/
/* Form Body */
/*---------------------------------------*/
.form-body {
padding:10px 40px;
color:#666;
}
.form-group{
margin-bottom:20px;
}
.form-body .label-title {
color:#1BBA93;
font-size: 17px;
font-weight: bold;
}
.form-body .form-input {
font-size: 17px;
box-sizing: border-box;
width: 100%;
height: 34px;
padding-left: 10px;
padding-right: 10px;
color: #333333;
text-align: left;
border: 1px solid #d6d6d6;
border-radius: 4px;
background: white;
outline: none;
}
.horizontal-group .left{
float:left;
width:49%;
}
.horizontal-group .right{
float:right;
width:49%;
}
input[type="file"] {
outline: none;
cursor:pointer;
font-size: 17px;
}
#range-label {
width:15%;
padding:5px;
background-color: #1BBA93;
color:white;
border-radius: 5px;
font-size: 17px;
position: relative;
top:-8px;
}
::-webkit-input-placeholder {
color:#d9d9d9;
}
/*---------------------------------------*/
/* Form Footer */
/*---------------------------------------*/
.form-footer {
clear:both;
}
If you refresh the page at this stage after adding HTML and CSS code into your files, you should be able to see the styles applied to the page.
Top comments (0)