2. Creating Web Page Forms Maureen Smith Professor, Saddleback College HTML - Tutorial 6

3. Objectives In this tutorial you will: –Learn about CGI scripts –Review various parts of an online form –Create form elements –Create a hidden field on a form –Work with form properties –Learn how to send data from a form to a CGI script

4. –Learn how to send form information without using CGI scripts –Learn about enhancements to the HTML form elements

5. Session 6.1 In this session you will learn some of the fundamentals of creating forms with HTML –You’ll learn how forms interact with CGI scripts to transfer information from the browser to the Web server –You’ll also create your first form element, an input box

6. Working with CGI Scripts Lisa has been wondering how she wants the product registration form to appear –The company plans to use it to record customer information –A long form would discourage customers from completing it –So Lisa wants it brief and focused on information the company is most interested in

7. –See Figure 6-1--sketched form Form collects contact info for each customer, info on which product they purchased, what operating system they use, how they will use the product –Place to enter comments Although HTML supports tags that allow you to create such forms, it does not have ability to process that information

8. –One way of processing is to send it to a program running on the Web server called a CGI script –A CGI (Common Gateway Interface) script is any program running on the server that receives data from the Web page and then acts on that data to perform a certain task The introduction of CGI scripts represented dramatic change in the Web

9. –Became a dynamic environment in which companies could interact with customers and vice versa CGI scripts made it possible for Web authors to: –Maintain online databases containing customer information –Publish catalogues for ordering and purchasing items online

10. –Publish databases containing product support information –Determine number of times a Web page has been accessed –Create server-side image maps –Create message boards for online discussion forums –Manage e-mail for discussion groups

11. Because CGI scripts run on the server, you, as a Web author, might not have ability to create or edit them –Another programmer will create scripts and provide you with specifications, indicating what input the scripts expect and what output they create Good to restrict direct access to a CGI script

12. –When you run a CGI script, you are actually running a program directly on the server CGI scripts can be written in a variety of different languages –AppleScript, C/C++, Perl, UNIX shell, TCL, Visual Basic, ASP Which one depends on Web server –Check with ISP or system administrator

13. –Find out how CGI scripts are used on your server and what kinds of rights and privileges you have in working with them Servers at Jackson Electronics have a script that will perform task of retrieving data from registration form and then mailing results to one of Lisa’s assistants –You will not have access to the CGI scripts so will just be working with HTML end

14. –After Lisa uploads page to company’s server, others will test it and the script to verify that the info is passed on correctly

15. Starting on Online Form with the Tag The registration form contains the following elements, commonly used in Web page forms: –Input boxes for text/numerical entries –Radio buttons, also called option buttons, to select a single option from predefined list –Selection lists for long lists of options, usually in a drop-down list box

16. –Check boxes to specify item as being either present or absent –Text areas for extended entries that might include several lines of text –Submit and reset buttons to either submit form to CGI script or reset form to its original state Each element in which user can enter info is called a field

17. –Info entered into a field is called the field value, or simply the value –In some fields, users can enter anything they choose –Others, such as selection lists, confine values to predefined list of possibles Before creating any fields, must indicate to browser that the page will contain fields

18. –Done with the tag which identifies the beginning and end of a form –A single page can include several different forms, one after another, but you cannot nest them –General syntax is: Form elements and layout tags

19. –Between the form tags you place the various tags for each of the fields –Can also specify form’s appearance using standard HTML tags tag includes properties that control how the form is processed, including info on what CGI script to use and how to transfer to the script

20. –When you first begin designing form, can leave these properties out Prevents you from accidentally running the CGI script on an unfinished form, causing the script to process incomplete info –After finalizing the form’s appearance, can add necessary properties Because a page can contain multiple forms, tag includes NAME property

21. –Allows you to identify each form on the page –Not required for a page with a single form, but might be used if other forms are added at a later date –Will name the form REG, for registration –Lisa has already prepared an HTML file called Regtext.htm –See Register.html

22. With form tags in place, can start creating form layout –Figure 6-3 shows input boxes and other form elements aligned on page –Makes form easier to read than if scattered –Although you don’t need to use tables to create forms, they do help you control layout –Figure 6-5 shows simple two-column table you will use to create the form

23. –See Register_09.html With and tags in place, can now insert tags for each field –Will begin by learning how to create input boxes –Remember that you will be creating table rows/columns as you go

24. Working with Input Boxes An input box is a single-line box into which user can enter text/numbers –Use TAG, which can be used for several other types of fields as well –Syntax is: –where option is type of input field and text is name assigned to the input field

