Download Chapter 5. HTML Forms and more Study notes Computer Science in PDF only on Docsity!
Chapter 5. HTML Forms
- Objectives Table of Contents
- 5.1 Introduction................................................................................................................................................
- 5.2 Creating Forms
- 5.2.1 Starting a Form
- 5.2.2 Single-line Text Entry
- 5.2.3 Multi-line Text Entry....................................................................................................................
- 5.2.4 Radio Buttons
- 5.2.5 Check Boxes
- 5.2.6 Menu Buttons and Scrolling Lists
- 5.2.7 Submit and Reset Buttons
- 5.3 HTML5 form elements
- 5.3.1 Email address field
- 5.3.2 Search
- 5.3.3 Url
- 5.3.4 Autofocus
- 5.3.5 Dates and Times
- 5.3.6 Color
- 5.3.7 Numbers as Spinboxes
- 5.3.8 Numbers as Sliders
- 5.4 Using Forms.............................................................................................................................................
- 5.5 Additional Content and Activities
- 5.5.1 Supplementary information on HTML forms.............................................................................
- 5.5.2 Additional Activity — Tabular Layout of a Complex Form
- 5.6 Review Questions
- 5.7 Discussions and Answers
- 5.7.1 Discussion of Activity
- 5.7.2 Discussion of Activity
- 5.7.3 Discussion of Activity
- 5.7.4 Discussion of Activity
- 5.7.5 Discussion of Activity
- 5.7.6 Discussion of Activity
- 5.7.7 Discussion of Activity
- 5.7.8 Discussion of Activity
- 5.7.9 Discussion of Additional Activity
- 5.7.10 Answer to Review Question
- 5.7.11 Answer to Review Question
- 5.7.12 Answer to Review Question
- 5.7.13 Answer to Review Question
- 5.7.14 Answer to Review Question
- 5.7.15 Answer to Review Question
- 5.7.16 Answer to Review Question
- 5.7.17 Answer to Review Question
- 5.7.18 Answer to Exercise
- 5.7.19 Answer to Exercise
- 5.7.20 Answer to Exercise
Objectives
At the end of this chapter you will be able to:
- Create forms with basic elements such as text boxes and buttons:
- Create forms using HTML5 elements such as form validation and email address fields.
5.1 Introduction
Forms are best learnt using a hands on approach. To become proficient with HTML forms you need to create many, sorting out the problematic nuances as you go along. Therefore, the main content of the unit is a series of sections: the first is a short introduction to HTML forms; the second discusses each form element, and involves some textbook study. (You may find it more convenient to postpone activities until you have covered all the form elements).
This introduction covers the main form elements. It also explains the process that occurs when a form is submitted. The main elements of forms are: Text fields; Password fields; Text areas; Radio buttons; Check boxes; Menu buttons and scrolling lists; Submit and reset buttons; and file picker. HTML5 defines a number of new input types that can be used in forms. Examples are Email address fields; web address fields; numbers as spin boxes and sliders; date pickers; search boxes; color pickers; form validation; and required fields. We will look at some of these in this chapter.
5.1.1 Processing Forms
Although forms could simply be used to display information, HTML provides them in order to supply a way for the user to interact with a Web server. The most widely used method to process the data submitted through a form is to send it to server-side software typically written in a scripting language, although any programming language can be used. The figure below outlines the kind of processing that takes place.
- The user retrieves a document containing a form from a Web server.
- The user reads the Web page and interacts with the form it contains.
- Submitting the form sends the form data to the server for processing.
- The Web server passes the data to a CGI programme.
- The CGI software may use database information or store data in a server-side database.
scripts, and are instead setting this attribute to an imaginary email address (which causes the form data to be emailed to that address).
ACTION="mailto:[email protected]"
Putting these together gives us:
To Do
Read about Forms in your textbooks.
Activity 1: Starting a Form
This is the first step in creating a form. You may build on this activity in later ones by using the document you create here as a starting point (or you may prefer to save each different form with a name corresponding to the activity). First, create a new HTML document called form.htm.
Enter the normal and tags. Then include the following tag:
Remember to close the form with the tag. Press the return key a few times to move it down the page, as you will be entering further code.
Finally, view your work in a Web browser, but be warned: at the moment there is little to show!
Read Discussion of Activity 1 at the end of the Unit.
5.2.2 Single-line Text Entry
A single-line text entry allows the user to input a small amount of text, like a name or an email address.
This is achieved with the following:
Please input your name:
The tag has the following elements:
**** is the tag used for most of the form objects.
TYPE="text" sets the object to a single-line text field.
Size="40" sets the field to show 40 characters.
MAXLENGTH="30" means that only a total of 30 characters can be typed in this field.
NAME="personal-name" sets the text field's name to be personal-name (this information is part of the form data sent on for further processing). The name is required to identify the value data which will be associated with it. For example, if the text box was for an email address or telephone number, we might set this attribute
with a more suggestive value, e.g. NAME="email" or NAME="tel-no". The easiest way to choose the name is simply to use the purpose of the field.
VALUE=... Another attribute, VALUE , can be used to place an initial text in the field. As might be expected, if this text is left unchanged it becomes the value associated with the NAME when the form is submitted. Putting an initial value in the field is usually not required, but can be used as a prompt. For example, the following HTML produces the figure that comes after it:
Name:
Do not confuse the use of 'name' when we refer to the NAME attribute of an tag with the possibility of using name as the text field's actual name, or 'Name' being used in a text field that prompts the user for their own name (as in the example immediately above).
Exercise 1
After the following HTML form has been rendered by a browser, a user enters their age. The form is subsequently submitted for processing to a CGI script. Write down the name/value pair that is sent to the server-side software. Solution can be found at the end of the chapter.
To Do
From your textbooks and Internet resources, read about the types of text that you can set for a text-entry, such as password and hidden types. Look at the Additional Content and Activities Section for some on-line resources.
Activity 2: Single-line Text Entry
In the HTML document you created before (form.htm), or a new one (as you prefer), create
- A text field for your name that is 35 characters long.
- A text field for your email that is 40 characters long.
- Three text fields for your address, each 40 characters long, and an additional smaller field for your postal code.
Test your code to ensure that it produces something as shown below. You may find it convenient to implement and test each part of the form separately.
Read Discussion of Activity 2 at the end of the Unit.
is provided, as in the figure below:
Solution can be found at the end of the Unit.
To Do
Read about Text Area in your textbooks.
Activity 3: Multi-line Text Entry
In an HTML document do the following:
- Replace the address text fields with one text area large enough to hold the whole address. Use the facilities of the and Yes No
Notice that the same name — chocolate — has been used for each element. This is necessary because when the form is submitted only the value of the currently selected radio button will be submitted with the given name. The software processing the data will either receive chocolate=yes or chocolate=no , which allows for straightforward processing.
Example 2
This is achieved with:
Do you agree that the Earth orbits the Sun?
Strongly agree
Agree
No opinion
Disagree
Strongly disagree
The tag and its attributes are as follows.
**** is the tag used for most of the form objects.
type="radio" sets the object to a radio button.
name="orbits" labels the entire set of radio buttons. This makes identifying the data easier. For example if the radio button was for the question 'Do you own an automobile?', you might set name="automobile"
VALUE=... With a set of radio buttons for one question, it is not enough to provide a name only. We need to give each radio button a value so that the form-processing software (CGI script or email) can determine which radio button has been selected. This is where the value attribute comes in. Each of the values above is set to the answer for that radio button. This information is sent with the data when the form is submitted. Hence, the form in the above figure would submit orbits=strongly_agree.
CHECKED This has not been used in the above example. If it were included, the button is set as if it had been clicked. This is useful is one choice should be made the default.
To Do
Read about Radio Buttons in your textbooks.
Activity 4: Radio Buttons
In an HTML document, add these numbered questions and create radio buttons for them.
- Do you like playing computer games? Yes / No
when the form is submitted for processing. Hence, in the above example, yes will be associated with each of the name values movies , science and sports.
CHECKED This has not been used in the above examples. If it were included as an attribute of the tag, the check box would be set as if it had been clicked by the user. This is useful if one or more options are to be offered as defaults.
To Do
Read about Check Box in your textbooks.
Activity 5: Check Boxes
Imagine you are developing a website that sells various types of watch. You want to allow customers to select what they want to buy with a set of check boxes, as in the figure below.
Write an HTML form to achieve this (note the tabular layout). Remember that a server-side script may be expecting the prices of the checked items, so these values will need to be transmitted for processing.
Read Discussion of Activity 5 at the end of the chapter.
5.2.6 Menu Buttons and Scrolling Lists
Menu buttons and scrolling lists are useful when you have multiple options to choose from. For example, the following shows a menu button (sometimes imprecisely called a pull-down or drop- down menu). Clicking on the 'select a colour' option on the button displays all the other options in the button's menu. Pulling down to the required option will set the value for this element (for subsequent transmission).
If the menu button is near the bottom of a window, the menu pops up:
Notice that, by convention, the first option of a menu button is usually not an option at all, but a prompt to suggest an action to the user. Hence, in the previous example, 'select a colour' is not an option but a prompt. However, if the form containing this menu button were submitted for processing, the value 'select a colour' would be associated with the named attribute.
Scrolling lists, otherwise known as selection lists, are similar to menu buttons, but they usually display more than one of the available options at a time. They rarely show all options, and the user is required to scroll in order to view them all. If all the options are displayed, no scroll bar is included with the list, and it may not be obvious to the user that they should select an option.
The above example could be redesigned using a scrolling list. The figures below show the three options, and all six options (excluding the prompt):
One clear benefit of these two input elements are that they do not take up as much space as, say, a list of radio buttons. Like radio buttons, they are also used to select one choice one from a set of mutually exclusive options.
The HTML for the menu button and scrolling list (the three-option version) are given below:
- Month: January, February, March, April, May, June, July, August, September, October, November, December
- Year: 1960, 1961, 1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1991, 1992, 1993, 1994, 1995, 1996
Read Discussion of Activity 6 at the end of the chapter.
5.2.7 Submit and Reset Buttons
Submit and reset buttons have simple uses: they allow the user to send the form data onwards for processing, or to clear the form fields of all entered information.
For example: a user has ordered a large pizza on-line. They have entered four possible topping selections. To send the data for processing, the user clicks on the button labelled 'Order the pizza'. If the user were to make an error and wish to restart, clicking the button labelled 'Clear to restart' will remove the text from the multi-line text area and (as it happens) reset the choice of pizza size to 'Medium'.
The new elements in this example are the buttons labelled 'Order the pizza' and 'Clear to restart', which are submit and reset buttons respectively. When a submit button is clicked, the Web browser looks at the tag to see how the data should be processed. It will either be sent as an email, as shown below, or sent for processing by a server-side script. Here is HTML for the above example:
We only use fresh ingredients and some pizza toppings may not be available. We will supply three from your list.
Please list preferred toppings in order:
Pizza size:
Small
Medium
Large
Buttons can be customised to perform other functions, such as navigation, by using JavaScript (developers mostly use images and text links for navigation, however) See the Extension section.
A submit button may, in fact, be replaced with an image. For instance, the above example can be
modified as follows:
The tag for this submit button uses image as the value of the TYPE attribute and adds a SRC attribute to specify the image to be used, as in:
Clicking on an image used as if it were a submit button has exactly the same effect as a standard submit button, in that the form data is dispatched for processing.
Note that there is no corresponding facility to replace a reset button with an image.
To Do
Read about Submit and Reset Buttons in your textbooks.
Activity 7: Submit and Reset Buttons
Implement the check box example on personal interests and add submit and reset buttons. Test the reset button by checking several options and then clearing them by clicking Reset. To test the submit button, set the form (using the ACTION attribute) to send email to a real address.
Test how the submit button works when using the default encoding (see your textbook). You should receive a binary file attachment at the email address in the ACTION attribute. You can open this with a text editor (like Notepad).
Change the tag to include the encoding ENCTYPE="text/plain" and resubmit the form. Examine the email to see how its contents have changed.
Read Discussion of Activity 7 at the end of the Unit.
5.3 HTML5 form elements
Create a new HTML file and practice the HTML5 elements in this section.
5.3.1 Email address field
The first of these new input types is for email addresses. You can allow the input field to access multiple inputs by using the multiple attribute as shown below. For : separate each email with a comma. Try typing an email address without the @ field and notice that the browser performs a simple validation.
5.3.2 Search
Search functions are perfomed on popular websites such as Google, e-commerce sites as well as personal blogs. It is probably the most common action performed on the Web every day. With HTML5 you can create a simple search action by using:
- min="0" specifies the minimum acceptable value for this field.
- max="10" is the maximum acceptable value.
- step="1", combined with the min value, defines the acceptable numbers in the range: 0, 1, 2, and so on, up to the maxvalue.
- value="0" is the default value that displays before selecting another number.
5.3.8 Numbers as Sliders
By changing the input type from ‘number’ to ‘range’ you can change the spibnoxes to a slider. Use the markup:
5.4 Using Forms
It is time to consider how organizations can make use of forms on their websites. This primarily involves investigating and discussing how commercial enterprises on the Web currently make use of forms.
Activity 8: How websites use Forms
For this Activity you will need to take a look at a number of websites:
- Amazon Books [http://www.amazon.com]
- Loot Free Ads [http://www.loot.com]
- Google [http://www.google.com]
- Ebay on-line auctions [http://www.ebay.com]
- Any of the computer manufacturers (e.g. Dell [http://www.dell.com])
Make a note of the following:
- The ways in which websites make use of forms.
- The different types of data that the website are trying to gather. Are there any distinct differences?
To finish this section, you will develop two extensive Web pages that make use of forms.
Activity 9: Job Application Form
Create an on-line job application form. The application form is for a computer company called SpeedyPC who are advertising for computer programmers. Your form’s action should post the application to your email address.
Your application form must have the following elements:
- Position applied for (autofocus), name, nationality, date of birth (selected from an auto picker), address (in a text area), telephone number and email (required).
- Educational history and qualifications.
- Work experience/employment/training in terms of employer history and number of years of experience selected from a slider. Set maximum years of experience to 10 years.
- Personal statement.
- Two referees including names, occupation, relationship, address, telephone.
Read discussion at the end of the chapter.
5.5 Additional Content and Activities
5.5.1 Supplementary information on HTML forms
Spend 10-20 minutes reviewing the tutorials at one or both of these sites:
- Bare Bones Guide to HTML [http://werbach.com/barebones/barebone.html]
- Yale C/AIM Web Style Guide [http://info.med.yale.edu/caim/manual/contents.html]
5.5.2 Additional Activity — Tabular Layout of a
Complex Form
Create a form for processing orders for boxes that looks like those in the figures below. The order form is for a company called 'Land of Boxes'. Their product line consists of only five items:
- The EconoBox: Cost R
- The Standard Box: Cost R
- The Premium Box: Cost R
- The Deluxe Box: Cost R
- The Super Deluxe Box:. Cost R
The order form should include the following elements:
- Contact details of purchaser, including name, address, telephone number and email.
- Product details including price, product name, product number and product quantity.
- Method of payment including credit card type, card number and expiry date.
- Billing address and delivery address if they are different.
- The final layout should look as shown in the next two figures. You will need to use tables or CSS styles to achieve this layout.
Answer at the end of the chapter.
- Is the size of the text a user can enter in a text field limited by the value of the SIZE attribute in the tag?
Answer at the end of the chapter.
- What attribute must be included in a Vegetarian Food
European Food
Middle Eastern Food
Far Eastern Food
London Times
Washinton Post
Le Figaro
Aisle Seat
Window Seat
Middle Seat
Answer at the end of the chapter.
- How do you set the initial state of a check
box? Answer at the end of the chapter.
- How do menu buttons and scrolling lists differ in how they save space on a Web
page? Answer at the end of the chapter.
- Create a scrolling list that shows four items from the following list of personal computer processor types: Motorola 68000, Intel 8088, Intel Pentium MMX, Intel Pentium II, Intel Pentium III, Intel Celeron, PowerPC G3, PowerPC G4, AMD Athlon.
Answer at the end of the chapter
5.7 Discussions and Answers
5.7.1 Discussion of Activity 1
Your document will probably look something like this:
Form example
You will notice that nothing shows when this form is rendered because it has none of the interactive elements that make forms useful.
5.7.2 Discussion of Activity 2
To produce the text fields one by one:
- The name text field (below) and its HTML.
Name:
- The email text field (below) and its HTML.
Email:
- The three address fields and the post code field (below), with the HTML.
