Styling form elements

In the examples in the previous section, the forms do not look very visually appealing by default, but luckily, we can improve the look and feel of our forms using CSS.

In this section, we will look at styling the following:

• Textboxes
• Textareas
• Labels
• Buttons
• Select boxes
• Validation styling

Labels, textboxes, and textareas

The first form elements we will look at styling are the label, textboxes, and textarea elements. These are probably the most common form elements, and it is very straightforward to improve the look and feel of these elements with minimal code.

To style labels, you will typically just adjust the font you use and the size of the text. It is common to have the label element sit either on top of its associated form element or to the left.

For textboxes and textareas, typically, you will be interested in changing the size of these elements. It is common to remove the default border around these elements. Another common stylistic addition to textboxes and textareas is to add a placeholder attribute that provides the user with some text, helping them decide what needs to be typed into the textbox or textarea.

To illustrate an example of how to style these elements, we will start with the following markup, noting the addition of placeholder attributes:

<!-- HTML -->
<form action="url_to_send_form_data" method="post">
  <div>
    <label for="first_name">First name:</label><br />
    <input
      type="text"
      name="firstname"
      id="first_name"
      placeholder="Your first name"
    />
  </div>
  <div>
    <label for="last_name">Last name:</label><br />
    <input
      type="text"
      name="lastname"
      id="last_name"
      placeholder="Your last name"
    />
  </div>
  <div>
    <label for="message">Message:</label><br />
    <textarea
      id="last_name"
      rows="5"
      cols="20"
      placeholder="Your message">
    </textarea>
  </div>
</form>
/* CSS */
:root {
  --border-color: #666;
}
* {
  font-family: arial,sans-serif;
}
label {
  font-size: 20px;
}
div {
  margin-bottom: 30px;
}
input,
textarea {
  border: 0;
  border-bottom: 1px solid var(--border-color);
  padding: 10px 0;
  width: 200px;
}

In the preceding CSS, note that we have applied a font family to all text elements. We have set the label text size to 20 px and added a bottom margin to the div elements so that the form elements are nicely spaced, vertically. Finally, we have removed the default border applied to the input and textarea elements, replacing it with just a border on the bottom.

With just minimal CSS, we have improved the look and feel of our form drastically, as can be seen in the following screenshot:

Figure 4.13: Styled labels, textboxes, and textarea elements

Buttons

We will now look into styling the buttons that are used to submit a web form. Typically, you will see buttons with various background colors and different sizes applied when viewing websites with forms. Out of the box, the button element looks pretty ugly, so you will rarely see buttons without some CSS applied to them. The following is an example of how you could style a submit button:

<!-- HTML -->
<button type="submit">Submit</button>
/* CSS */
:root {
  --bg-color: #999;
  --bg-active-color: #888;
  --text-color: #fff;
}
button {
  background: var(--bg-color);
  border: 0;
  color: var(--text-color);
  cursor: pointer;
  font-size: 12px;
  height: 50px;
  width: 200px;
  text-transform: uppercase;
}
button:hover {
  background: var(--bg-active-color);
}
button:active {
  background: var(--bg-color);
}

The preceding CSS sets a background color, removes the border that is added to buttons by default, applies some styling to the button text, and finally, sets a width and height:

Figure 4.14: A styled submit button

Select boxes

The last form element we will look at for styling is the select box. Typically, this is styled to make the select box look similar to a textbox within a form. It is common for developers to add a custom-styled downward-pointing arrow to the right-hand side of the select box. The following is an example of how you could style a select box:

<!-- HTML -->
<div class="select-wrapper">
  <select id="countries">
    <option value="england">England</option>
    <option value="scotland">Scotland</option>
    <option value="ireland">Ireland</option>
    <option value="wales">Wales</option>
  </select>
</div>
/* CSS */
:root {
  --border-color: #666;
}
select {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border-color);
  box-shadow: none;
  color: var(--border-color);
  padding: 10px 0;
  width: 200px;
  -webkit-appearance: none;
}
.select-wrapper {
  position: relative;
  width: 200px;
}
.select-wrapper:after {
  content: '< >';
  color: var(--border-color);
  font-size: 14px;
  top: 8px;
  right: 0;
  transform: rotate(90deg);
  position: absolute;
  Z-index: -1;
}

The preceding CSS contains styling that essentially overrides what a select box looks like in the browser by default. Firstly, we need to remove the default background color, cancel the border, and apply just the bottom border. We also remove the custom box-shadow property, which is also applied to select boxes by default. Finally, to add a custom select box icon, we use the after pseudo selector to add the '< >' characters:

Figure 4.15: A styled select box

Validation styling