25. –To use tag for the many different kinds of form elements, change values for TYPE property to one of the following values, depending on what kind of element you want: BUTTON CHECKBOX HIDDEN IMAGE PASSWORD

26. RADIO RESET SUBMIT TEXT TEXTAREA Field you want to create now is an input box –Create using TEXT as value for TYPE property –TEXT is the TYPE property’s default value, so in most cases can be left out

27. The NAME property is required with the tag –When info from form is sent to CGI script, field names are used to identify what values have been entered in each field –See Figure 6-6 Note that value you enter for NAME property is not necessarily the “name” you see next to a form element

28. –Example 6-6 shows value for NAME property of first address line is “Address1,” but “name” of the input box is “Address #1 Which is what the user sees; former is sent to CGI script Two can be the same, but don’t have to be Some CGI scripts require that each form contain a particular field

29. –A CGI script whose purpose is to mail form results to another user might require a field named “email” that contains e-mail address of recipient –Check with ISP or system administrator to see whether there are any such required fields Finally, be aware that case is important in field names –Might not be interpreted correctly by CGI script

30. First part of registration form deals with contact info for customer –Each of the fields in this section is an input box –Because they are blank boxes without any accompanying text, have to insert a text description (such as “First Name”) next to each so user knows what to enter –See Register_11.html

31. Some browsers will wrap the input box for Zip to next line because there is not enough space to display it and the corresponding text on one line –Will fix it in next problem

32. Controlling the Size of an Input Box By default, browser made all input boxes same size--20 characters wide –Can specify a different size –Syntax is: –where value is size in number of characters Lisa decides First Name and Last Name should be increased to 25 for longer names

33. –Address #1 and #2 should be 50 characters –State can be reduced to 3 and Zip to 10 –City and Country can remain same –See Register_13.html

34. Setting the Maximum Length for Text Input By setting size of input box, you are not putting limitations on text entered into that field –If a user tries to enter longer text than input box, text will automatically scroll to left –User will not see all text at once, but all will be sent to CGI script Sometimes might want to limit number of characters user enters

35. –Check to verify that input is valid –Social Security number is 9 and you can keep users from erroneously entering 10 –Syntax is: Revise Zip field to restrict input to no more than 5 –See Register_14.html

36. Setting a Default Value for an Input Box Another property used with tag is VALUE –VALUE property sets default value of field and is also the value that appears in input box when form is initially displayed –If most people enter same value into a certain input box, saves time and increases accuracy if value appears for them

37. –Syntax is: –where value is default text/number that will appear –MUST enclose default value in quotation marks if it is a text string of several words Lisa wants Country field to be “United States”

38. –80% of their income and majority of users will save time –See Register_15.html If customers from countries outside US use this form, can remove default value by selecting text and pressing Delete key

39. Creating a Password Field In some cases users will not want info they enter into input box to appear on screen –One part might prompt for credit card number –Would like to prevent it from being displayed as security measure –Use a Password field –Password field is identical to input box, except that characters typed are displayed as bullets or asterisks

40. –Syntax is: Can specify size, maximum length, and name for your password –Should not be confused with having secure connection between Web client and server –Password itself is not encrypted, so can still be intercepted as it is being sent to CGI script

41. –Only acts as a mask for field entry as displayed on screen –Lisa does not need you to specify any fields as Password fields First part of registration form is complete –Because first few fields so far deal solely with collecting contact info, Lisa suggests a horizontal line to set them off from what follows

42. –Many Web designers recommend this visual separation of different topics –See Register_16.html Now test form by entering values in it –Press Tab to move from one box to next (Shift- Tab to move to previous) –Pressing Enter usually submits form, but you have not created submit button yet, so pressing Enter will do nothing at this point

43. Try other test values, like inserting extra text to notice it scrolling to left You’ve learned how forms and CGI scripts work together to allow Web authors to collect info from users –Seen how to create simple text input boxes –In next session, will add new fields to form, including a selection list, radio buttons, check boxes

44. Session 6.2 In this session you will learn how to create selection lists to allow users to select single or multiple options from a drop-down list box –Also create radio buttons for selecting single option values –Create check boxes for selecting one or more items in a list

45. –Finally, you’ll create text areas, also known as text boxes, for entering extended comments and memos

46. Creating a Selection List Next section is dedicated to collecting info about product customer has purchased and how they intend to use it –First field records product name –There are 6 Jackson Electronics products that the form covers Because the products constitute a predefined list, Lisa wants this info displayed with a selection list

