Creating Web Page Forms

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

Objectives CGI? • 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

Learn how to send form information without using CGI scripts • Learn about enhancements to the HTML form elements

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

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

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

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

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

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

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

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

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

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

Starting on Online Form with the <FORM> 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

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

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

Done with the <FORM> 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 Properties> Form elements and layout tags </FORM>

Between the form tags you place the various tags for each of the fields • Can also specify form’s appearance using standard HTML tags • <FORM> 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

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, <FORM> tag includes NAME property

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

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

See Register_09.html • With <FORM> and <TABLE> 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

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

To use <INPUT> 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

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

The NAME property is required with the <INPUT> 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

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

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

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

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

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: <INPUT SIZE=value> • where value is size in number of characters • Lisa decides First Name and Last Name should be increased to 25 for longer names

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

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

Check to verify that input is valid • Social Security number is 9 and you can keep users from erroneously entering 10 • Syntax is: <INPUT MAXLENGTH=value> • Revise Zip field to restrict input to no more than 5 • See Register_14.html

Setting a Default Value for an Input Box • Another property used with <INPUT> 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

Syntax is: <INPUT VALUE=“value”> • 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”

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

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

Syntax is: <INPUT TYPE=PASSWORD> • 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

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

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

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

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

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

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

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 For those who due knot no how too spel

Using the <SELECT> and <OPTION> Tags • Create a selection list using <SELECT> tag and specify individual selection items with <OPTION> tag • Syntax is <SELECT NAME=text> <OPTION>Option 1 <OPTION>Option 2 . .

</SELECT> • 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 <UL> and <LI> • Note that values for each option are entered to right of <OPTION> tag just as with <LI> tag

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

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 <SELECT> 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

Creating Web Page Forms