1. Web Forms

2. Web Forms: A form allows our web visitors to submit information to us. Some examples uses for forms are to let the web user contact us, fill out a survey, sign up for an email list, or do something interactive on our site. Once the information is submitted, a web server is required to process the information. In this class, we will focus only on the design of the web form, not the processing.

3. Adding a Form to a Web Page: The element defines a web form. All components of the form must be placed within the opening and closing tags.

4. Adding a Text Field: body { background-color:#CCCCCC; } First name: The tag is used for several different types of input. We specify how we want it to display by defining the type attribute. type="text" specifies a text box. The size attribute defines how many characters wide the text box should be. name="xxxxx" specifies a name for the information. This is used later by the server when processing the data submitted.

5. Adding Radio Buttons: body { background-color:#CCCCCC; } Student Class: Freshman Sophomore Junior Senior type="radio" specifies a set of radio buttons, which allow the user to select one and only one of the options listed.

6. Adding Checkboxes: body { background-color:#CCCCCC; } Favorite Colors: Blue Green Red Orange Yellow type="checkbox" specifies a set of check boxes, which allow the user to select one or more of the available options.

7. Adding a Drop-down List: body { background-color:#CCCCCC; } My class: Freshman Sophomore Junior Senior The tag, along with several elements, creates a drop- down list, from which the user can choose one available option. By adding multiple="multiple" to the tag, we can allow the user to select more than one of the available options in our drop-down box (by holding the Shift key down).

8. Adding a Text Area: body { background-color:#CCCCCC; } Let us know what you think: Enter your comments here. The element creates a larger box where the user can type in a lot of text. The width and height of the box that displays on the web page is controlled by the rows="y" and cols="x" attributes. Whatever text is placed between the opening and closing tags will display in the textarea box itself.

9. Adding a Submit Button: body { background-color:#CCCCCC; } Let us know what you think: Enter your comments here. To collect the information the user has provided, we need to add a button for the user to click to indicate that they have completed the form. The type="submit" creates a submit button. Whatever text we place in the value="xxxx" attribute is what will display on the button itself.

10. Sending the Form Data: body { background-color:#CCCCCC; } Let us know what you think: Enter your comments here. Once the user submits the form data, we need to send the data somewhere for processing. With the action="filename", we are telling the browser which file to send the data to. The method="post" or method="get" are the two different options for sending the data for processing. Since we do not have a web server, we will not go further into how this works right now.