47. –A selection list is a list box from which user selects a particular value or set of values, usually by clicking an arrow to open list and then clicking on item(s) –Guards against spelling mistakes and erroneous entries

48. Using the and Tags Create a selection list using tag and specify individual selection items with tag –Syntax is Option 1 Option 2.

49. –where text is the name you’ve assigned to the selection field, and Option 1 and Option 2 are the possible values displayed in selection list –Structure is similar to unordered list tags with and –Note that values for each option are entered to right of tag just as with tag

50. Next task is to add product selection list to registration form –See Register_19.html There are two additional input boxes associated with product info: product serial number and date of purchase –Will add these fields now –See Register_20.html

51. Modifying the Appearance of a Selection List HTML provides several properties to modify appearance and behavior of selection lists and selection options –By default the tag displays only one option from list, along with drop-down arrow to view other options –Can change number of options displayed by modifying SIZE property

52. –Syntax is: –where value is number of items selection list will display in form –By specifying a SIZE value great than 1, you change the selection list from a drop-down list box to a list box with scroll bar that allows user to scroll through various options

53. –If you set SIZE property to be equal to number of options in list, scroll bar is either not displayed or dimmed Lisa likes product selection list as is, so won’t specify a different value for SIZE property

54. Making Multiple Selections User is not limited to making only one selection from selection list –Can modify list to allow multiple selections by adding MULTIPLE property to tag –Syntax is: Most common way to make multiple selections is to hold down a specific key while clicking selected items

55. –With Windows interface, can make multiple selections with Ctrl key for noncontiguous selections or Shift key for contiguous selections If you decide to use multiple selection lists, should be aware that form will send a name/value pair to CGI script for each option user selects from list –Means the CGI script needs to be able to handle a single field with multiple values

56. –Check and verify that your CGI scripts are set up to handle this before using multiple selection lists

57. Working with Option Values By default, form will send to CGI script the values that appear in selection list –Sometimes will want to send a different text string from text displayed in list –This occurs when you display long descriptive text for each option in list in order to help user make informed choice –But you need only an abbreviated version of user’s selection for your records

58. –Can specify value that is sent to CGI script with VALUE property –Following code sends value “1” to CGI script if ScanMaster is selected, “2” is ScanMaster II is selected, etc. ScanMaster ScanMaster II LaserPrint 1000

59. Can also specify which option is initially selected (highlighted) when form is displayed –By default, first option is selected; however, using SELECTED property, can specify a different value –In following code, LaserPrint 1000 will be the option initially selected when user first encounters Product field on form:

60. ScanMaster ScanMaster II LaserPrint 1000 Don’t have to make any changes at this point –Will next turn to creating fields using radio buttons

61. Working with Radio Buttons Radio buttons are similar to selection lists in that they display a list of choices –Unlike a selection list, only one radio button can be selected and the act of selecting it automatically deselects any previously selected option Radio buttons use same tag as input boxes, except the TYPE property is set to RADIO

62. –Syntax is: <INPUT TYPE=RADIO NAME=text VALUE=value> –where text is name assigned to field containing the radio button and value is value of the radio button which will be sent to CGI script if that option is selected –NAME property is important

63. –It groups distinct radio buttons together, so that selecting one radio button in the group automatically deselects all others –Note that, like text input boxes, the tag does not create any text for radio buttons –In order for users to understand purpose of the radio button, must insert descriptive text next to tag as we did with input boxes –Value of radio button does not have to match accompanying text

64. Lisa wants radio buttons for product usage –Name of the field that will contain radio buttons is USE –Five possible choices: Home, Business, Government, Educational Institution, Other –See Register_25.html Notice that when form is first opened, none of radio buttons is selected

65. –In some cases might want to designate one of them as default and have it already selected when form opens –Add CHECKED property to tag for that particular button <INPUT TYPE=RADIO NAME=USE VALUE=BUS CHECKED>Business Lisa says most products are used by businesses

66. –Wants this option set as default –See Register_26.html When should you use radio buttons versus a selection list? –Use a selection list for long lists that would be difficult or cumbersome to display –Use radio buttons for short list of possible options with only one option allowed at a time

67. Working with Checked Boxes Next type of input field is check box field –A check box is either selected or not –Unlike radio buttons, is only one check box per field –Create check boxes using tag with TYPE property set to CHECKBOX –Syntax is:

68. –where text is name of the field –A check box field has the value “on” if check box is selected, and no value is assigned if check box is left deselected –Can use VALUE property to assign a different check box value from “on” –Following code assigns value “YES” to DEMOCRAT field if check box is selected:

