1. TUTORIAL 6: CREATING A WEB FORM Session 6.2.

2. OBJECTIVES Create a text area Create a selection list Create option buttons Create check boxes

3. CREATING A TEXT AREA Text area boxes allow users to enter comments. An input box would be too small to accommodate the length of text for this use.

4. CREATING A TEXT AREA To create a text area box, use the textarea element:...

5. PRACTICE: TEXT AREA 1. Within the custInfo field set, transform the address text box into a text area box.

6. CREATING A SELECTION LIST A selection list is a list box from which a user selects a particular field value or set of field values. text1 text2 …

7. CREATING A SELECTION LIST

8. Alternative (list): text1 text2 … Example

9. PRACTICE: SELECTION LIST 1. Within the buildPizza field set, create a selection list for the crust field along with the text Choose Your Crust. The selection list should display the option text Thin, Thick, Stuffed, and Pan with option values equal to the option text.

10. CREATING OPTION BUTTONS Option buttons, or radio buttons allow users to make selections. …

11. PRACTICE: OPTION BUTTONS 1. Within the meat field set, add a label with the text Location followed by four inline images for full.png, left.png, right.png, and none.png files with the alternate text full, left, right, and none, respectively. 2. Create a group of four option buttons for the pepperoni field with the field values full, left, right, and none, respectively. Make none option checked by default. Nest the four options within a fieldset element belonging to the optionGroup class.

12. CREATING CHECK BOXES To create a check box, use: Where the name attribute identifies the check box controls and the value attribute specifies the value sent to the server if the check box is selected. To specify that a check box be selected by default, use the checked attribute as follows:

13. PRACTICE: CHECK BOXES 1. Directly after the vegetable field set, create a check box for the doubleCheese field with the label text Add Double Cheese. Create another check box for the doubleSauce field with the label text Add Double Sauce.