1. Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson

2. Robinson_CIS_285_2005 Agenda Class #3  Forms  JavaScript

3. Robinson_CIS_285_2005 Objectives  Define terms related to forms  Describe the different form controls and their uses  Use the tag  Create radio buttons  Create a text field  Create a textarea field

4. Robinson_CIS_285_2005 Objectives  Use the tag  Create a selection menu  Insert options into a selection menu  Create a Submit button  Create a Reset button

5. Robinson_CIS_285_2005 Introduction  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

6. Robinson_CIS_285_2005 HTML Forms  HTML forms are enhanced HTML documents that look like paper forms  When a user submits a form to the Web server, the browser Submits the value of each form element to the Web server as a parameter Submits the form element values in a parameter list, containing the name of every form element and its current value  A form can be created anywhere within an HTML document using the form tag

7. Robinson_CIS_285_2005 Creating Web Page Forms  A Web page form has three components Input controls FORM tag, which contains the information necessary to process the form Command buttons, which a user clicks to perform an action

8. Robinson_CIS_285_2005 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

9. Robinson_CIS_285_2005 Forms – Text Input Controls  Text  Password  Text Areas

10. Robinson_CIS_285_2005 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

11. Robinson_CIS_285_2005 Text Code  Please give us your name:

12. Robinson_CIS_285_2005 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

13. Robinson_CIS_285_2005 Password Code  And your password:

14. Robinson_CIS_285_2005 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

15. Robinson_CIS_285_2005 Textarea Code  Which golf accessories will you need in the next year ? 

16. Robinson_CIS_285_2005 Forms - Check Boxes  Define an element that can have one of two opposite values, such as true or false, or on or off  If the check box’s tag contains the checked attribute, the check box appears checked when the form first appears

17. Robinson_CIS_285_2005 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

18. Robinson_CIS_285_2005 Check Box Code  Which course(s) do you like to play?  Kapalua  St. Andrews  Muirfield  La Paloma  Note: checked=“checked” would be in the code if the check box was to be shown as selected upon “retrieval” of the Web page  

19. Robinson_CIS_285_2005 Check Box Syntax  type tells the browser to produce a checkbox field  name specifies the variable where the returned value will be stored  value stores what will be returned in the variable when the box is checked. VALUE can be anything you choose. If you don't specify a VALUE, the value of checked fields defaults to "on". If a field is not checked, no value is returned to the ACTION program (as though the field did not even exist on the form).

20. Robinson_CIS_285_2005 Forms - Radio Buttons  Radio Buttons allow the user to select a single value from a group of related values  Related radio buttons are defined as a radio button group, which allows the user to select only one button in the group at a time  Each radio button in a radio button group has the same name attribute value

21. Robinson_CIS_285_2005 Radio Buttons  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

22. Robinson_CIS_285_2005 Radio Button Code  Do you like to golf?  Yes  No  Note: checked=“checked” would be in the code if the radio button was to be shown as selected upon “retrieval” of the Web page  

23. Robinson_CIS_285_2005 Forms - Selection Lists  Define a list from which the user can select specified values  The Web developer can populate the list using static values or from a database

24. Robinson_CIS_285_2005 Creating a Form with Selection Menus  The select control creates a selection menu  This control only allows the visitor to choose pre-defined choices – user does not type anything in the form  There are four types of selection menus:

25. Robinson_CIS_285_2005 Selection Menu Types

26. Robinson_CIS_285_2005 Select Control – 1 Choice Selection(s) Visible - One  1) Favorite color: …  &nbsp &nbsp &nbsp &nbsp  Red Blue Yellow Green 

27. Robinson_CIS_285_2005 Select Control – 1 Choice Selection(s) Visible - Three  1) Favorite color: …  &nbsp &nbsp &nbsp &nbsp  Red Blue Yellow Green 

28. Robinson_CIS_285_2005 Select Control – Multiple Choices Selection(s) Visible - Three  1) Favorite color: …  &nbsp &nbsp &nbsp &nbsp  Red Blue Yellow Green 

29. Robinson_CIS_285_2005 Select Control – Multiple Choices Selection(s) Visible - Four  1) Favorite color: …  &nbsp &nbsp &nbsp &nbsp  Red Blue Yellow Green 

30. Robinson_CIS_285_2005 Command Buttons  A command button is a form element that a user clicks to perform an action  A special kind of command button called a submit button can be created by setting the type attribute value to submit

31. Robinson_CIS_285_2005 Command Buttons  When a user clicks a submit button, the form submits the values of the form elements as parameters to a form processing program defined in the form definition tag  A reset button can also be created in a Web form  reset button: form clears all form element values or resets them to their initial values  To create a reset button, the input type attribute value is set to reset

32. Robinson_CIS_285_2005 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

33. Robinson_CIS_285_2005 Submit and Reset Code 

34. Robinson_CIS_285_2005 Notes on Hidden Fields  A hidden form element is an element that is not visible to the user  Developers use hidden form elements to submit data values to the Web server that are not currently visible on the form  Technically, hidden fields are not meant for data input

35. Robinson_CIS_285_2005 Hidden Fields  General syntax:  A use of hidden fields is to enable a single general script to process data from different forms – script needs to know which form is sending the data, and a hidden fields can provide this info.  Drawback: Can be seen in the source code

36. Robinson_CIS_285_2005 Input Controls Summary

37. Robinson_CIS_285_2005 Input Control Attributes:  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

38. Robinson_CIS_285_2005 Form Attributes  name: is required if you want form controls processed on the client side; otherwise, it is optional  action: Specify the destination Web page where the form is processed  method: Specify how to send form to the Web server, either “post” or “get”

39. Robinson_CIS_285_2005 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 This project will utilize the POST method

40. Robinson_CIS_285_2005 Identifying the Form Process  attributes action: specifies the action that will be taken when the form is submitted  Information can be sent by e-mail to a central e-mail address  Information can be sent to the Web server for processing  Web sites can process information from forms using Common Gateway Interface (CGI) scripting

41. Robinson_CIS_285_2005 Identifying the Form Process  mailto:ahs@isp.com Determines how data is to be sent Action to be taken when submitted

42. Robinson_CIS_285_2005 What You Should Know  Identify the Form Process  Text Fields and Password Fields  Textarea Fields  Radio Buttons  Selection Menus  Create Submit and Reset Buttons