Scribd
Upload
28 views9 pages

Create A Pure CSS Sign Up Form Registration Form in HTML

This document provides a step-by-step guide on creating a pure CSS sign-up form using HTML. It covers the necessary HTML structure, CSS styling, and design tips to create a responsive registration form. The tutorial is aimed at improving web development skills for users with a basic understanding of HTML and CSS.

Uploaded by

levinsiklopez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views9 pages

Create A Pure CSS Sign Up Form Registration Form in HTML

This document provides a step-by-step guide on creating a pure CSS sign-up form using HTML. It covers the necessary HTML structure, CSS styling, and design tips to create a responsive registration form. The tutorial is aimed at improving web development skills for users with a basic understanding of HTML and CSS.

Uploaded by

levinsiklopez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

7/8/25, 1:03 PM Create a Pure CSS Sign Up Form / Registration Form in HTML

Enter a blog title or keyword... 

Components Create a Pure CSS Sign Up Form / Registration Form in HTML

Create a Pure CSS Sign Up Form /


Registration Form in HTML
By Faraz - Last Updated: June 11, 2025     

Learn how to create a pure CSS sign up form or registration form in HTML with
our step-by-step guide. Improve your web development skills with our CSS form
design tips and create a responsive registration form with ease.

Join us on Telegram

Read Also
Create a Code Snippet Box with Copy Functionality

Table of Contents
1. Project Introduction
2. HTML Code
3. CSS Code
4. Conclusion
5. Preview

User login and registration systems are super helpful when we want to store
information about the users of our website. This applies to everything from
educational websites, which might store course progress and marks, to e-
commerce websites, which will store information about customers' past
purchases. 

https://www.codewithfaraz.com/content/7/create-a-pure-css-sign-up-form-registration-form-in-html 1/21
7/8/25, 1:03 PM Create a Pure CSS Sign Up Form / Registration Form in HTML

Registration forms have different types and are used intensively on the
registration page of the website to allow user or visitor to create their profile on
your website to get more benefits on the website, such as post articles,
downloading files, and more, it depends on website purpose.

Let's start creating an amazing sign-up/registration form using HTML and CSS,
step by step.

Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and
CSS. Additionally, you will need a code editor such as Visual Studio Code or
Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will
include the main structure for our sign-up form.

After creating the files, paste the following code into your HTML file. Make sure
to save your HTML document with a `.html` extension, so that it can be properly
viewed in a web browser.

Here’s a breakdown of its structure and elements:

Document Type Declaration and HTML Tag:

<!DOCTYPE html>
<html lang="en">

`<!DOCTYPE html>`:Declares the document type and version of HTML


(HTML5 in this case).
`<html lang="en">`: The root element of the HTML document, with lang="en"
indicating the language of the document is English.

Head Section:

<head>
<title>Sign Up / Registration Form </title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>

`<title>`: Sets the title of the webpage, which appears in the browser tab.
`<meta charset="UTF-8" />`:
Specifies the character encoding for the
document, ensuring proper display of text.
`<meta name="viewport" content="width=device-width" />`:Makes the
webpage responsive by setting the viewport width to the device width.
`<link rel="stylesheet" href="styles.css" />`: Links an external CSS
stylesheet (styles.css) for styling the HTML content.

Body Section:

<body>
<div class="container">

https://www.codewithfaraz.com/content/7/create-a-pure-css-sign-up-form-registration-form-in-html 2/21
7/8/25, 1:03 PM Create a Pure CSS Sign Up Form / Registration Form in HTML
<div class="center">
<h1>Register</h1>
<form method="POST" action="">
<div class="txt_field">
<input type="text" name="name" required>
<span></span>
<label>Name</label>
</div>
<div class="txt_field">
<input type="email" name="email" required>
<span></span>
<label>Email</label>
</div>
<div class="txt_field">
<input type="password" name="password" required>
<span></span>
<label>Password</label>
</div>
<div class="txt_field">
<input type="password" name="cpassword" required>
<span></span>
<label>Confirm Password</label>
</div>
<input name="submit" type="Submit" value="Sign Up">
<div class="signup_link">
Have an Account ? <a href="#">Login Here</a>
</div>
</form>
</div>
</div>
</body>

`<body>`: Contains the content of the webpage.


`<div class="container">`: A container div, likely used for centering and
spacing purposes.
`<div class="center">`: A div that centers the registration form on the page.
`<h1>`Register`</h1>`: A heading for the registration form.
`<form method="POST" action="">`: The form element with method POST,
indicates that form data will be sent to the server. The action attribute is
empty, meaning the form will be submitted to the same page.
Text Field Divs:
`<div class="txt_field">`: Wrapper for each input field, likely styled with
CSS.
`<input type="text" name="name" required>`: Text input for the user's
name. required ensures the field cannot be left empty.
`<input type="email" name="email" required>`: Email input for the user's
email address.
`<input type="password" name="password" required>`: Password input for
the user’s password.
`<input type="password" name="cpassword" required>`: Password input for
confirming the user’s password.
`<input name="submit" type="Submit" value="Sign Up">`: Submit button for the
form, labeled "Sign Up".
`<div class="signup_link">`: A div containing a link for users who already 
have an account to log in.