69. <INPUT TYPE=CHECKBOX NAME= DEMOCRAT VALUE=YES> As with text input boxes and radio buttons, tag for check box does not display any text –Must add text next to tag to describe purpose of check box By default, check boxes are deselected when form opens

70. –Can use CHECKED property to automatically select a check box –Syntax is: <INPUT TYPE=CHECKBOX NAME= DEMOCRAT VALUE=YES CHECKED> Lisa wants 4 check boxes –Each identifies a type of operating system –Customers can select one or more

71. –Even though you’ll arrange them together on form, each one is associated with a different field Unlike radio buttons just created which are all associated with USE field –See Register_27.html Have now completed fields on form that deal with product and use –Separate with a horizontal line

72. –See Register_28.html Test the form

73. Creating a Text Area Next section allows users to enter comments about products they purchased –Probably will be long strings and sentences, so an input box might be too small –Use tag which creates a text box in which user enters extended comments –Syntax is: <TEXTAREA ROWS=value COLS=value NAME=text>default text

74. –where ROWS and COLS define number of rows/columns in the text box –Do not refer to rows/columns of a table, but rather ROWS is number of lines and COLS is number of characters allowed in each line –Default text is the text that appears in box when form opens –Although not required, could use default text to provide additional instructions

75. <TEXTAREA ROWS=3 NAME= COMMENTS>Enter comments here When form is displayed, text “Enter comments here” is automatically entered –Unlike other field tags, is a two-sided tag, even if you don’t specify any default text

76. Text you enter into a text box does not automatically wrap to next row –Instead, a text box acts like an input box, with text automatically scrolling to left as additional text is typed –Can override this by using WRAP property –See Figure 6-24

77. Will usually want to set value of WRAP property to either VIRTUAL or PHYSICAL to allow text to automatically wrap within the text box –Difference lies in how text is sent to CGI script –Setting to PHYSICAL preserves any line wrapping that takes place in text box –VIRTUAL does not

78. –Should check documentation of CGI script to see whether one method is preferred For Comments field, will use tag with WRAP property to VIRTUAL so user’s comments will wrap automatically to next line –Size of text area will be 4 lines high and 50 characters wide –Won’t specify any default text

79. –See Register_30.html You’ve now added input boxes, a selection list, radio buttons, check boxes, and a text area –In next session, will learn how to set up form to work with a CGI script

80. Session 6.3 In this session you will learn how to create submit and reset buttons to either send your form to a CGI script or reset it to its initial state –You’ll learn how to create image fields –You’ll also work with form properties to control how your form is submitted to the CGI script

81. –You’ll learn about one way to process form data without using a CGI script –Finally, the session ends with an introduction to some of the new form tags and properties

82. Creating Form Buttons Another type of form field is one that performs an action when activated--as a button does when the user clicks it –Buttons can be used to run programs, submit forms, or reset the form to its original state SUBMIT

83. Creating Buttons that Perform Actions To include a button that performs an action, such as calculating a value or validating the user’s input, create a button using TYPE=BUTTON property –Can insert programs that will respond when this button is clicked and run described calculations

84. Creating Submit and Reset Buttons When user finishes entering info on form, that info can be submitted to CGI script, or, if user made a mistake, form can be reset to original default values without submitting anything to CGI script –Both actions can be done by clicking a button –Create Submit and Reset buttons using same tag used before

85. –TYPE property is set to either SUBMIT or RESET or –Can also specify NAME and VALUE properties although they are not required Would use them when you have more than one Submit button and CGI script performs a different action when different buttons are clicked See Figure 6-26

86. VALUE property also changes text that appears on button to whatever you choose –Don’t have to be labeled Submit or Reset Lisa wants form to include a Submit and a Reset button –Submit button is to be labeled “Send Registration” and Reset button is to be labeled “Cancel” –See Register_33.html

87. Creating Image Fields Another form element is the inline image –Can act like Submit buttons so when user clicks image, form is submitted –Differ from Submit buttons in what kind of info is sent to CGI script –Use tag but with TYPE property set to IMAGE

88. –URL is filename or URL of inline image, NAME property assigns a name to the field, and VALUE property assigns a value to image –When form is submitted, coordinates corresponding to where user clicked inside image are attached to image’s name and value in the format: NAME.x_coordinate, VALUE.y_coordinate

89. –If page contains following inline image form element: –See Figure 6-29 Will not include any inline images in form

90. Working with Hidden Fields Lisa is pleased and shows code to Warren, a programmer at Jackson and person responsible for CGI script you will be using –Notices only one thing missing--e-mail address of Lisa’s assistant who will receive forms through e-mail –Warren’s script requires a field named EMAIL Otherwise won’t know what to do with form when user clicks Submit button

