Overview and Objectives Up to this pont we have seen only very limited interactivity between the user and any of our web pages. In fact, all a user coud do was type n the URL of a page and press Enter to dispay that page, or click a link on one page to browse to another page. That is, there has so far been no way for the user to supply any additona informa tion to a website, through one of its web pages, have the site process the information in some way, and then return some new information to the user based on the data sup plied. This kind of twoway communication scenario is extremely usefu in a business environment, since it permits a user to make product choices, pay for them online, and suppy a shippng address, for example. This chapter marks the beginning of our discussion of how such twoway communi cation is accompished, and the first thing we need to study is how a web form can be paced on a web page in preparation for accepting information from the user on the cient side. n subsequent chapters you wil see how that information can be transmtted to the server and how your website can process, and respond to, the data received from its visitors. In this chapter we wil discuss the folowing: ▸The genera idea of a web form ▸The form element (though we postpone a dscussion of the GET and POST values of its action attribute, since these ndicate how we wish to submit the form’s data, and in this chapter we are only creating forms, not submitting their data to a server) ▸The input element ▸The select and option elements ▸The textarea eement ▸The submit and reset button elements ▸The fieldset and legend elements ▸The label element and its for attribute ▸Setting up a form that alows a user to compute his or her Body Mass Index (BMI) ▸Setting up a form that alows a user to submit feedback to our business ▸Getting ready to submit form data (but not actualy submitting it) Aso in ths chapter our examples wi focus entrey on form design and we wil not return to an update of our fu website example until Chapter 7, after we have discussed forms (this chapter), form data validation via JavaScript (Chapter 6), and dropdow 5.2 The form Element165 menus (also mplemented using JavaScript) as an exampe of nteraction with the DOM (Document Object Model) and interactively changing our document’s Cascading Style Sheets (CSS) styes (Chapter 7). 5.1 Web Forms Collect User Input Data in a Browser for Transfer to a Server for Processing We are all familiar, perhaps too familiar, with the forms we have to fill out in our everyday lives, such as employment applications, medical reports, student loan applications, income tax forms, and so on. Online forms contain the same kinds of blank spaces or “textboxes” to be filled in, checkboxes to be checked, and so on, and we need to learn how to set these things up for data entry on our website. Even though a user can only communicate with a website in two basic ways—by clicking on various parts of a web page using a pointing device such as a mouse, or by typing text using a keyboard—such a web form allows the information supplied in this way to be quite sophisticated. Once a web form is filled out, it “looks and feels” much like its paper counterpart. Submit ting a web form, however, is accomplished in a different manner. Usually there is a button, often labeled Submit, that the user clicks, and there may also be one labeled Reset, to permit the user to start over and reenter form data. It is what happens after the user clicks Submit that we will discuss in later chapters. We are going to illustrate simple form design through two examples for our business: 1.The first one will be a web page containing a form that is essentially a tool to help users find out if their weight is reasonable by calculating a quantity known as the BMI. 2.The second one will be a page containing a standard user-feedback form of the type used by many websites to gather user opinions on everything from the usability of the site to the overall customer experience if it is an e-commerce site. 5.2 The form Element Placing a form on a web page is done using an HyperText Markup Language (HTML) form element. This element acts like a “container” for the usual kinds of things you see on a form, in the sense that between the and tags you place the other HTML tags that create the visual “widgets” that allow data entry by the user when the web page is displayed. Let us begin with a web page that will eventually serve as your BMI calculator. Look at the HTML markup from the file bmi1.html shown in FIGURE 5.1 to see how we introduce a form element into a web document. The relevant HTML code is shown in lines 12 and 13 of that file: The displayed web page itself does not look any different (see FIGURE 5.2) from any of the previous web pages you have seen so far. The page has no CSS styling and therefore uses the default browser fonts and font sizes and the page will grow and shrink according to any resizing of the browser window. Note that the mere introduction of the (empty) form element has no effect on the display. However, it helps us study the tag without worrying about the rest of the details. We have identified our form element as bmiForm by giving this value to its (optional) id attribute. This is generally a good idea, since we may have more than one form and in any case it allows us to identify the form for styling or access by JavaScript. We should also say something about the action attribute of the form element, which is not shown here. The value of the action attribute is generally the name of the serverside script or other program that will process the data from the form when that data is submitted to the server. Since you are not submitting at the moment, you don’t need that attribute. However, this is one of the few differences between XHTML and HTML5 that can lead to some confusion. For XHTML markup to validate, the action attribute of the form tag had to be present and have a value, but if the form was not being submitted that value could be the empty string. What is potentially confusing is that in HTML5 the action attribute is optional, but if present the value cannot be the empty string. That is why we simply omit the action attribute, but if you are looking at the markup of others you may well see action="" as a form attribute. In later chapters, when you submit your form data, you will have Personal Home Page (PHP) scripts that run on your server and process that data, and the value of the action attribute will then contain the name of one of those scripts. Obviously, having just an empty form element on a web page is not very interesting. The following sections will show you how to put different form elements on your BMI calculator page. These other HTML elements that are placed within the form element itself and determine the interactive behavior of the form are also called form controls, or, more informally, just “widgets”. 5.2.1 A Brief Aside, a Reminder, and Some Good Advice Just before we move on, let’s discuss a brief aside. Note that the HTML file in Figure 5.1 contains an HTML element you have not seen before, a center element (see line 10). The effect of this element should be obvious: It centers its content, in this case the h1 element, and this is certainly a very easy way to achieve that effect. Unfortunately, the HTML center tag is now deprecated, which means that even though it still works it should no longer be used in new markup and may eventually not work at all. This begs the question: Why was it deprecated? Well, because “centering” something is a “presentational” aspect of that thing, and therefore rightly should be handled by CSS, which you will do in the next example. We use the center element here to remind you once again that you should try to avoid the easy way out when developing new web pages. One way of staying the course is to make sure you continually validate your web pages. If you attempt to validate the file bmi1.html, for example, you will find that in fact it does not validate as HTML5, precisely because of the presence of the center element. 5.2.2 How Will We Deal with CSS from Now On? From now on, we will handle our CSS in the following way. We will have, for each chapter, either a single CSS file called default.css, (or two files called desktop.css and tablet.css if we want to make use of responsive design, which we do not in this chapter). Any such files we are using in a given chapter will be placed in a subdirectory called css. If we have a default.css, it will contain all CSS styles used for the general sample files in that chapter. Not every style will necessarily be used for every sample file in the chapter, but that does not matter. In fact, that is the point. We can put all our styles in one place (one file) and link any HTML document file that needs to use one or more styles in that style file. Of course, for a large and complex website you may well want to have more than one style file, but the point remains. Subsequent files in this chapter will be making use of the version of this file corresponding to this chapter. We will only discuss the default.css file if it contains something of particular interest or a new CSS feature of some kind. If a later chapter also contains an updated version of our complete website, we will put the corresponding files in a subdirectory whose name starts with nature and which has its own css subdirectory containing its own default.css (or desktop.css and tablet.css, as the case may be). We actually began this convention in the last chapter, where we had four such subdirec tories, nature1 to nature4, containing four different versions of our website, but we will not see a nature subdirectory again until Chapter 7. 5.3 The input Element One of the most versatile HTML form controls for collecting data from users is the input element. It allows you to create form fields (places where the user can supply data of some sort) of various types. The kind of data that an input form field will accept is determined by the value of its type attribute. Here are some possible values for this attribute: ▸text creates a one-line text box whose visible width, in characters, is determined by the value of the size attribute, and for which the maxlength attribute specifies the maxi mum number of characters allowed as input. ▸radio creates a “radio button” that usually appears as a small circle in a group of small circles, only one of which may be selected. ▸checkbox creates a small box, generally square, that may be “checked” or “unchecked” and also often appears in a group that (unlike the radio button) permits multiple boxes to be checked. We use the center element here to remind you once again that you should try to avoid the easy way out when developing new web pages. One way of staying the course is to make sure you continually validate your web pages. If you attempt to validate the file bmi1.html, for example, you will find that in fact it does not validate as HTML5, precisely because of the presence of the center element. 5.2.2 How Will We Deal with CSS from Now On? From now on, we will handle our CSS in the following way. We will have, for each chapter, either a single CSS file called default.css, (or two files called desktop.css and tablet.css if we want to make use of responsive design, which we do not in this chapter). Any such files we are using in a given chapter will be placed in a subdirectory called css. If we have a default.css, it will contain all CSS styles used for the general sample files in that chapter. Not every style will necessarily be used for every sample file in the chapter, but that does not matter. In fact, that is the point. We can put all our styles in one place (one file) and link any HTML document file that needs to use one or more styles in that style file. Of course, for a large and complex website you may well want to have more than one style file, but the point remains. Subsequent files in this chapter will be making use of the version of this file corresponding to this chapter. We will only discuss the default.css file if it contains something of particular interest or a new CSS feature of some kind. If a later chapter also contains an updated version of our complete website, we will put the corresponding files in a subdirectory whose name starts with nature and which has its own css subdirectory containing its own default.css (or desktop.css and tablet.css, as the case may be). We actually began this convention in the last chapter, where we had four such subdirec tories, nature1 to nature4, containing four different versions of our website, but we will not see a nature subdirectory again until Chapter 7. 5.3 The input Element One of the most versatile HTML form controls for collecting data from users is the input element. It allows you to create form fields (places where the user can supply data of some sort) of various types. The kind of data that an input form field will accept is determined by the value of its type attribute. Here are some possible values for this attribute: ▸text creates a one-line text box whose visible width, in characters, is determined by the value of the size attribute, and for which the maxlength attribute specifies the maxi mum number of characters allowed as input. ▸radio creates a “radio button” that usually appears as a small circle in a group of small circles, only one of which may be selected. ▸checkbox creates a small box, generally square, that may be “checked” or “unchecked” and also often appears in a group that (unlike the radio button) permits multiple boxes to be checked. submit creates a button on which you can place a label (often just the word Submit) and, when clicked on with the mouse, causes the data that has been entered in the form to be acted upon. ▸reset also creates a button on which you can place a label (often just the word Reset) and allows the values in the form to be cleared, or set to their default values, thus permit ting the user to start over. So, any desired control is obtained by supplying the appropriate value from the above list as the value of the type attribute of the input tag. For example, in FIGURE 5.3 you see illustrated input controls of type text (lines 18 and 26), radio (lines 20–21 and 28–31), and checkbox. (line 36). FIGURE 5.4 displays our first “real” form, since it contains some actual “fields”, form controls for entering or indicating data input. Each of the controls in the form displayed in Figure 5.4 is created by using an input element. These controls include the things that we call “textboxes”, “radio buttons”, and a “checkbox”, and which are produced by the corresponding HTML markup referred to above and seen in the file bmi2.html of Figure 5.3. Note, first of all, as promised in the previous section, that we are no longer using the (depre cated) HTML center element for centering our page title, but instead a class called Centered, which is defined in this chapter’s default.css1 file and used with the h4 element. Second, note that for this form we are using a table layout with three rows and four columns to contain the controls used to collect information from the user. We can argue for a table layout here as the appropriate choice, since a table makes sense whether we are displaying data, or, as in the current case, collecting data. Note that although we are using a table, it is not immediately obvious since we do not display any table borders. And now for the details . . . 5.3.1 Textboxes (input Elements of Type text) The empty textbox in the first row of the table (line 18 of Figure 5.3) allows a user to enter his or her height. This is the markup that creates this textbox: As you can see, the input element is an empty element, and this one has three attributes. The type attribute tells the web browser what kind of input control this one is (textbox, checkbox, radio button, and so on). In this case, the value text indicates we have a textbox. The name attribute is used to identify this particular HTML element and distinguish it from other elements of the same kind. This will be useful (necessary, in fact) when you write programs to process the information in this form control that will be “submitted” via the form, although we do not make use of it here. The size attribute is used for textboxes to indicate how many characters will fit into the text box “window” as displayed on the screen. Users can type more characters, but only the first size characters will be displayed (and seen by the user). We have chosen a value of 7 as a reasonable one for the size of this particular textbox. There is also an attribute called maxlength (not seen here) whose value can be used to restrict the maximum number of characters that may be entered. In other words, there are actually two sizes: a “visible size” and a “maximum size”. Although we have not used it here since it did not make sense to do so, the value attribute may be used to place a “default value” into the box. In any case, it is the value of the value attri bute that will be used when this data is eventually processed as part of the form submission, since whatever is entered into the textbox by the user becomes the value of the value attribute. It is important to note that, just because we have given the name attribute of the form field that will receive the user’s height the value height, does not make it obvious to users that they are supposed to enter their height into that particular textbox. That is why we have inserted the text Height:into the table column on the left. You can (and should) also use the label element to group the text that prompts the user for a height value, and the textbox that actually receives that height, into a logical unit. For simplicity we will omit this feature temporarily and come back to it at the end of the chapter in section 5.9. 5.3.2 Radio Buttons (input Elements of Type radio) To the right of the height field we have two radio buttons, which are created by the markup in lines 2021 of Figure 5.3. The user will click one of these to specify the unit for height as either inches or centimeters. We again use the input element to create each of these radio buttons, and this time we need the value radio for the type attribute. When used for radio buttons, the behavior of the input element is a little more complicated, because radio buttons are normally used in a group. Radio buttons in the same group are identified by having the same value for the name attribute. We distinguish them based on the values of their value attributes. In our example, the first group of radio buttons contains two buttons and is found to the right of the height field. The common name for this group of radio buttons is heightUnit. The value of the value attribute for the first radio button in the group is in, corresponding to “inches”. The second radio button has the value cm for the value attribute, corresponding to “centimeters”. Using the same name for both radio buttons ensures that only one of them can be selected at a time by the user. You may want to verify this fact by opening the file bmi2.html in a browser and clicking on each of these radio buttons in turn. The thing to note is that if one button is “selected”, that is, has been clicked and shows a “bullet” in the center of its circle, and then you click the other button, the first one is “deselected” as the second one becomes “selected”. The next row is essentially identical to the previous one in structure and format. It is used to obtain the user’s weight and choice of weight unit. Again, we have three input elements. The first input element, of type text, is named weight. The next two input elements give us radio but tons grouped under the name weightUnit, with values lb (for pounds) and kg (for kilograms) Checkboxes (input Elements of Type checkbox) The third type of input element lets us create checkboxes. An example of a checkbox also appears in bmi2.html, in the table row just below the row for weight input (see line 36 of Figure 5.3). Checkboxes are similar to radio buttons in many ways. Multiple checkboxes can also be grouped together under the same name and distinguished by value just like radio buttons, even though our example only uses a single checkbox. Our checkbox has the name details and the value yes. You will note that in the display of Figure 5.4 the checkbox is not checked by default. This is the typical case, and the user is asked to check the textbox if he or she wishes to take the option represented by that particular checkbox. There may, however, be times when you want the check box checked by default. To accomplish this, the input element also has another attribute with the name checked. This attribute need only be present to cause its intended effect. It does not need a value. The point of including the attribute is to have the checkbox checked by default when the page is displayed, should you wish to do that. The attribute checked can also be used (and is, in fact, more often used) for radio buttons, but in that case you should make sure that only one of the radio buttons in the group is checked (the one the user is most likely to choose, presumably). It should be noted that data from input controls of type radio or checkbox is actually “submitted” by the submit button only if the corresponding checked attribute is present. 5.4 The select and option Elements for Dropdown List-boxes In the previous section we illustrated how radio buttons can be used to allow a user to specify a choice of units for weight and height. Another method for letting the user pick an option is through a dropdown list-box (also called a dropdown menu, but we call this particular version a dropdown list-box to distinguish it from the dropdown menus we introduce in Chapter 7). Drop down list-boxes are especially useful when the number of options is large, because they use much less display space on a web page. The web page bmi3.html displayed in FIGURE 5.5 shows a dropdown list-box for units of height and weight. The corresponding form element markup is shown in FIGURE 5.6. We will only focus on the code between the ... pairs of tags (the select ele ments) in bmi3.html (lines 20–23 and lines 29–32). The rest of the file shows you nothing you have not already seen in bmi2.html. Any select element used to create a web page dropdown list-box should be provided with a value for its name attribute for the same reasons you would give a name to an input element. Each text item corresponding to an option in the dropdown list-box is specified by the text content of an ... tag pair. By default the option that appears first in the markup will appear in the little window of the dropdown list-box, so you should leave that option empty if you want the box to appear empty. In our example, the select element for the weight unit has attribute name="weightUnit" and the select element for the height has attribute unit name="heightUnit". Both of these dropdown listboxes have only two options. We have not included name attributes for the option elements, but when submitting a form you may want to do this as well. 5.5 What Is Missing from the BMI Calculator Web Page? If you look at the display in Figure 5.5 for a moment, it should be clear that there is something missing. This web page allows the user to enter some information that will be needed to perform a certain kind of calculation, but does not provide any visible way to cause the calculation to take place. In other words, it is missing a “button” of some kind that the user can click on, and after which the BMI calculation will be performed and the results displayed to the user. In this chapter we are concerned only with displaying the button, not activating it. As we have said earlier, we will deal with the calculations in the next chapter. But bear with us for a bit while we also postpone the introduction of buttons onto our BMI calculator page. In the next couple of sections we will start our second example, the feedback form, and use it to introduce both the textarea element (for extended text entry) and the submit and reset buttons for data submission and form reset. Then we will come back to our BMI calculator and extend it with buttons and some other enhancements. 5.6 The textarea Element Providing a mechanism for getting feedback from its visitors should be one of the essential fea tures of any ecommerce website. If the right kind of information is obtained and used properly, the user experience can be enhanced and sales inc It is a good idea to separate the name into two fields, one for the first name and one for the last name. This will help avoid any confusion between first and last names, and also allow you to personalize any response to the user by using his or her first name, or a salutation followed by the last name, depending on the context. The textarea element allows you to provide a large text area for the user to enter a message, since you can specify its size by supplying the desired number of rows and columns as values of its rows and cols attributes. Some users may just want to have a oneway communication. Others may wish to receive a reply. Therefore, we give the user a choice of receiving a reply using a checkbox at the bottom. We do need to point out a couple of things about the HTML markup of the form in feedback1.html (see Figure 5.7). First, since the salutation is obtained from a dropdown listbox, we have again used a select element to contain the options. However, since we did not want to presume any particular salutation, we have left the content of the first option element empty (see line 17), causing the dropdown listbox to appear empty in Figure 5.8. Actually, if you look closely you will see that it is not quite empty. Its content is the HTML entity  , a useful entity whenever you want to ensure that you have an actual space at some location. In fact it’s a “nonbreaking” space, so a new line will not be created at that space, which is not a feature you need at this point. Leaving all content out of the option element would work fine as far as display ing the page is concerned, but if you are using an editor to format your code you need to be careful that it does not remove empty elements from your markup. This may be something you want most f the time, but not in this situation, so putting this HTML entity in as the content avoids that problem and has the same effect as an empty option element. There is nothing unusual about the following five fields that are used to collect the first name, last name, email address, phone number, and subject. They are all textboxes created by using input elements with their type attributes set to text. The second new thing of interest in this form is, of course, the textarea element in line 46. This particular textarea element has no content between its and tag pair, but if you wished to have some default text displayed when the page is rendered, you could supply that text as the element content. Just like other form fields, the textarea tag has an attribute called name, which we have set to the value message. Two additional attributes for the textarea tag are rows and cols, and they allow us to specify the height (number of rows) and width (number of columns, or characters) of the text area, respectively. We have chosen to have 6 lines (rows), each one allowing for 30 characters (columns). By default, a textarea element is “scrollable”. That means a user can enter more than six lines of text, and the textarea control will then show a vertical scroll bar on the right. The option that determines whether a user receives a reply uses an input element with the type attribute set to a value of checkbox. The name of the field is reply. We have set the value to be yes, in case the user does check the checkbox and data from this control is submitted. There is no checked attribute because we want the checkbox to be unchecked by default when the page displays. 5.7 The submit and reset Button Elements In general, every form needs to “submit” the data entered by the user to be processed in some way. This capability is usually provided by a “submit button”. Another useful button to have on a form is a “reset button”, which can be used to clear any information that may have been entered and give the user a chance to start over. FIGURE 5.9 shows our complete feedback form that includes buttons for submitting and resetting. Since the rest of the form is exactly the same as the one in feedback1.html, we show in FIGURE 5.10 only the HTML markup that creates these buttons. We use the versatile input element to create both the submit and reset buttons. The type attribute must be set to submit to get a submit button. The value attribute for our submit button is set to Send Feedback, which is the text label that appears on the button in the display of the form. A value of reset for the type attribute of the input element creates a reset button. Its value attribute is set to the text Reset Form, which appears as the visible label on the reset but ton when the web page containing the form is displayed. The reset button is immediately active, in the sense that if you enter some data and click on the reset button, the data will disappear from the form. However, we have not yet activated the submit button in the sense of connecting it to a script (program) that will process the data, and will do so only in a later chapter when we have some programming code (a script) to respond when a user clicks on this button and data is submitted. 5.8 Organizing Form Controls with the fieldset and legend Elements Usually, the highlevel view of a web form consists of several logical partsrequired input, optional input, processing buttons, and so on. Each logical part, in turn, consists of a group of fields to col lect or deal with in some way a particular category of information, and we now return to our BMI example to discuss how we can emphasize these logical groupings in a web page display. We have a more refined version of our BMI calculator form shown in the display of ch05/bmi4.html in FIGURE 5.11. From the figure you can see how the three “logical chunks”