The <input> element is the most commonly used in forms, because it is used to display different types of controls. It is an inline element, which means that the <br> element or a block-level container element (e.g., <div> or <p>) must be used to go to a new line. It takes many attributes. The most important is the type attribute, as it specifies input type and the type of control interface that is displayed, which includes text-input field, radio button, checkbox, and drop-down menu. Other attributes specify the behavior of these controls. Although there are many input types, their usage is based on the same principle, using the following format:
<input type=“value”>
Different sets of attributes are used with different input types. Some are mandatory, and others are optional. They will be introduced, as necessary, as the input types are presented.
1. Input Types for Collecting Text
There are input types for collecting plain text as well as input types for collecting numeric data and formatted text, such as time and date, and most of them display an editable text-input field, into which the user can type. Some of them also have additional control features, such as increment- decrement and/or drop-down menu buttons, to help user input. To better explain them here, they are presented in the categories of those used for plain text input, those for entering numbers, and those for entering time and date data.
1.1. Input Types for Collecting Plain Text
The input types introduced here are typically used to collect short text inputs from a user, such as personal details and search terms, which basically can consist of any character; however, you can also make them collect only certain types of characters and in a specific order. Table 5.3 lists their names and functions.
All the input types in Table 5.3 support the same set of attributes, except the hidden-input type, which supports only name and value. Table 5.4 lists the attributes and their functions.
TABLE 5.4
Attributes Supported by Input Types that Display Text Fields
Figure 5.3 shows how the types in Table 5.3 are used, along with the commonly used attributes in Table 5.4. Figure 5.4 shows the result.
In the example, notice that all the input types have a similar format. The attributes used to perform the functions are described in Table 5.4. The Username and Password fields have been completed for the purpose of demonstration. The non-letter characters displayed in the password-input type field are automatic and for the purpose of preventing others from knowing what the user types. The required attribute ensures that a form is not allowed to submit until the user has completed the input for the element that has it. Notice that it does not have any value. The longhand is required=“required”, which is unnecessary. Since the attribute does not usually provide any visual cues until after a form has been submitted and the browser has prompted that a control must be completed, it can be useful to include some visual means of informing users of the controls that must be completed, so that they know beforehand. For example, the background or border of a field could be made with a different color from those of other controls. This is achieved using CSS, and how it is done is explained in Chapter 17.
The use of the required attribute is a part of a process known as form validation, which involves checking a submitted form to ensure that all the required inputs have been completed and the inputs are of the correct type and/or format. It is an important process, because it ensures the integrity of submitted form data. Traditionally, this was done using client-side JavaScript scripting. However, HTML now has attributes to help with the process. One of them is the required attribute. Another is the pattern attribute. Although the attribute is not used in the example, it can be useful for ensuring that users enter certain types of information, such as e-mail address, correctly. It is easy to specify. However, deriving the correct regular expression (also called regex) to specify can be difficult, because it involves mathematics. Figure 5.5 shows an example being used.
The expression is used to verify that user input comprises three upper- or lowercase letters, followed by six digits. The content of the title attribute in the code is displayed when the cursor hovers over the text field. If the user enters an input whose format does not match the pattern, the browser immediately prompts him or her to re-input the data and also reminds him or her of the correct format. Using the attribute with email and password input types can be especially useful for ensuring that correct e-mail formats are inputted and that the passwords chosen by users are varied and complex and therefore difficult to guess by hackers. To ensure password complexity, users are compelled to include a wide variety of combinations of lower- and uppercase letters, numbers, and characters. The explanation of how regular expressions are formulated is beyond the scope of this book. However, there are useful expressions on the Web. It is not important to understand how they work to be able to use them. You only need to know what they do.
Refer to Figure 5.3 and notice the text in the email field, which is placed there with the placeholder attribute. It is temporary and disappears the moment the field receives focus or the user starts to type into it. Next, notice that the Search text field is filled with the word “bolts” by default. This is the effect of specifying the value attribute in the search-input type. In contrast, the hidden-input type does not display anything. It simply creates a name-value pair, “subject=registration,” which is sent to the server when the form is submitted and used by the relevant script for decision making. An example of how the input type is used is when the same script is used to process more than one form. Giving different hidden values to each form makes it possible for the script to identify which form has been submitted and process it accordingly. Finally, notice that the fields in the example are not vertically aligned. This is done using CSS and is dealt with in Chapter 17.
1.2. Input Types for Collecting Numbers
The input types for collecting numbers are number and range. As of time of writing, only some browsers support these input types. They include Firefox, Opera, and Chrome. Both input types support the same attributes as text-input types listed earlier in Table 5.4, except size, maxlength, pattern, and placeholder. Table 5.5 lists the extra ones that they support.
1.2.1. Input Type:
number The number-input type displays a single- line text field for the user to enter a number directly and also provides increment and decrement buttons, with which a number can be specified. Figure 5.6 shows how it is used, and Figure 5.7 depicts the result. The min and max attributes specify the range of numbers allowed; the value attribute sets the initial number as 0; and the step attribute specifies that every click of the button should increase or decrease the value in the text field by 3.
1.2.2. Input Type:
range The range-input type displays a slide control for inputting an integer (whole) number, as opposed to decimal number. Figure 5.8 shows how it is used, and Figure 5.9 depicts the result. As in the previous example, the min and max attributes specify the range of numbers covered by the slide and the value attribute sets the initial number as 0.
The disadvantage of the range-input type is that it does not display any number. However, this functionality can be added using additional elements and attributes. Figure 5.10 shows an example of how to do this, and Figure 5.11 depicts the result. The <output> element is responsible for displaying the numbers, and its initial content is set as 0. In the <input> element, the min and max attributes specify the range of numbers covered by the slide; the value attribute sets its initial number as 0; and the oninput form event attribute says that when an input is made (i.e., when the slide is moved), the value of the element bearing the name “quantity” should be replaced with the value of the one bearing the name “slidelnput.” A form event attribute, as you may recollect from Chapter 2, is an event generated by a form element when its state changes.
In the previous example, the number displayed cannot be edited. However, it is possible to make it editable and also link it to the slide, so that the user can use either of the two to make an input. This can be done by combining the range-input type with the number-input type. Figure 5.12 shows an example, and Figure 5.13 depicts the result. In the number- type <input> element, the oninput attribute specifies that when the user enters a number in the box, the value of the range-input type should be replaced with that of the number-input type. The reverse happens with the oninput attribute in the range-type <input> element when the slide is moved. All other attributes play the same roles, as described in the previous example.
1.3. Input Types for Collecting Time and Date
Like the number-input type, the category of input types for collecting time and date provides appropriately formatted text fields for users to make direct input and also provides additional button controls for choosing options. The relevant input types are time, date, datetime-local, month, and week. The input types support the same attributes as the number-input types, namely, min, max, and step. If the min or/and max attributes are specified, controls display only dates or times that satisfy the specified limits, and the increment or decrement button increments or decrements them only according to the specified step value when clicked.
1.3.1. Input Type:
time The time-input type displays a text box and a control for setting time. Figure 5.14 shows how it is used, and Figure 5.15 depicts the result. To use the control displayed, the user clicks the relevant time component and types in a value or uses the up and down arrows.
1.3.2. Input Type:
date The date-input type displays a single-line formatted text box and a drop-down calendar for setting date. The input format allowed by the text field depends on the date convention of the region of the world of the user. Figure 5.16 shows how it is used, and Figure 5.17 depicts the result. To use the control displayed, the user, like with the time-input type control, clicks the relevant date component and types in a value or uses the up and down arrows. Various other arrows allow you to navigate to the required month and year.
1.3.3. Input Type:
datetime-local The datetime-local-input type displays a text box and a date and time control for setting local date and time. Figure 5.18 shows how it is used, and Figure 5.19 depicts the result. The control displayed allows you to choose a date by clicking the downward arrow to display the calendar and then clicking a day on it. The time is entered by clicking the hour, minutes, or seconds component and by using the arrows to set the values. It is worth noting that HTML also specifies a datetime-input type, which is intended for setting global date and time, including time zone information. However, it is not, as of time of writing, supported by any major browser.
1.3.4. Input Type:
month The month-input type displays a formatted text box and a month-and-year control for setting month and year. Figure 5.20 shows how it is used, and Figure 5.21 depicts the result. The control allows you to choose a month by clicking the downward arrow to display a calendar and then clicking the next or previous arrow to navigate to the desired month. Alternatively, you could click the button that displays all the months, to choose one.
1.3.5. Input Type:
week The week-input type displays a text box and a week-and-year control. Figure 5.22 shows how it is used, and Figure 5.23 depicts the result. The displayed control allows the user to choose the date by clicking the downward arrow to display a calendar. Different Web browsers display the control differently.
2. Input Types for Offering Options
These input types allow you to provide users with options, from which they can choose. The two input types used for this are radio and checkbox. Table 5.6 lists the attributes that they support.
2.1. Input Type: radio
The radio-input type displays a radio button and is used when you want users to choose only one from a set of options. Once a button is selected, it cannot be unselected by clicking it. It can only be unselected by clicking another button. This ensures that only one option can be chosen as answer to a question, and it is the values of the name and value attributes of the chosen option that are used to create the name-value pair that is sent to the server. This also means that radio buttons are not suitable when users are allowed to not choose an option. Figure 5.24 shows how the input type is used, and Figure 5.25 depicts the result.
In the example, notice that all the elements have the same name. This is because only one response is recognized for the question. It is worth noting that it may not always be a good idea to use the checked attribute, as it might cause some users to think that they have made a selection, even though they have not. This is because it is often easy to overlook things at a glance. In the case of the example, the consequence might be someone whose title is “Mrs” submitting the default response (i.e., “Mr”). Leaving all buttons unchecked makes it more unlikely that users will miss at a glance that they have not completed a question.
2.2. Input Type: checkbox
The checkbox-input type displays a checkbox that allows users to select or deselect it and is best for when you want users to be able to choose any number of options from a set of options per question. The values of only the checked checkboxes are sent to the server. The value of each checkbox is combined with the name to create a name-value pair for each option and sent to the server. Figure 5.26 shows how the input type is used, and Figure 5.27 depicts the result.
Notice that like with radio buttons, all the checkboxes for the question have the same value for the name attribute; however, more than one option can be selected. As long as the values of the value attributes are different, this is all right, since the name-value pair for each option will be different. From the viewpoint of the author who might write a script to process the form data, the common name identifies a question and the values of the value attributes identify the options associated with it. In addition, notice that there is space between each box and its label. This is because there is space in the code between each <input> element and its label.
2.3. Input Types for Starting an Action
These input types allow you to provide a push button that users can click or press to initiate an action. The action can be predetermined ones, such as the submission of a form, or it can be the execution of a script to perform a specific task. The relevant input types are submit, reset, button, image, file, and color.\
2.3.1. Input Type: submit and reset
The submit-input and reset-input types are presented together, because they are typically used together. The submit-input type displays a push button, which when clicked or pressed makes the browser start the process of packaging and sending the information entered into a form by a user to the Web server. The input type supports usual attributes but also some that relate to forms and their submission. Indeed, the attributes perform similar functions as those listed earlier in Table 5.1 for the <form> element. For example, the formaction attribute does the same thing as the action attribute in Table 5.1. Table 5.7 lists them and their function.
TABLE 5.7
Attributes for Submit and Reset Buttons
Like the submit-input type, the reset-input type displays a push button, but when clicked or pressed, it clears user’s inputs and resets all the controls of a form to their default values. Unlike the submit-input type, it supports only the name, value, disabled, autofocus, and form attributes. Figure 5.28 shows how both input types are used, and Figure 5.29 depicts the result.
2.3.2. Input Type: image
The image-input type allows you to specify an image to be used as a submit button. It supports the same attributes as listed in Table 5.7 for submit- and reset-input types, as well as the image-specific ones listed in Table 5.8. Figure 5.30 shows how the input type is used, and Figure 5.31 depicts the result.
The actual size of the image used in the example was 200 x 50 pixels and was reduced to 148 x 30 pixels. It is good practice to create an image that is as close as possible in size to the one required. This is because the process of reduction can cause problems, such as making the text on the image too small to be legible. If the image specified is not found, a visual predetermined by the browser is displayed instead. This can be just text or a box with text in it.
Unfortunately, unlike the submit- and reset-input types that perform predetermined functions when activated, the image-input type needs to be told what to do when it is activated, and this is typically done using the onclick event attribute (which generates an event each time the element on which it is used is clicked) and the submit() JavaScript function (which submits a form when it is called). For example, adding onclick=“submit();” to the <input> element in Figure 5.28 says to submit the form when the element (i.e., the image button) is clicked.
2.3.3. Input Type: button
Like the reset-input and submit-input types, the button-input type displays a push button but with no predetermined behavior. This means that like with the image-input type, you need to specify the function to perform when it is activated. Doing this again involves using the onclick event attribute and the submit() JavaScript function. The attributes that the input type supports are name, value, disabled, form, and autofocus. Figure 5.32 shows how the input type is used, and Figure 5.33 depicts the result.
The onclick attribute in the code specifies that when the <input> element is clicked to execute the JavaScript function called alert(), which displays the text between the quotes in an alert box. Different browsers display the box in different ways. Firefox was used in the example, in which when the “Show Message” button was clicked, the window changed to gray to indicate its current role as background and the box is displayed on top.
2.3.4. Input Type: file
The file-input type displays a single-line text field and a browse button to allow users to select files for uploading. However, it does not provide a control for the actual uploading; this is done using the submit-input type, which you have already read earlier in this chapter. Any time a website allows you to browse and select a file on your computer for upload, it is likely that it is the input type that is being used. The attributes supported are listed in Table 5.9. Figure 5.34 shows how the input type is used, and Figure 5.35 depicts the result.
The control in the example is from Internet Explorer. Different browsers display different designs of control. In Firefox, Chrome, or Opera, the text field is usually not as clear to see as of time of writing. Clicking the field or the button of the control displays a dialog box, with which the user can navigate to the required file or files. The accept attribute specifies that the file types expected are jpeg and png image files, and the multiple attribute specifies that many files can be selected for upload. Typically, selecting multiple files involves first selecting one and then holding down the Shift, Control, or Command key while selecting others.
2.3.5. Input Type: color
The color-input type allows you to display a color well (i.e., color picker), which allows a user to select a color for an element. Table 5.10 lists the attributes that it supports. Figure 5.36 shows how the input type is used, and Figure 5.37 depicts the result.
The code in the example displays a color button, which when clicked displays the color picker. The hexadecimal value (or hex code) of the color selected is what is stored and sent to the server. In theory, it is as if the user has entered the value into a text-input field.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.