CSS Forms

Forms are an essential part of web development, allowing users to input data and interact with websites.

Styling forms not only enhances their visual appeal but also improves user experience.

In this section we'll see the basic ways to styling forms using CSS to create attractive and user-friendly web forms.

Understanding Form Elements

Before styling a form, it's essential to understand the various form elements such as input fields, textareas, or checkboxes, radio buttons, dropdown menus, and buttons . Each element serves a specific purpose and requires unique styling considerations.

Using CSS for Form Styling

CSS can be used to style form elements by targeting their specific attributes, classes, or IDs. You can customize the appearance of form elements by modifying properties such as color, font size, padding, border, background color, and more.

Styling Input Fields

Input fields are commonly used for text input, email input, password input, and more. You can style input fields by targeting their type, class, or IDand applying CSS properties to customize their appearance, including border, padding, background color, and font properties.

input[type="text"], input[type="email"], input[type="password"] {
  padding :10px;
  border :1px solid #ccc;
  border-radius :5px;
  font-size :16px;
} 

Styling Textareas

Textareas are used for multi-line text input, such as comments or messages. Similar to input fields, you can style textareas by targeting their class, or ID and applying CSS properties to control their appearance.

textarea {
  padding :10px;
  border :1px solid #ccc;
  border-radius :5px;
  font-size :16px;
} 

Styling Checkboxes and Radio Buttons

Checkboxes and radio buttons are used for multiple-choice selection. You can style these elements using CSS to customize their appearance, including size, color, and alignment.

input[type="checkbox"], input[type="radio"] {
  margin-right :5px;
} 

Styling Dropdown Menus

Dropdown menus, also known as select elements, are used for selecting options from a list. You can style dropdown menus using CSS to modify their appearance, including background color, border, padding, and font properties.

select {
  padding :10px;
  border :1px solid #ccc;
  border-radius :5px;
  font-size :16px;
  background-color:#f9f9f9;
} 

Styling Buttons

Buttons are used for form submission, reset, or custom actions. You can style buttons using CSS to customize their appearance, including background color, text color, border, padding, and hover effects.

button {
  padding :10px 20px;
  border :none;
  border-radius :5px;
  font-size :16px;
  color :#fff;
  background-color:#007bff;
  cursor:pointer;
} 

button:hover {
  background-color:#0056b3;
} 

By understanding the various form elements and applying CSS properties to customize their appearance, you can create attractive and user-friendly forms that engage and delight users.

Below is a basic registration form along with its corresponding CSS style for better understanding:

<div class="container">
  <h2>Registration Form</h2>
  <form action="#" method="POST">
    <div class="form-group">
      <label for="username">UserName:</label>
      <input type="text" id="username" name="name">
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" name="name">
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" name="name">
    </div>
    <div class="form-group">
      <button type="submit">Register</button>
    </div>
  </form>
</div>

CSS (styles.css):

body {
  font-family :Arial, sans-serif;
  background-color :#f2f2f2;
  margin :0;
  padding :0;
} 

.container {
  width :50%;
  margin :20px auto;
  padding :20px;
  background-color :#fff;
  border-radius :5px;
  box-shadow :0 2px 5px rgba(0, 0, 0, 0.1);
} 

h2 {
  text-align :center;
  margin-bottom :20px;
} 

.form-group {
  diaplay :flex;
  flex-direction :column;
  width :100%;
  margin-bottom :20px;
} 

label {
  display :block;
  margin-bottom :5px;
} 

input[type="text"],
input[type="email"],
input[type="password"], {
  width :100%;
  padding :10px;
  border :1px solid #ccc;
  border-radius :5px;
  box-sizing :border-box;
} 

button {
  width :100%;
  padding :10px;
  border :none;
  border-radius :5px;
  font-size :16px;
  color :#fff;
  background-color:#007bff;
  cursor:pointer;
} 

button:hover {
  background-color:#0056b3;
} 

Let's see the real example by running the below code.

Example

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      body {
        font-family :Arial, sans-serif;
        background-color :#f2f2f2;
        margin :0;
        padding :0;
      } 
      
      .container {
        width :50%;
        margin :20px auto;
        padding :20px;
        background-color :#fff;
        border-radius :5px;
        box-shadow :0 2px 5px rgba(0, 0, 0, 0.1);
      } 
      
      h2 {
        text-align :center;
        margin-bottom :20px;
      } 
      
      .form-group {
        diaplay :flex;
        flex-direction :column;
        width :100%;
        margin-bottom :20px;
      } 
      
      label {
        display :block;
        margin-bottom :5px;
      } 
      
      input[type="text"],
      input[type="email"],
      input[type="password"], {
        width :100%;
        padding :10px;
        border :1px solid #ccc;
        border-radius :5px;
        box-sizing :border-box;
      } 
      
      button {
        width :100%;
        padding :10px;
        border :none;
        border-radius :5px;
        font-size :16px;
        color :#fff;
        background-color:#007bff;
        cursor:pointer;
      } 
      
      button:hover {
        background-color:#0056b3;
      } 
      
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
      <div class="container">
    <h2>Registration Form</h2>
    <form action="#" method="POST">
      <div class="form-group">
        <label for="username">UserName:</label>
        <input type="text" id="username" name="name">
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="name">
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" id="password" name="name">
      </div>
      <div class="form-group">
        <button type="submit">Register</button>
      </div>
    </form>
  </div>
</body>
</html>

This basic registration form includes fields for username, email, and password, along with a submit button.

The CSS styles define the layout, appearance, and behavior of the form elements.