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.

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 and are 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.

#programming #css #html

Design a Cool Registration Form Using HTML & CSS
8.85 GEEK