https://www.codewithfaraz.com/content/7/create-a-pure-css-sign-up-form-registration-form-in-html 3/21
7/8/25, 1:03 PM Create a Pure CSS Sign Up Form / Registration Form in HTML

This is the basic structure of our sign-up form using HTML, and now we can
move on to styling it using CSS.
6 <meta name="viewport" content="width=device-width" /> 

7 <link rel="stylesheet" href="styles.css" />


8 </head>
9 <body>
10 <div class="container">
11 <div class="center">
12 <h1>Register</h1>
13 <form method="POST" action="">
14 <div class="txt_field">
15 <input type="text" name="name" required>
16 <span></span>
17 <label>Name</label>
18 </div>
19 <div class="txt_field">
20 <input type="email" name="email" required>
21 <span></span>
22 <label>Email</label>
23 </div>
24 <div class="txt_field">
25 <input type="password" name="password" requ
26 <span></span>
27 <label>Password</label>
28 </div>
29 <div class="txt_field">
30 <input type="password" name="cpassword" req
31 <span></span>
32 <label>Confirm Password</label>
33 </div>
34 <input name="submit" type="Submit" value="Sign
35 <div class="signup_link">
36 Have an Account ? <a href="#">Login Here</a
37 </div>
38 </form> 
 

Read Also
How to Generate Random Number in HTML, CSS, and
JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the signup form is in place, the next step is to
add styling to the signup form using CSS. CSS allows us to control the visual
appearance of the signup form, including things like layout, color, and
typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to
create our registration form. We will also add some padding and margin
properties to ensure that everything looks correct.

Here’s a detailed explanation of each part:

General Styles

body{
margin: 0;
padding: 0;
font-family: Roboto;
background-repeat: no-repeat; 
background-size: cover;
background: linear-gradient(120deg, #007bff, #d0314c);

https://www.codewithfaraz.com/content/7/create-a-pure-css-sign-up-form-registration-form-in-html 4/21
7/8/25, 1:03 PM Create a Pure CSS Sign Up Form / Registration Form in HTML
height: 100vh;
overflow: hidden;
}

margin: 0; padding: 0;: Removes default margins and padding around the
body.
font-family: Roboto;: Sets the font to Roboto.
background-repeat: no-repeat;: Prevents the background image from
repeating.
background-size: cover;: Ensures the background image covers the entire
viewport.
background: linear-gradient(120deg, #007bff, #d0314c);: Applies a linear
gradient background from blue (#007bff) to red (#d0314c).
height: 100vh;: Sets the body height to the viewport height.
overflow: hidden;: Prevents scrolling by hiding any overflow content.

Centering and Styling the Form Container

.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 29vw;
background: white;
border-radius: 10px;
}

position: absolute;: Positions the .center element absolutely within its


containing block.
top: 50%; left: 50%; transform: translate(-50%, -50%);: Centers the element
both horizontally and vertically.
width: 29vw;: Sets the width to 29% of the viewport width.
background: white;: Sets the background color to white.
border-radius: 10px;: Rounds the corners with a 10px radius.

Form Heading

.center h1{
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}

text-align: center;: Centers the text inside the heading.


padding: 0 0 20px 0;: Adds 20px padding at the bottom.
border-bottom: 1px solid silver;: Adds a 1px solid silver border at the bottom.

Form and Input Fields

.center form{
padding: 0 40px;

box-sizing: border-box;
}

https://www.codewithfaraz.com/content/7/create-a-pure-css-sign-up-form-registration-form-in-html 5/21
7/8/25, 1:03 PM Create a Pure CSS Sign Up Form / Registration Form in HTML

padding: 0 40px;: Adds 40px padding on the left and right sides of the form.
box-sizing: border-box;: Includes padding and border in the element’s total
width and height.

form .txt_field{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}

position: relative;: Positions the .txt_field element relative to its normal


position.
border-bottom: 2px solid #adadad;: Adds a 2px solid border at the bottom of
the field.
margin: 30px 0;: Adds 30px margin above and below the field.

.txt_field input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}

width: 100%;: Makes the input field take the full width of its parent.
padding: 0 5px;: Adds 5px padding on the left and right sides.
height: 40px;: Sets the height of the input field.
font-size: 16px;: Sets the font size inside the input field.
border: none; background: none; outline: none;: Removes border,
background, and outline.

.txt_field label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
}

