CSS Forms

Prev Next

CSS form styling enhances the appearance and usability of HTML forms on a webpage. Forms are vital for user interactions, such as submitting data or preferences. Proper CSS styling ensures that forms are not only functional but also visually appealing and aligned with the overall design of the website.

Benefits of CSS Form Styling

1. Appearance Enhancement:

Consistency: Ensures that forms match the website’s theme, including fonts, colors, borders, and spacing.

Aesthetic Appeal: Improves the visual appeal of forms, making them more engaging and easier to use.

2. Improving User Experience:

Visual Cues: Provides feedback through focus states, hover effects, and error messages.

Usability: Enhances interaction by making forms intuitive and easy to fill out.

3. Engaging and Functional Forms:

Interaction: Makes forms more interactive and user-friendly.

Performance: Ensures that forms contribute positively to the overall website performance

1. Form Containers

Example:

form {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 0 auto;
}

2. Input Fields

Example:

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
width: 100%;
padding: 10px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
border-color: #4a90e2;
outline: none;
box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

3. Submit Button

Example:

button[type="submit"] {
background-color: #4a90e2;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
background-color: #357abd;
}

4. Checkboxes and Radio Buttons

Example:

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

label {
font-size: 16px;
margin-bottom: 10px;
display: block;
}

5. Select Dropdowns

Example:

select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}

select:focus {
border-color: #4a90e2;
outline: none;
box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

6. Error Messages

Example:

.error-message {
color: red;
font-size: 14px;
margin-top: 5px;
}

Here’s a complete example of a styled form using the CSS properties discussed:

Example:

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

  <title>Styled Form</title>

  <style>
    /* Form Container */
    form {
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      max-width: 600px;
      margin: 0 auto;
    }

    /* Input Fields */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
      width: 100%;
      padding: 10px;
      margin: 8px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 16px;
    }

    /* Input Focus */
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    textarea:focus {
      border-color: #4a90e2;
      outline: none;
      box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
    }

    /* Submit Button */
    button[type="submit"] {
      background-color: #4a90e2;
      color: white;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button[type="submit"]:hover {
      background-color: #357abd;
    }

    /* Checkboxes and Radio Buttons */
    input[type="checkbox"],
    input[type="radio"] {
      margin-right: 10px;
    }

    label {
      font-size: 16px;
      margin-bottom: 10px;
      display: block;
    }

    /* Select Dropdown */
    select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
    }

    select:focus {
      border-color: #4a90e2;
      outline: none;
      box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
    }

    /* Error Messages */
    .error-message {
      color: red;
      font-size: 14px;
      margin-top: 5px;
    }
  </style>

</head>

<body>

  <form action="#" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" required></textarea>

    <label>
      <input type="checkbox" name="subscribe"> Subscribe to newsletter
    </label>

    <label for="gender">Gender:</label>
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>

    <label for="country">Country:</label>
    <select id="country" name="country">
      <option value="us">United States</option>
      <option value="ca">Canada</option>
      <option value="uk">United Kingdom</option>
    </select>

    <button type="submit">Submit</button>
  </form>

</body>
</html>

Output:

Name: Email: Password: Message: Subscribe to newsletter Gender: Male Female Country:

Please fill out this field.

Prev Next