Forms, as mentioned in Chapter 5, are essential for collecting information from users. It is also important that they are made easy to complete and attractive. This can largely be achieved by grouping and ordering fields in a logical way and properly aligning them. You would have already seen in Chapter 5 how form elements can be grouped into sections using, for example, the <fieldset> element. Here, how to style these elements is shown. Figure 17.27 shows the HTML code for a form and Figure 17.28 shows the result without CSS styling.
Notice in Figure 17.27 that unlike the ones in Chapter 5, the <div> element is used to contain the form controls. This is to make it easy to apply styling to them, for example, as a group. Also, notice in Figure 17.28 that the controls and the labels are not aligned and slightly packed too closely together. The main goal of formatting and styling here is to improve this appearance. Figure 17.29 shows the CSS for doing this and Figure 17.30 the result.
In the example, the form{} rule sets the form’s width with the width property. In the fieldset{} rule, border property sets the border of the <fieldset> element to solid line and #c6c4c4 color; the border-radius property makes the corners of the box round. In the legend{} rule, text- transform makes the content of the <legend> element all-uppercase; background-color makes its background #e4f0f6 color; border makes its border solid line and #d4d4d4 color; border-radius makes its corners round; and padding specifies the space between its content and the top and bottom edges as 5px and between the right and left edges as 15px. The div{} rule specifies 10px margin for every <div> element so as to add space between the form controls and produce a more spacious and easy-to-read form.
The .box{} rule specifies background color for the elements of class=“box” (i.e., the text-input boxes) in order to make them stand out. The .field{} rule vertically aligns the text-input boxes and the labels. In it, the float property moves all elements of class=“field” (i.e., the <label> elements for the text-input boxes and the radio buttons) left; the width property makes their width the same, so that their left and right edges, and the left edges of the text boxes, are vertically aligned; the text-align property aligns the elements’ contents to the right, so that their ends are vertically aligned; and the padding-right property adds padding to the right edges of the labels to put some space between them and the text-input boxes. The ,moveleft{} rule removes the padding around elements of class=“moveleft” (i.e., the radio buttons) so as to vertically align the first one with the left edges of the text-input boxes. The .buttons{} rule aligns the element of class=“buttons” (i.e., the element containing the submit and reset buttons) to the right of the <fieldset> element’s box.
1. Images in Input Fields
In addition to using labels to identify certain types of text input boxes, or instead of using them, a common practice is to place icons (i.e., small images) inside them typically to the left to indicate the types of information required from users. The types of information that images are used for include e-mail and password for popular social media websites, such as Twitter. They are also used with search text boxes. Figures 17.31 and 17.32 show how you can do this and Figure 17.33 the result.
In the example, the form{} rule specifies the width of the form. In the field-set{} rule, border makes the border of the <fieldset> element a solid line of lpx thickness and gives it #c6c4c4 color; border-radius makes the corners of the element’s box round; and padding makes space between the content of the element and the border 15px. The div{} rule specifies a margin of 15px to add space between the form controls so that they are not too close together. The ,field{} rule vertically aligns the text boxes. The width property makes all elements of class-Tield” (i.e., <label> elements for the input boxes) the same width to align them vertically; the float property moves them to the left of the <fieldset> element; and text-align aligns their content right to vertically align them. The .button{} rule aligns elements of class=“button” to the right.
The .box{} rule specifies the width, border, background-color, margin- left, and padding properties for the elements of class=“box” (i.e., username, e-mail, and password input text boxes). The margin-left property adds space between the input boxes and their labels. The padding for the left side is set to 30px to ensure clearance in the boxes, so that when users enter data, the data does not go on top of the images.
The .username {} rule uses the background property to specify the background image to place in the box (i.e., username.png), and not to repeat it. It also specifies the background color for the box and the x-y coordinate for where to place the image. The first value specifies the horizontal position and says to place the image at 3% of the length of the element’s box, starting from the left edge. The second value specifies the vertical position as 50% of the height of the element’s box, starting from the top edge. The background property is shorthand property for specifying various longhand background properties and was discussed in Chapter 15.
The .email{} and .password{} rules specify similar properties and values as the .username{} rule but use different images. The size of the images is 16 x 16 pixels. However, bigger images can be used and scaled down accordingly using the background-size property to specify the width and height. This property too has been introduced in Chapter 15. Note that to avoid repetition and make the code more elegant and easier to maintain, the properties and values that are common to the three rules can be placed in the .box{} rule, since all the text input elements belong to class=“box”.
2. Styling Form Elements
Form elements can be styled to help users quickly determine how to interact with them, and this can be done using pseudo-classes, which were introduced in Chapter 8 and also used in Chapter 14 for styling link text. Table 17.3 lists those used for styling form elements and Figures 17.34 and 17.35 show how they are used and the result.
In the example, the input:required{} rule says that all required <input> elements should be given a light blue background. The input:focus{} rule specifies to make the background color of a text-input element yellow when it receives focus (i.e., when the cursor is in the field). The input [type=checkbox] : checked + label{} and input [type=radio] : checked + label{} rules specify to make the label for any selected checkbox- or radioinput element red. The introduced in table 8.1 of Chapter 8, specifies to select the first <label> element after a selected checkbox- or radio-input element. The “Ref’ text field is gray because it is disabled using HTML disabled attribute (introduced in Chapter 5 in table 5.4) and not editable.
2.1. Styling Form Buttons
Form buttons, such as submit and reset buttons, that are created using HTML, too, can be styled using many of the CSS properties already discussed in previous chapters. These properties can also be used to provide interactivity by combining them with some pseudo-classes, such as :hover and :active. Figures 17.36 and 17.37 show an example and the result.
In the example, the input#button{} rule applies to the <input> element of id=“button” and determines the appearance of the button in the normal state. The width and the padding properties specify the size of the button; background-color specifies #ffcc66 color; border-radius makes the comers of the button round; box-shadow property specifies a dark gray shadow that has an x-y-offset of 3px 3px, a blur-radius of 2px, and no spread-radius (See for more on box shadow); and the rest of the properties in the rule specify the styling for the button text, including text shadow. The input#button:hover{} rule applies to the <input> element of id=“button” that has the cursor over it and says to change text color of the element (the button) to blue and its background color to orange.
2.2. Styling Default Button
When the browser displays a group of associated elements, it makes one of the elements the default. In the case of a group of buttons in a form, for example, the default element is typically the first element of submit type. CSS allows you to select and style this element using the :default pseudoclass. Figure 17.38 shows how it is used and Figure 17.39 the result.
In the example, the form{} rule specifies the size of the <form> element. The div{} rule specifies the margin for all four sides of the <div> elements to put some space between the form controls and the edges of the <fieldset> element. The ,box{} rule styles and formats the <input> elements of
class=“box” (i.e., the textboxes). The .buttons{} rule aligns the <input> elements of class = “box” (i.e., the buttons) to the right. The :default{} rule makes the border of the default button 2px thick solid line and green.
3. Specifying Cursor Shape
When rollover is implemented, it is also good practice to change the shape of the cursor during the hover. The property used for this is the cursor property and it is used to specify the type of cursor to display when the mouse is over an element. It is inherited and takes many types of values that describe a shape. Table 17.4 lists some common ones.
Figure 17.40 shows the hover state for the same button in Figure 17.37 but with the cursor shape changed to a pointer.
4. Validating Form Inputs
Many of the form data validation processes traditionally done with scripting can now be done using HTML and CSS. Already some have been introduced, such as the required attribute. Here, some of the CSS pseudoclasses used to perform validations are introduced, namely, : in-range, :out- of-range, :valid, and :invalid.
4.1. :in-range and :out-of-range
The :in-range pseudo-class selects the element whose value attribute’s value is within the range specified by the min and max attributes. The :out-of- range pseudo-class selects the element whose value attribute’s value is outside the range specified by the min and max attributes. Figure 17.41 shows how the two are used and Figure 17.42 the result.
In the example, the input: in-range {} rule says that the border of any <input> element whose value attribute’s value is between 1 and 10 should be 2px solid line and green.
The input:out-of-range{} rule says that the border of any <input> element whose value attribute’s value is outside 1-10 should be 2px solid line and red.
4.2. :valid and :invalid
The :valid pseudo-class selects <form> and <input> elements whose content is valid based on input-type setting. For example, an input is valid if a number is entered into a number-input type field. The :invalid pseudoclass, on the other hand, selects <form> and <input> elements whose content is invalid based on input-type setting. These pseudo-classes are intended to help users recognize wrong inputs they have made. Figure 17.43 shows how they are used and Figure 17.44 the result.
In the example, the input:valid{} rule says to make the border of <input> elements whose content contains only numbers 2px thick solid green line. The :input:invalid{} rule says to make the border of <input> elements whose content contains a non-digit 2px thick solid red line.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.