An HTML form in CSS refers to a web form created using HTML markup and styled using CSS (Cascading Style Sheets). HTML forms are used to collect and submit user input on a webpage. With CSS, we can apply various visual styles to the form elements.
Common CSS techniques for styling HTML forms include:
Adjusting the dimensions and applying colors and backgrounds to differentiate elements.
Adding hover effects to provide visual feedback.
Aligning and positioning form elements.
The most common and widely used kinds of forms are registration and login forms. Let's learn to create a registration form.
A typical registration form consists of several essential elements that allow users to provide their information and register for a service or create an account. Here are the key elements commonly found in a registration form:
Username/Email
Password
Confirm password
Full name
Date of birth
Register button
Let's code a registration form from scratch, as shown below.
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="UTF-8"><title>Registration Form</title><link rel="stylesheet" href="form.css"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>
This section defines the document type and language and sets up the HTML structure. The <head>
section includes the page title, character encoding, and a link to an external CSS file called "form.css" for styling. Now let's have a look at the body.
<div class="container">
: This is a container that wraps the entire registration form.
<div class="title">
: This div displays the title of the form, in this case, "Registration Form."
<div class="content">
: This div contains the main content of the form.
<form action="#">
: This is the registration form itself. The action
attribute specifies the URL or endpoint where the form data will be submitted. In this case, it is set to #
, indicating that it will be handled by JavaScript or client-side code.
<div class="user-details">
: This div represents the container for the user details section, which includes various input fields.
<div class="input-box">
: These divs represent individual input boxes for collecting user information like full name, username, email, password, etc.
<span class="details">
: These spans are used to label the input fields. They provide a description or name for each input box.
<input type="text">
: These input fields are used to collect user input. The type
attribute determines the type of data to be entered (text, date, etc.).
<div class="button-container">
: This div represents the container for the button.
<div class="button">
: This div wraps the submit button.
<input type="submit">
: This is the submit button that triggers the form submission when clicked.
Classes (class
attribute): They are used to apply CSS styles or select specific elements using JavaScript or CSS selectors. In this code, classes are used to style the elements and organize them into meaningful sections for styling and functionality purposes. By assigning classes to elements, you can easily target and apply specific styles in CSS.
We are done with the HTML part here, let's move on to CSS for the styling part.
@import url('
https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
: Imports the Google Fonts CSS file for the Poppins" font family, which will be used for the text in the form.
*
: Applies the following styles to all elements on the page. It sets the margin and padding to 0, sets the box-sizing to border-box, and applies the 'Poppins' font family to all elements.
body
: Styles the body
element. It sets the height to 100vh (viewport height) and centers the content both horizontally and vertically using a flexbox. It also sets the padding and background gradient.
.container
: Styles the container element. It sets the max-width, width, background color, padding, border radius, and box shadow.
.container .title
: Styles the title element within the container. It sets the font size and font-weight and creates a horizontal line effect using the ::before
pseudo-element.
.content form .user-details
: Styles the user details section within the form. It uses the flexbox to display the user details elements in a row with space between them. It also sets the margin.
form .user-details .input-box
: Styles the input boxes within the user details section. It sets the margin-bottom and width to create a two-column layout.
form .input-box span.details
: Styles the details span within the input boxes. It sets the display to block, font-weight, and margin-bottom.
.user-details .input-box input
: Styles the input fields within the input boxes. It sets the height, width, outline, font size, border radius, padding, border, and transition.
.user-details .input-box input:focus, .user-details .input-box input:valid
: Styles the input fields when they are in focus or have valid input. It changes the border color to a specific shade of purple.
form .gender-details .gender-title
: Styles the gender title within the form. It sets the font size and font weight.
form .category
: Styles the category section within the form. It sets the display to flex, width, and margin, and justifies the content with space between them.
form .category label
: Styles the label elements within the category section. It sets the display to flex, aligns the items, and changes the cursor to a pointer.
form .button
: Styles the button section within the form. It sets the height and margin.
form .button input
: Styles the input field within the button section. It sets the height, width, border-radius, border, color, font size, font weight, letter spacing, cursor, transition, and background. It also changes the background gradient on hover.
Media queries: These are used to apply specific styles based on the viewport width. When the viewport width is 584px or less, the styles within this media query are applied