In real-world scenarios, simply formatting and styling a form appropriately is not enough. As a web user, you may encounter cases where form validation is performed before submitting a form. For example, while registering on a website, a user may accidentally submit a form before it is filled in completely or submit an incorrectly filled-in form. Validation styling comes into play when you want to highlight the fact that a form is incomplete or incorrectly filled in.

You will probably have experienced form validation on web forms you have used in the past. HTML provides us with a required attribute, which we can apply to any form elements that we require input for. The required attribute plays an important role in contact forms – for example, on the Packt website’s contact form (https://www.packtpub.com/en-us/help/contact), note that the name and email fields are required, and the user cannot submit the form until a value for each is added.

This is in contrast with some form elements where the input is optional. With CSS, we can use the :valid and :invalid pseudo selectors to style elements based on valid or invalid form values. We will now do an exercise that will walk us through an example of validation styles in action.

Exercise 4.02 – creating a form with validation styling

In this exercise, we will develop a simple web form that contains some validation styling. Our aim is to produce a web form like the one shown in the following figure:

Figure 4.16: The expected output

Note

The complete code for this exercise can be found at https://packt.link/q1PLm.

Let’s complete the exercise with the following steps:

1. Start by creating a new file in VS Code called validation-form.html, and use the following code as your starting point:

   <!DOCTYPE html>
   <html>
   <head>
     <title>Validation form</title>
     <style>
       body {
         font-family: arial, sans-serif;
       }
     </style>
   </head>
   <body>
     <form action="url_to_send_form_data" method="post">
       <fieldset>
         <!-- your code will go here -->
       </fieldset>
     </form>
   </body>
   </html>

2. We will now add the HTML for the first name and last name form fields between the opening and closing fieldset tags. Note how we have added required attributes to both of the input elements:

   <fieldset>
     <div>
       <label for="first_name">First name:</label><br />
       <input
         type="text"
         name="firstname"
         id="first_name"
         placeholder="Your first name" required
       />
     </div>
     <div>
       <label for="last_name">Last name:</label><br />
       <input
         type="text"
         name="lastname"
         id="last_name"
         placeholder="Your last name" required
       />
     </div>
     <div>
       <label for="last_name">Country:</label><br />
       <div class="select-wrapper">
     <select id="countries">
       <option value="england">England</option>
       <option value="scotland">Scotland</option>
       <option value="ireland">Ireland</option>
       <option value="wales">Wales</option>
     </select>
   </div>
   </div>
   <div>
       <label for="message">Message:</label><br />
       <textarea
         id="last_name"
         rows="5"
         cols="20"
         placeholder="Your message">
       </textarea>
     </div>
   <div>
   <button type="submit">Submit</button>
   </div>
   </fieldset>

3. Now, we will turn to the CSS. We will first add some styling, which will deal with spacing the div and fieldset elements:

   div {
     margin-bottom: 30px;
   }
   fieldset {
     border: 0;
     padding: 30px;
   }

4. Next, we will style the individual form elements one by one. The label’s font size is set to 20 px, and the styling for the input and textarea elements is the same, as shown in the following code snippet:

   label {
     font-size: 20px;
   }
   input,
   textarea {
     border: 0;
     border-bottom: 1px solid grey;
     padding: 10px 0;
     width: 200px;
   }

   With respect to the expected output as shown in Figure 4.16, we style select, as shown in the following code snippet:

   select {
     background: transparent;
     border: 0;
     border-radius: 0;
     border-bottom: 1px solid grey;
     box-shadow: none;
     color: #666;
     -webkit-appearance: none;
     padding: 10px 0;
     width: 200px;
   }

   We will use the following snippet of code to complete styling select:

   .select-wrapper {
     position: relative;
     width: 200px;
   }
   .select-wrapper:after {
     content: '<>';
     color: #666;
     font-size: 14px;
     top: 8px;
     right: 0;
     transform: rotate(90deg);
     position: absolute;
     z-index: -1;
   }

   To style the button, we will use the styling, as shown in the following code snippet:

   button {
     background: #999;
     border: 0;
     color: white;
     font-size: 12px;
     height: 50px;
     width: 200px;
     text-transform: uppercase;
   }

5. Finally, we will add styles to validate the form elements that have a required attribute:

   :root {
     --valid-color: green;
     --invalid-color: red;
   }
   input:valid,
   textarea:valid {
     border-bottom-color: var(--valid-color);
   }
   input:invalid,
   textarea:invalid {
     border-bottom-color: var(--invalid-color);
   }

If you now right-click on the filename in VS Code, on the left-hand side of the screen, and select open in default browser, you will see the form in your browser. When you try to submit an incomplete form that has validation in it, it will not submit, and you will see something like the following screenshot:

Figure 4.17: A screenshot of the resultant form

We have just looked into ways of styling HTML forms, including validation styling. Next, we will take a look at how we can incorporate HTML tables for the layout of our forms.