CSS Forms Tutorial with Examples, Style HTML Form Elements Easily

Forms

HTML forms are essential for user interaction, like collecting contact info, login credentials, or feedback. With CSS, we can style forms to make them user-friendly and visually appealing.

Syntax:

<form action="submit.php" method="post">
  <!-- form inputs here -->
</form>

CSS for Text Fields and Text Areas

Text fields collect input like names, emails or passwords.

HTML

<input type="text" name="first_name">

CSS

input[type="text"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

CSS for Radio Buttons

Use radio buttons when users should choose only one option from a list.

<input type="radio" name="language" value="HTML" checked> HTML  
<input type="radio" name="language" value="CSS"> CSS  
<input type="radio" name="language" value="JavaScript"> JavaScript

Example: Simple CSS Login Form

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

<head>
  <meta charset="UTF-8">
  <title>CSS Forms Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #e6f2ff;
      padding: 20px;
    }

    div {
      background-color: #f2f2f2;
      padding: 25px;
      border-radius: 8px;
      max-width: 400px;
      margin: auto;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    label {
      font-weight: bold;
    }

    input[type=text],
    select {
      width: 100%;
      padding: 12px;
      margin: 10px 0 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    input[type=submit] {
      width: 100%;
      background-color: orange;
      color: white;
      padding: 14px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

    input[type=submit]:hover {
      background-color: #f2db05;
      color: black;
    }
  </style>
</head>

<body>

  <div>
    <form action="/submit_form.php">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="Tutorial">Choose a Tutorial</label>
      <select id="Tutorial" name="Tutorial">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>
      </select>

      <input type="submit" value="Submit">
    </form>
  </div>

</body>

</html>

Output:

Tips

Use type="email", type="password", and type="tel" for better input control.
You can use ::placeholder in CSS to style placeholder text.
Make your form mobile-friendly using @media queries.