Computational Thinking on the Internet
Chapter 6: Interacting with Users
After completing Chapter 6, you will know how to:
- Define the elements of an HTML form and create a Web form to collect information from site visitors.
- Write HTML code to create input fields, radio buttons, check boxes, menus, and textareas.
- Design the prompts that ask users to respond.
- Process the response when users input information via HTML forms.
A form is an HTML Web page element that prompts the user to fill in one or more blanks and/or select items from a menu of possible choices, which are followed by a button that the user clicks to submit the response after filling in the form. Chapter 6 steps you through the process of creating a form and making it e-mail you the form results. This is a very simple yet powerful way of using the Web to gather information from people. After you work through the tutorial in the book, you can customize the form to collect the kinds of information you would like to gather.
End of Chapter Labs
Lab Project 6.1: Making a PayPal Buy Now Button
A person-to-person payment system called PayPal enables users to sell products over the Web without needing to set up a complicated e-commerce solution. Instead, you simply create an HTML form containing a PayPal "Buy Now" button which, when clicked, posts data to the PayPal server indicating what product the user wants to buy from you. The PayPal system handles all the rest.
PayPal uses two special form techniques to power its button. First, PayPal uses hidden fields to identify the business that is selling the product, the name of the product that is being sold, and the selling price. Second, PayPal substitutes the image for the submit button that normally appears on an HTML form. After explaining these two special form techniques, this lab will step you through the process of creating a PayPal Web form.
Note: The PayPal lab includes a detailed tutorial that you work through in the book. Everyone who is working through this book can create the PayPal form that this tutorial shows you how to construct. In order to make the PayPal Buy Now button actually sell something, however, you need to have a PayPal account. Do not worry about this. The tutorial does not require you to have a PayPal account. The purpose of this exercise is to show you how to create a form that uses hidden fields and an image button. The tutorial does not require you to buy or sell anything online.
Lab Project 6.2: Making Web Forms Accessible
The critical aspect of Web form design is making it clear what it means when the user checks a box to select it, types in a field to specify something, or clicks a radio button to make a choice. For users who can see, the Web design accomplishes this by putting form elements in logical groupings onscreen.
What about someone who cannot see? People who cannot see access the Web via special software called a Screen Reader. True to its name, the Screen Reader will read aloud what a sighted user sees onscreen. How do you make it possible for the screen reader to know how to group what is pictured onscreen in a Web form?
You do this by putting the <label> start and </label> stop tags around the information associated with each part of the form. Instead of coding a checkbox like this:
<input type="radio" name="Frequency" value="monthly">Monthly
You surround the control with label tags, like this:
<label><input type="radio" name="Frequency" value="monthly">Monthly</label>
Likewise with a checkbox, instead of coding like this:
<option value="2"> Socks
You surround the control with label tags, like this:
<label><option value="2"> Socks</label>
So also do you use label tags to make input field prompts, like this:
<label>What is your email address?<input type="text" name="Email" size="50" maxlength="150"></label>
In complex forms that have a lot of control groups, you use the <fieldset> start and </fieldset> stop tags to contain the grouping, and you use the <legend> start and </legend> stop tag to describe what the group is doing. Therefore, instead of coding a group like this:
<p>
How often do you want to get our news?
<br>
<label><input type="radio" name="Frequency" value="daily">Daily</label>
<br>
<label><input type="radio" name="Frequency" value="weekly">Weekly</label>
<br>
<label><input type="radio" name="Frequency" value="monthly">Monthly</label>
</p>
You code the group with <fieldset> and <legend> tags, like this:
<p>
<fieldset><legend>How often do you want to get our news?</legend>
<label><input type="radio" name="Frequency" value="daily">Daily</label>
<br>
<label><input type="radio" name="Frequency" value="weekly">Weekly</label>
<br>
<label><input type="radio" name="Frequency" value="monthly">Monthly</label>
</fieldset>
</p>
Submitting Your Web Form Accessibility Lab
If your instructor asked you to submit this Web Form Accessibility Lab, what you submit is an HTML file in which you demonstrate your knowledge of the <label> tag for associating labels with their respective form elements, and you use the <fieldset> and <legend> tags to define each control group in your form. In completing this assignment, you can either submit an accessible version of the subscription form shown at the beginning of this chapter in Figures 6-1 and 6-2, or you can create a form of your own that contains controls that a screen reader would need to have labeled and grouped. Before you submit your file, test it with your browser to make sure it works correctly.
