project preview
Folder Structure:
- First we will need to create folder for our project
- Then we will create files index.html and style.css
- A last we will link css file with html to get start
Introduction:
In this project, we are developing a responsive registration form with background image in html. The form will include essential input fields such as name, email, password, gender selection, and a country dropdown and an eye catching image will be used in background.
HTML Code:
... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Registration Form with Background Image</title> <!-- Font Awesome CDN Link --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="form"> <header>Registration</header> <form action=""> <div class="field fname"> <div class="input-area"> <input type="text" placeholder="First Name"> <i class="icon fas fa-user"></i> </div> </div> <div class="field lname"> <div class="input-area"> <input type="text" placeholder="Last Name"> <i class="icon fas fa-user"></i> </div> </div> <div class="field email"> <div class="input-area"> <input type="email" placeholder="Email"> <i class="icon fas fa-envelope"></i> </div> </div> <div class="field password"> <div class="input-area"> <input type="password" placeholder="Password"> <i class="icon fas fa-lock"></i> </div> </div> <div class="radio_btn"> <input type="radio" name="r1" id="male" checked> <label for="male">Male</label> <input type="radio" name="r1" id="female"> <label for="female">Female</label> </div> <div class="select-btn"> <select name="Countries"> <option value="">Select Country</option> <option value="">USA</option> <option value="">England</option> <option value="">Germany</option> <option value="">Sri Lanka</option> <option value="">India</option> <option value="">Pakistan</option> </select> </div> <input type="submit" value="Signup"> </form> </div> </div> </body> </html> ...
Explanation:
The <body>
tag contains all the visible content of the page. Within it, a <div>
is used as a container to center and structure the form. Inside this wrapper, the main form content is encapsulated within a <div>
tag.
The <header>
tag within the form is used to provide a title, “Registration,” styled to be prominent using CSS properties like font-size
and font-weight
.
The form elements are created using the <form>
tag. It contains multiple input fields for first name, last name, email, and password, wrapped in <div>
containers. Each field uses an <input>
tag, where key attributes like type="text"
and placeholder="First Name"
define the type of input and the placeholder text shown to the user. Icons, provided by Font Awesome, are inserted alongside the input fields using <i>
, where the fas
class specifies the icon style, and the fa-user
class specifies the icon type.
Text and Email Inputs: These use the type="text"
and type="email"
attributes to define the input types, with associated placeholder text for user guidance.
Password Input: Uses type="password"
to hide the characters typed by the user.
Radio Buttons: The gender selection is implemented using <input type="radio">
, with corresponding <label>
tags for “Male” and “Female.” The checked
attribute ensures that one option is selected by default.
Dropdown Menu: The country selection is handled using a <select>
tag, populated with <option>
tags representing different countries.
Submit Button: The form ends with an <input type="submit">
button, styled with properties like background
, color
, and cursor
to enhance user interaction.
CSS Code:
... * { padding: 0; margin: 0; box-sizing: border-box; font-family: sans-serif; } body { background-image: url("images/Bg\ Image.jpg"); width: 100%; height: 100%; background-size: cover; } .form { position: absolute; top: 50%; left: 20%; transform: translate(-50%, -50%); width: 366px; background: #fff; border-radius: 5px; text-align: center; padding: 30px 30px 5px 30px; box-shadow: 0px 5px 20px 10px rgba(0, 0, 0, 0.2); } .form header { font-size: 24px; font-weight: 600; } .form form { margin: 30px 0; } form .field { width: 100%; margin-bottom: 15px; } form .field .input-area { position: relative; } form input { height: 40px; width: 100%; outline: none; padding: 0 15px; padding-left: 40px; font-size: 16px; border-radius: 5px; border: 1px solid #34495e; border-bottom-width: 2px; } form input::placeholder { color: #bfbfbf; font-size: 16px; } form .field i { position: absolute; top: 50%; font-size: 16px; pointer-events: none; transform: translateY(-50%); } form .field .icon { left: 15px; color: #34495e; } form .radio_btn { display: flex; flex-direction: row; font-size: 20px; font-weight: 400; } form input[type="radio"] { width: 20px; height: 20px; margin: 0 10px; } form .select-btn { margin-top: 15px; } form select { height: 40px; width: 100%; outline: none; padding: 0 15px; border-radius: 5px; border: 1px solid #34495e; border-bottom-width: 2px; font-size: 16px; } form input[type="submit"] { margin-top: 20px; border: none; background: #34495e; color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: background 0.2s ease; } form input[type="submit"]:hover { background: #333867; } @media (max-width: 768px) { .form { width: 315px; padding: 15px; left: 50%; } .form header { font-size: 18px; font-weight: 600; } form input { height: 35px; font-size: 11px; } form input::placeholder { font-size: 12px; } form input[type="radio"] { width: 13px; height: 13px; } form .radio_btn { font-size: 12px; } form select { font-size: 12px; } form .field i { font-size: 14px; } form select { height: 35px; font-size: 14px; } form input[type="submit"] { height: 35px; font-size: 12px; } } @media (max-width: 480px) { .form { width: 268px; padding: 0px 20px; padding-top: 20px; } form input { height: 30px; font-size: 12px; } form input::placeholder { font-size: 10px; } form input[type="radio"] { width: 10px; height: 10px; } form .radio_btn { font-size: 10px; } form select { font-size: 10px; } form .field i { font-size: 12px; } form select { height: 30px; font-size: 12px; } form input[type="submit"] { height: 30px; font-size: 10px; } } ..
Explanation:
The stylesheet begins by utilizing `padding`, `margin`, and `box-sizing` to reset and standardize the layout across all browsers, ensuring a consistent look and feel. Flexbox properties, including `display`, `justify-content`, and `align-items`, are employed to center the form both horizontally and vertically within the viewport, making the form easily accessible regardless of screen size.
The form container itself is enhanced with `background`, `border-radius`, and `box-shadow` properties, which give it a clean, elevated appearance that stands out against the page’s background image. These properties help create a subtle 3D effect, making the form appear as if it is floating on the page. This visual distinction is further emphasized by the `padding` within the form, which ensures that the content is spaced appropriately from the edges, contributing to a well-organized and professional layout.
Within the form, individual elements such as input fields, dropdown select box, and radio buttons are styled using a consistent set of properties. `Width` and `height` properties ensure that these elements are proportionally sized, while `padding` and `font-size` maintain readability and ease of interaction. The `border` and `border-radius` properties are applied to give these elements a polished look, with subtle rounded corners that complement the overall design. The form’s icons, provided by Font Awesome, are carefully positioned inside the input fields using `position`, `top`, `left`, and `transform` properties, ensuring that they are aligned properly and enhance the user experience without cluttering the interface.
The submit button, a critical interactive element, is designed to be both visually appealing and functional. Properties such as `background`, `color`, `font-size`, `cursor`, and `transition` ensure that the button stands out and provides immediate visual feedback to the user when hovered over. The `transition` property creates a smooth color change effect, enhancing the user experience by signaling that the button is clickable.
Responsiveness is a key aspect of this design, achieved through the use of `@media` queries. These queries dynamically adjust properties such as `width`, `height`, `font-size`, and `padding` to ensure that the form remains user-friendly and visually appealing on a variety of devices, including tablets and mobile phones. The adjustments made by the media queries ensure that the form’s layout and elements scale appropriately, preserving usability and aesthetic appeal regardless of screen size.
Overall, the CSS code carefully combines a wide array of properties to produce a registration form that is not only functional but also visually consistent and responsive, ensuring an optimal user experience across all devices.
Source Code:
Download “Registration-Form-bg.zip” Registration-Form-bg.zip – Downloaded 1 time – 358.21 KB
Conclusions:
We have designed and implemented a responsive registration form with a background image, focusing on both aesthetics and functionality. The form is centered and styled with a clean, modern look, incorporating rounded corners and a subtle shadow for a polished appearance. We utilized Flexbox and CSS properties to ensure the form is responsive, adapting to different screen sizes through media queries. Key elements like input fields, icons, and the submit button are consistently styled for a cohesive user experience.