91. Unlike other fields, e-mail field has predefined value (e-mail address) which customers should not be able to change –Shouldn’t even see it on form –Need a hidden field, one that is part of form but not displayed Use tag with TYPE property set to HIDDEN

92. –Warren says name of field should be EMAIL and Lisa says e-mail address is “adavis@Jkson_Electronics.com Because field is hidden, can place it anywhere between tags –Standard practice is to place all hidden fields in one location, usually at beginning

93. –Add a comment –See Register_36.html With recipient field now on form, will return to first tag ( ) and insert properties needed for it to interact with CGI script

94. Working with Form Properties Have all the elements on form –Final task is to specify where to send form data and how to send it –Must modify properties of tag –Three properties you’ll work with: ACTION, METHOD, and ENCTYPE ACTION property identifies CGI script that will process form

95. –where URL is URL of CGI script (provided by ISP or person who wrote script) –Yours is http://www.Jkson_electronics.com/cgi/mailer –FICTIONAL and will not connect Now know where to send info; next have to determine how to send it

96. –METHOD property controls how Web browser sends data to server running CGI script –where type is either GET or POST –Distinction is technical and extends beyond scope of this book –In brief, GET (default) packages form data by appending it to end of URL specified in ACTION property

97. –POST method sends form info in a separate data stream, allowing server to receive data through “standard input” –POST is more flexible and is considered preferred way –Warren says his e-mail program uses POST method Another form property might be concerned with is ENCTYPE

98. –ENCTYPE property specifies format of data when transferred from Web page to CGI script –where text is the data format (beyond scope of book) –ISP will indicate any special values need to include with ENCTYPE property –Warren’s script uses default encoding value

99. Final property might use with tag is TARGET –If form is part of framed Web site, use TARGET property to specify which frame receives output from CGI script Now will make some final modifications –Must enter ACTION property to specify what CGI script will receive form data and that POST method will be used for processing

100. –See Register_38.html Are finished! –Warren will transfer Register.html file to a folder on company’s server –From there can be fully tested to verify that the CGI script and form work properly and that data is mailed to Lisa’s assistant

101. To allow you to see how this form would work in practice, a modified version is at http://www.careys.com/Jkson_Electronics /Register.htm –Can open and test it

102. Using the MAILTO Action You have built a form to use Warren’s e- mail CGI script –Can send it through e-mail without using script –Starting with version 3.0, Netscape began supporting an ACTION property called MAILTO –Accesses user’s own mail program and uses it to mail form to a specified e-mail address, bypassing need for scripts

103. –where e-mail address is e-mail address of recipient of form info –Without a script, can avoid problems associated with coordinating your page with a program running on the server –But not all browsers support it (IE earlier than 4.0 and Netscape 3.0)

104. –And messages sent via MAILTO access are not encrypted for privacy and could be intercepted by hackers –Also, recipient’s e-mail address will be revealed to user –So some authors are leery of using this action

105. Additional Form Elements Specs for HTML forms are constantly being modified and updated –In HTML 4.0, new enhancements have been proposed that will make online forms more flexible and easier to create –Not supported by all major browsers, so use care and test in different browsers –All of the following should work with IE 4.0 or higher, but not by Netscape at all

106. Creating Buttons with the Tag tag provides new way to add buttons –Are more versatile than buttons, supporting both character and graphic elements

107. Assigning Labels to Fields In creating Jackson’s form, had to enter text for each input field alongside field itself –HTML 4.0 introduces tag by which you can assign labels to each field –A label can be associated with a field in one of two ways: either the field is placed within a pair of tags, or the tag is assigned to a specific field using FOR property

108. –One advantage of using it with radio buttons and check boxes is that the user can click either the label or the field itself to select or deselect tag also includes ACCESSKEY property –An access key, or accelerator key, is a keyboard character that can be pressed, usually with CTRL, ALT, or OPTION in order to jump to or select a field

109. Creating Group Boxes May want to group together fields on form that share common theme or appearance –A group box will be placed around these fields to visually show grouping –In HTML 4.0 can create such a group box with the tag

110. Specifying the Tab Order Users usually move through a form with the tab key –Default order is from one field to another in order that the field tags were entered into HTML –Have to be careful to place them in correct order Another option is to use TABINDEX property

111. –TABINDEX property can be added to any field tag in form –Each field is assigned a tab index number and fields are then tabbed to in order of their tab index numbers--from lowest positive to highest Older browsers will ignore this property Have finished working with forms and form properties