Creating Forms on a Web Page

2 Introduction  Forms allow Web developers to collect visitor feedback  Forms create an environment that invites people to return to the site

3 Introduction Web page without a form Web page with a form

4 Creating Web Page Forms  Forms interact with Web page visitors in a variety of ways: –Get feedback about the Web page –Find out who is visiting the Web page –Sell products or services –Act as a guestbook

5 Creating Web Page Forms  A Web page form has three components –Input controls –FORM tag, which contains the information necessary to process the form –Submit button, which sends the data to be processed

6 Input Controls  An input control is a type of input mechanism on a form  A data input control allows a user to simply make a selection  A text input control allows the user to enter text into the control

7 Input Controls

8 Text Control  Allows for a single line of input  Two attributes –SIZE: determines the number of characters that display on the form –MAXLENGTH: specifies the maximum length of the input field

9 Password Control  Same as a regular text field, but characters display as asterisks or bullets  Holds the password entered by a visitor  Protects a visitor’s password from being observed by others

10 Textarea Control  Allows multiple lines of input  Two primary attributes –ROWS: specifies the number of rows in the textarea field –COLS: specifies the number of columns in the textarea field

11 Select Control  Creates a selection menu from which visitors can select one or more choices  Visitors don’t have to type in any information

12 Checkbox Control  Allows users to select more than once choice from a list of choices  Each choice in a checkbox list can be either on or off –Checkboxes are deselected by default

13 Radio Control  Limits the Web page visitor to only one choice from a list of choices  Each choice is preceded by a radio button, typically an open circle –Radio buttons are deselected by default

14 Reset and Submit Controls  The Reset button clears any input that was entered in the form  The Submit button sends the information to the appropriate location for processing –Web page forms must include a Submit button

15 Input Controls  Each input control has the following one or two attributes –NAME: Identifies the specific information that is being sent  All controls have a NAME –VALUE: The data that is contained in the named input control  All controls except TEXTAREA have a VALUE attribute

16 Form Tags  Input controls are tags or attributes of tags:

17

18 Identifying the Form Process  attributes –METHOD: Specifies the manner in which the form is sent to the server  The GET method sends the name-value pairs to the end of the URL indicated in the ACTION attribute  The POST method sends a separate data file to the URL –Class projects will utilize the POST method

19 Identifying the Form Process  attributes –ACTION: specifies the action that will be taken when the form is submitted  Information can be sent by to a central address  Information can be sent to the Web server for processing  Web sites can process information from forms using Common Gateway Interface (CGI) scripting

20 Identifying the Form Process determines how data is sent action to be taken when submitted

21 Adding Radio Buttons field namecontrol type value of field if “Yes” is selected Field name – must be the same for radio buttons value of field if “No” is selected

22 Adding a Text Field control type field name Number of characters that display on Web page maximum number of characters that can be input

23 Adding Textareas start textareafield name number of rows number of columns end textarea

24 Submit and Reset Buttons control type text to display on Submit button control type text to display on Reset button

25 Test on Friday – February 6th! Questions??? If you need a book, come and get one!