CSS Forms

Introduction

Forms are one of the most critical parts of any website or application. From login and registration to contact forms and checkout pages, almost every project uses them.

HTML provides form elements, but without CSS they look outdated, inconsistent, and unprofessional. A well-styled form improves user trust, conversion rates, and overall experience.

In this chapter, you will learn how to:

• Style input fields, labels, and buttons
• Manage spacing and layout
• Handle focus and validation states
• Build responsive, professional forms

Styling Inputs & Labels

Labels should be readable and inputs should have enough padding to be comfortable.

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

input, textarea, select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
}

Note: Using width: 100% ensures inputs fill their container, making layouts easier to manage.

Focus States (Crucial)

Never remove focus styles without replacing them. It helps keyboard users navigate.

input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);
}

Styling Buttons

Buttons are the primary action element.

button {
  padding: 12px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
}

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

Form Layouts

Proper spacing makes forms easier to scan.

.form-group {
  margin-bottom: 15px;
}

HTML Structure:

Validation States

Visual feedback is important for validation.

input.error {
  border-color: red;
}
input.success {
  border-color: green;
}
.error-text {
  color: red;
  font-size: 13px;
}

Real-World Contact Form

.contact-form {
  max-width: 500px;
  margin: auto;
}
.contact-form input, 
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.contact-form button {
  width: 100%;
  padding: 12px;
  background-color: #28a745;
  color: white;
  border: none;
  cursor: pointer;
}

Common Beginner Mistakes & Best Practices