Shipsar Tutorials

Chapter 8: Styling Forms

Forms are essential for user interactions on websites. Properly styling forms not only improves their appearance but also enhances usability and accessibility. This chapter covers the fundamentals of styling various form elements and provides examples for a polished, user-friendly design.

1. Basic Form Elements

Text Inputs

Styling Text Inputs: Adjust the appearance of text input fields using various CSS properties.

input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box; /* Ensures padding and border are included in the width */
}

Password Inputs

Styling Password Inputs: Style password fields similarly to text inputs but with additional focus on security-related styles.

input[type="password"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

Textareas

Styling Textareas: Adjust the height and width of textareas and add padding and border styles.

textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
  height: 150px;
  box-sizing: border-box;
}

Select Dropdowns

Styling Select Dropdowns: Customize the appearance of select dropdowns, including the dropdown arrow.

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

Buttons

Styling Buttons: Style buttons to make them visually appealing and consistent with the rest of the form.

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

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

2. Form Layout

Form Layout involves organizing form elements to ensure a clean and accessible design.

Label Styling

Styling Labels: Ensure labels are clear and aligned with their associated inputs.

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

Form Groups

Form Groups: Use form groups to structure related elements, such as labels and inputs, in a visually appealing way.

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

<div class="form-group">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" />
</div>
<div class="form-group">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" />
</div>

Fieldset and Legend

Styling Fieldset and Legend: Use fieldsets to group related fields and legends to provide context.

fieldset {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}

legend {
  font-weight: bold;
}

<fieldset>
  <legend>Personal Information</legend>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" />
  </div>
</fieldset>

3. Advanced Form Styling

Advanced Styling Techniques: Enhance the form's appearance with advanced CSS techniques.

Focus States

Styling Focus States: Improve accessibility and user experience by clearly indicating which form element is in focus.

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

Placeholder Styling

Styling Placeholders: Customize the appearance of placeholder text.

::placeholder {
  color: #888;
  font-style: italic;
}

Validation Styles

Styling Validation: Indicate errors or success states using styles.

input:invalid {
  border-color: #dc3545;
}

input:valid {
  border-color: #28a745;
}

Custom Checkboxes and Radio Buttons

Custom Styling: Create custom styles for checkboxes and radio buttons.

/* Hide the default checkbox */
input[type="checkbox"],
input[type="radio"] {
  display: none;
}

/* Custom checkbox */
input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  vertical-align: middle;
  margin-right: 10px;
}

/* Custom checked state */
input[type="checkbox"]:checked + label::before {
  background-color: #007bff;
  border-color: #007bff;
}

<input type="checkbox" id="terms" name="terms" />
<label for="terms">I agree to the terms and conditions</label>

4. Responsive Forms

Responsive Design: Ensure forms are mobile-friendly and adaptable to different screen sizes.

@media (max-width: 600px) {
  .form-group {
    margin-bottom: 10px;
  }

  input[type="text"],
  input[type="email"],
  textarea,
  select,
  button {
    width: 100%;
  }
}