CSS Forms

Styling Text Inputs

You can style input fields using CSS for padding, borders, and rounded corners.

input[type="text"], input[type="email"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 20px;
}

Styling Labels and Form Layout

Display labels as blocks and space them neatly above form elements.

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

Focus States

Use :focus to indicate when a user is typing in a field.

input:focus {
  border-color: dodgerblue;
  outline: none;
}

Responsive Form Design

Make your forms mobile-friendly with relative widths.

form {
  max-width: 400px;
  margin: auto;
}

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

Fieldsets and Legends

Use <fieldset> to group related fields in a form, which is helpful for longer or more complex forms. The <legend> tag gives a caption for the grouped section. You can style these elements for better readability and visual separation.

fieldset {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}

legend {
  font-weight: bold;
  padding: 0 5px;
}

Practice Prompt

Create a contact form with the following:

• Username and Email inputs
• Labels above each input
• A green submit button with hover effect
• Responsive width

Here is the code to the prompt. Click to download

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic