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 visitors 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 dont 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 byto a centraladdress 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!