position: absolute;: Positions the label absolutely within its parent .txt_field.
top: 50%; left: 5px;: Positions the label vertically centered and 5px from the
left.
color: #adadad;: Sets the text color to a light gray.
transform: translateY(-50%);: Vertically centers the label.
font-size: 16px;: Sets the font size.
pointer-events: none;: Prevents the label from capturing mouse events.

Label and Span Transitions


https://www.codewithfaraz.com/content/7/create-a-pure-css-sign-up-form-registration-form-in-html 6/21
7/8/25, 1:03 PM Create a Pure CSS Sign Up Form / Registration Form in HTML

.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0px;
height: 2px;
background: #2691d9;
transition: .5s;
}

content: '';: Inserts an empty content before the span.


position: absolute; top: 40px; left: 0;: Positions the pseudo-element 40px
from the top of the .txt_field.
width: 0px; height: 2px;: Initially sets the width to 0px and height to 2px.
background: #2691d9;: Sets the background color.
transition: .5s;: Adds a transition effect for width changes.

.txt_field input:focus ~ label,


.txt_field input:valid ~ label{
top: -5px;
color: #2691d9;
}

input:focus ~ label, input:valid ~ label: Moves the label up and changes its
color when the input field is focused or has valid input.

.txt_field input:focus ~ span::before,


.txt_field input:valid ~ span::before{
width: 100%;
}

input:focus ~ span::before, input:valid ~ span::before: Expands the span’s


width to 100% when the input field is focused or valid.

Password Visibility Toggle and Submit Button

.pass{
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}

margin: -5px 0 20px 5px;: Adds margin around the password visibility
toggle.
color: #a6a6a6;: Sets text color.
cursor: pointer;: Changes the cursor to a pointer when hovering.

.pass:hover{
text-decoration: underline;
}

text-decoration: underline;: Underlines the text on hover.


https://www.codewithfaraz.com/content/7/create-a-pure-css-sign-up-form-registration-form-in-html 7/21
7/8/25, 1:03 PM Create a Pure CSS Sign Up Form / Registration Form in HTML

input[type="Submit"]{
width: 100%;
height: 50px;
border: 1px solid;
border-radius: 25px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
}

width: 100%; height: 50px;: Makes the submit button full width and sets its
height.
border: 1px solid; border-radius: 25px;: Adds a solid border and rounds the
corners.
font-size: 18px; font-weight: 700;: Sets the font size and weight.
cursor: pointer;: Changes the cursor to a pointer on hover.

input[type="Submit"]:hover{
background: #2691d9;
color: #e9f4fb;
transition: .5s;
}

background: #2691d9; color: #e9f4fb;: Changes the background and text


color on hover.
transition: .5s;: Adds a transition effect.

Sign-Up Link

.signup_link{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}

margin: 30px 0;: Adds vertical margin.


text-align: center;: Centers the text.
font-size: 16px; color: #666666;: Sets the font size and color.

.signup_link a{
color: #2691d9;
text-decoration: none;
}

color: #2691d9; text-decoration: none;: Styles the link with a blue color and
no underline.

.signup_link a:hover{
text-decoration: underline;
}

text-decoration: underline;: Underlines the link on hover.


HomeAbout Class

https://www.codewithfaraz.com/content/7/create-a-pure-css-sign-up-form-registration-form-in-html 8/21
7/8/25, 1:03 PM Create a Pure CSS Sign Up Form / Registration Form in HTML

.HomeAbout{
width: 100vw;
height: 25vh;
}

width: 100vw; height: 25vh;: Sets the width to 100% of the viewport width
and height to 25% of the viewport height.

This will give our registration form an upgraded presentation. Create a CSS file
with the name of `styles.css` and paste the given code into your CSS file.
Remember that you must create a file with the `.css` extension.

1 body{
2 margin: 0;
3 padding: 0;
4 font-family: Roboto;
5 background-repeat: no-repeat;
6 background-size: cover;
7 background: linear-gradient(120deg, #007bff, #d0314c);
8 height: 100vh;
9 overflow: hidden;
10 }
11
12 .center{
13 position: absolute;
14 top: 50%;
15 left: 50%;
16 transform: translate(-50%, -50%);
17 width: 29vw;
18 background: white;
19 border-radius: 10px;
20 }
21
22 .center h1{
23 text-align: center;
24 padding: 0 0 20px 0;
25 border-bottom: 1px solid silver;
26 }
27
28 .center form{
29 padding: 0 40px;
30 box-sizing: border-box;
31 }
32
33 form .txt field{ 

Final Output:

Read Also
https://www.codewithfaraz.com/content/7/create-a-pure-css-sign-up-form-registration-form-in-html 9/21

You might also like