project preview
Folder Structure:
- First we will create folder for our project
- Then we will create files index.html and style.css for project
- At last we will link css with our html file
Introduction:
In this project, we create a stunning registration form using HTML and CSS, designed to provide a sleek and modern user experience. The form captures essential user details, such as name, email, phone number, and password, while maintaining a visually appealing layout.
HTML Code:
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Registration Form</title>
</head>
<body>
<div class="wrapper">
<h2>Registration Form</h2>
<form action="">
<div class="box1 box">
<div class="input_box">
<label for="">First Name</label>
<input type="text" placeholder="First Name">
</div>
<div class="input_box">
<label for="">Email</label>
<input type="email" placeholder="Email">
</div>
<div class="input_box">
<label for="">Password</label>
<input type="password" placeholder="Password">
</div>
</div>
<div class="box2 box">
<div class="input_box">
<label for="">Last Name</label>
<input type="text" placeholder="Last Name">
</div>
<div class="input_box">
<label for="">Phone Number</label>
<input type="number" placeholder="Phone Number">
</div>
<div class="input_box">
<label for="">Confirm Password</label>
<input type="password" placeholder="Confirm Password">
</div>
</div>
</form>
<div class="gender">
<h3>Gender</h3>
<div class="radio_box">
<div class="radio">
<input type="radio" name="gender" id="" checked>
<label for="">Male</label>
</div>
<div class="radio">
<input type="radio" name="gender" id="">
<label for="">Female</label>
</div>
<div class="radio">
<input type="radio" name="gender" id="">
<label for="">Other</label>
</div>
</div>
</div>
<input type="submit" value="Register">
</div>
</body>
</html>
...
Explanation:
The <link rel="stylesheet" href="style.css"> tag links an external CSS file named style.css for styling the form, allowing for separation of content and design.
The <body> contains a <div> with the class “wrapper” which acts as a container for the form elements. Inside this wrapper, there is an <h2> heading titled “Registration Form,” which serves as the form’s title.
The form itself is defined using the <form> element, containing various input fields organized into two main sections, “box1” and “box2”, each represented by a <div> with the class “box”.
These boxes house multiple <div> elements that include <label> tags for field names (e.g., “First Name”, “Email”, etc.) and <input> elements for capturing user input, such as text, email, number, and password fields.
Additionally, there is a “gender” section with radio buttons for selecting gender, each grouped with a <div> element containing an <input type="radio"> and a corresponding <label>. Finally, a <input type="submit" value="Register"> button is included at the end for form submission.
This HTML structure is thoughtfully organized to provide a clean and accessible layout, ensuring users can easily interact with the form on various devices.
CSS Code:
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Registration Form</title>
</head>
<body>
<div class="wrapper">
<h2>Registration Form</h2>
<form action="">
<div class="box1 box">
<div class="input_box">
<label for="">First Name</label>
<input type="text" placeholder="First Name">
</div>
<div class="input_box">
<label for="">Email</label>
<input type="email" placeholder="Email">
</div>
<div class="input_box">
<label for="">Password</label>
<input type="password" placeholder="Password">
</div>
</div>
<div class="box2 box">
<div class="input_box">
<label for="">Last Name</label>
<input type="text" placeholder="Last Name">
</div>
<div class="input_box">
<label for="">Phone Number</label>
<input type="number" placeholder="Phone Number">
</div>
<div class="input_box">
<label for="">Confirm Password</label>
<input type="password" placeholder="Confirm Password">
</div>
</div>
</form>
<div class="gender">
<h3>Gender</h3>
<div class="radio_box">
<div class="radio">
<input type="radio" name="gender" id="" checked>
<label for="">Male</label>
</div>
<div class="radio">
<input type="radio" name="gender" id="">
<label for="">Female</label>
</div>
<div class="radio">
<input type="radio" name="gender" id="">
<label for="">Other</label>
</div>
</div>
</div>
<input type="submit" value="Register">
</div>
</body>
</html>
...
Explanation:
The code begins by importing the ‘Poppins’ font from Google Fonts, setting a modern and clean typography style for the entire form. The universal selector (*) resets the default padding and margin for all elements, ensuring a consistent layout across different browsers, and applies box-sizing: border-box to include padding and border within the element’s total width and height.
The html and body are styled as a grid with display: grid, and place-items: center aligns the form perfectly in the center of the viewport, creating a balanced and focused user interface against a dark background color #222223.
The .wrapper class, which serves as the main container for the form, is styled with a width of 660px and height of 480px, ensuring a compact form size suitable for desktop viewing. It also has a rounded border using border-radius: 17px, a subtle shadow effect (box-shadow: 0 0 15px rgba(0, 0, 0, 0.25)) to lift it visually from the background, and padding for inner spacing.
The color scheme is dominated by black (background-color: #000) and white (color: #fff) for a high contrast, making the text easy to read. The .wrapper h2 and other elements within the form, such as input boxes and labels, are styled with consistent spacing, font sizes, and weights to ensure readability and aesthetic uniformity.
For inputs, the CSS uses selectors like .input_box input[type="text"], .input_box input[type="email"], and others to apply uniform styling: no border, a dark background color (background-color: #222223), white text, and rounded corners (border-radius: 3px).
Placeholder text is given a lighter shade (rgba(255, 255, 255, 0.5)) to distinguish it from user input, enhancing user experience. Additionally, the :focus pseudo-class is applied to change the outline on input focus, enhancing accessibility.
The .gender section is styled to be horizontally aligned with flexbox (display: flex; justify-content: space-between;), making it visually distinct from the rest of the form.
Source Code:
Download “Registration-Form.zip” Registration-Form.zip – Downloaded 1 time – 1.75 KB
Conclusions:
In this project, we created a stunning registration form using HTML and CSS that is both visually appealing and functional. We structured the HTML to organize form elements like input fields, labels, and radio buttons, ensuring a clean and user-friendly layout. The CSS enhanced the form’s aesthetics with modern fonts, color schemes, and rounded borders, while also adding shadows and spacing for a refined look.
