Styling forms

CSS Fundamentals: Beginner’s Guide to Web Styling

Sobre a Aula

Hello, everyone! Welcome to the Styling Forms lesson.

In this lesson, we will learn how to style forms using CSS. We’ll explore controlling the layout, appearance, and behavior of forms.

What is a form?

A form is an HTML element that allows users to interact with a web application. Forms are used to collect user data, such as name, address, and phone number.

Why style forms?

Well-styled forms are easier to use and more visually appealing. They can also help improve the form conversion rate.

CSS Properties for Forms

There are many CSS properties that can be used to style forms. Some of the most common CSS properties for forms include:

Background: Defines the background color of the element.
Border: Defines the border of the element.
Border-radius: Defines the radius of the element’s border.
Color: Defines the text color of the element.
Font-family: Defines the font family of the element’s text.
Font-size: Defines the font size of the element’s text.
Font-weight: Defines the font weight of the element’s text.
Padding: Defines the space between the content and the border of the element.
Margin: Defines the space between the element and other elements on the page.
Text-align: Defines the text alignment of the element.
Text-decoration: Defines the text decoration of the element.

Examples

Let’s see some examples of how to use CSS properties to style forms:

Example 1:

The following CSS code defines the background color of the form as blue:

form {
  background-color: blue;
}

Example 2:

The following CSS code defines the border of the form as black with a border-radius of 5px:

form {
  border: 1px solid black;
  border-radius: 5px;
}

Example 3:

The following CSS code defines the text color of the form’s text fields as black with a font size of 16px:

input {
  color: black;
  font-size: 16px;
}

Example to consolidate what you learn

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Styled Form Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form action="/action_page.php" method="post">
    <h1>Contact Form</h1>
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" id="name" class="form-control">
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" name="email" id="email" class="form-control">
    </div>
    <div class="form-group">
      <label for="message">Message</label>
      <textarea name="message" id="message" class="form-control" rows="5"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</body>
</html>

CSS

body {
  font-family: sans-serif;
}

form {
  width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

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

label {
  font-weight: bold;
}

input, textarea {
  width: 85%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

textarea {
  height: 200px;
}

button {
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

Code Explanation

The HTML code defines a form with three input fields: name, email, and message. The CSS styles the form with the following properties:

Width: The form is set to a width of 500px.
Margins: The form is centered on the page with automatic margins.
Padding: The form has a padding of 20px to create space around the content.
Background-color: The form has a white background color.
Border: The form has a 1px solid gray border.
Border-radius: The form has a border radius of 5px.
Margin-bottom: Each input group is separated by a space of 20px.
Font-weight: Labels are set with a bold font weight to highlight the text.
Width: Input fields are set to a width of 85% to fill the available space.
Padding: Input fields have a padding of 10px to create space around the content.
Border: Input fields have a 1px solid gray border.
Border-radius: Input fields have a border radius of 5px.
Height: The message field is set to a height of 200px.
Background-color: The button has a black background color.
Color: The text of the button is white.
Padding: The button has a padding of 10px and 20px to create space around the text.
Border: The button has no border.
Border-radius: The button has a border radius of 5px.
Cursor: The button has a pointer cursor to indicate it can be clicked.

This is just a basic example of how to style forms. You can customize the form to meet your specific needs.

Summary

In this lesson, we learned how to style forms using CSS. We explored the most common CSS properties for forms and saw some examples of how to use these properties to style forms.

Try styling forms using the CSS properties you learned in this lesson. You can style forms with different colors, sizes, shapes, and alignments.

In the next lesson, we will learn how to style tables.

Siga-me

Entrar na conversa