Tutorial 6 - Creating Web Page Forms

Tutorial 6 - Creating Web Page Forms
By Susan Fuschetto Modified by Marge Hohly Tutorial 6

Objectives Learn about CGI scripts
Review the 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 Tutorial 6

Creating a Registration Form for Jackson Electronics
Products - printers, copiers, and flatbed scanners Currently fewer than 10% of registration cards are returned Solution: Create an online registration form Send the form via Administrative staff performs data entry into the company's database Tutorial 6

Working With CGI Scripts
HTML used to create a form, but not ability to process the information in the form CGI (Common Gateway Interface) scripts run on a Web server processes the data A CGI script is any program or set of commands running on the Web server that receives data from the Web page and then acts on that data to perform a certain task Process a customer's order Update a database Access a server-side image map Validate the form's data entry Send information back to the Web page Tutorial 6

CGI scripts have made it possible for users to interact with companies and vice versa: Maintain online databases Publish catalogues for ordering and purchasing items online Publish databases containing product support information Determine the number of times a Web page has been accessed Create server-side image maps Create message boards for online discussion forums Manage for discussion groups Just to name a few Tutorial 6

CGI scripts run on the server, therefore you may not have access to them Another programmer will create the script and provide you with the specifications of the input and outputs the script will work with Why? System administrators want to control access to their servers. Tutorial 6

CGI scripts can be written in a variety of languages: AppleScript C/C++ Perl The UNIX shell TCL Visual Basic (VBScript) ASP (Active Server Pages) and more Which language depends on the server Check with your ISP or system administrator as to what scripts are used and what your rights and privileges are for working with them Tutorial 6

Jackson Electronics Registration Form The CGI script is on the Jackson Electronics' server It retrieves the data from the form Sends the data in an message to administrative staff The administrative staff performs the data entry into the company's database You will not have access to the CGI script You will just be creating the HTML form In theory, the programmer of the CGI script will test the script and form together on the server Tutorial 6

Tutorial 6

Creating an Online Form
Form elements may contain: Input boxes for text & numerical entries Radio buttons (option buttons) to select a single option from a predefined list Selection lists for long lists of options, usually in a drop-down list box Check boxes to specify an item as being either present or absent Text areas for extended entries that might include several lines of text Submit buttons to submit the form to the CGI script Reset buttons to reset the form to its original state Tutorial 6

Users enter information into the elements referred to as fields The data entered into field is called the field value, or simply value Use the <FORM> tag to create the form You may create more than one form on a Web page You may not nest a form inside of another form Tutorial 6

Tutorial 6

Syntax: <FORM Properties> Form elements and layout tags </FORM> Specify the form's appearance using standard HTML tags, such as tables and italicized header tags The <FORM> tag includes properties that control how the form will be processed by the CGI script, but you start by building the form first, then the CGI properties Tutorial 6

Since there can be multiple forms on a page, you add the NAME property to the <FORM> tag The NAME property is not required when there's only one form on the page, but it is good practice if you might add more forms later The NAME property value is case sensitive Registration form: Open Regtext.htm and save as Register.htm NAME = REG View Example #1 Initial form Tutorial 6

Adding the <FORM> tag and NAME property to Register.htm Tables help with form layout Two columns & 11 rows 2nd column has more than one field Tutorial 6

Insert the table tags inside of the form tags in Register.htm You will be creating the rows and columns as you create the input elements Tutorial 6

Working with Input Boxes
NAME property is required The NAME is used by the CGI script to identify fields and their respective values Tutorial 6

An input box is a single-line box into which the user can enter text or numbers Syntax: <INPUT TYPE=option NAME=text> Option is the type of input field Text is the name assigned to the input field TEXT is the default TYPE, so if you don't specify a TYPE, then the browser will assume TEXT TYPE properties are BUTTON, CHECKBOX, HIDDEN, IMAGE, PASSWORD, RADIO, RESET, SUBMIT, TEXT, and TEXTAREA We discuss each of these TYPES during this lecture Tutorial 6

The NAME property is used by CGI script and not seen by the user on the form So, you need to add a field label for each field in the form Let's start with the contact information in the Register.htm form Add rows and columns between the table tags Add field labels Add INPUT BOXES Leave the TYPE property off since these are text boxes and TEXT is the default type Tutorial 6

View the Example #2 – INPUT boxes Syntax: <INPUT NAME=text VALUE=value SIZE=value MAXLENGTH=value> Name is field name Tutorial 6

Controlling the Size of an Input Box
All input boxes by default are the same size - 20 characters wide Specify the size with the SIZE property Syntax: <INPUT SIZE=value> Value is the size of the input box in number of characters Change the sizes of the input boxes for first name, last name, address 1, address 2, state and zip Tutorial 6

Controlling the Size of an Input Box
View Example #3 Controlling input box size Tutorial 6

Setting the Maximum Length for Text Input
By setting the size of the input box, you are not putting limitations on the text that can be entered into that field. Text will automatically scroll to the left All of the text will be sent to the CGI script For example You can limit the number of characters entered with the MAXLENGTH property Syntax <INPUT MAXLENGTH=value> Value is the maximum number of characters that can be entered into the field Tutorial 6

Setting the Maximum Length for Text Input
Specify the maximum length for the Zip code field to 5 characters Now let's test the zip field Tutorial 6

Setting the Default Value for an Input Box
Use the VALUE property to set a default value for a field Syntax: <INPUT VALUE="value"> Value is the default text or number that will appear in the field "" quotes are required for text strings Tutorial 6

Setting the Default Value for an Input Box
Set the default value for the Country field to "United States" View the Example #4 –Maximum length and default value Tutorial 6

Creating a Password Field
Use the PASSWORD type when you don't want the information entered in the field to appear on the screen Looks like a password field with bullets or asterisks Is NOT a secure password field with a secure connection to the server nor is it encrypted Only acts as a mask Syntax: <INPUT TYPE=PASSWORD> You may specify the size, maximum length, and name properties Not used in the Register.htm form Tutorial 6

Finishing the Contact Information on the Form Add a horizontal rule to Register.htm under the contact information It looks like this – View Example #5 – Horizontal line added to form Tutorial 6

Creating a Selection List
Create a selection list for the Jackson Electronics' product list Use the <SELECT> and <OPTION> tags Syntax: <SELECT NAME=text> <OPTION>Option 1 <OPTION>Option 2 . </SELECT> Tutorial 6

Creating a Selection List
Text is the name you assign to the selection field Option 1, Option 2, etc. are the values displayed in the selection list The selection list looks like this – View Example #6 – Selection list example Tutorial 6

Adding the Date Purchased & Serial # Fields
It looks like Example #7 – Purchase date and Serial # added Tutorial 6

Modifying the Appearance of a Selection List
Defaults Only one item is displayed Drop-down arrow is present Change the number items displayed with the SIZE property Syntax: <SELECT SIZE=value> Value is the number of items displayed Tutorial 6

Modifying the Appearance of a Selection List
By specifying a SIZE value greater than 1, you change the selection list from a drop-down list box to a list box with a scroll bar Set the SIZE value to the number of items in the list and the scroll bar is not displayed or is dimmed Tutorial 6

Working With Option Values
For example: <SELECT NAME=Product> <OPTION VALUE=1>ScanMaster <OPTION VALUE=2>ScanMaster II </SELECT> Tutorial 6

Selection List To see the results of selection box showing 2 items
View Example #8 - Selection List displaying 2 items Tutorial 6

Making Multiple Selections
Modify your list to allow multiple selections Syntax: <SELECT MULTIPLE> Noncontiguous - Ctrl key and click items Contiguous - click the first item, hold down the Shift key, click the last item The CGI script must be able to handle multiple selections for one field Tutorial 6

By default, the form will send to the CGI script the values that appear in the selection list Sometimes you will want to send a different text string, usually an abbreviated version of a long entry Use the VALUE property to specify what is sent to the CGI script Tutorial 6

Also, by default, the first item in the list is the item initially selected and displayed Use the SELECTED property to specify the default list item to be selected and displayed For example: <SELECT NAME=Product> <OPTION>ScanMaster <OPTION>ScanMaster II <OPTION SELECTED>LaserPrint 1000 </SELECT> For Register.htm we will use the defaults Tutorial 6

Working With Radio Buttons
Radio buttons are similar to selection lists in that they display a list of choices Difference is that the user can only select one choice Syntax: <INPUT TYPE=RADIO NAME=text VALUE=value> Text is the name assigned radio button field Value is the value sent to the CGI script when radio button is selected The NAME property is important because it groups the buttons together and automatically deselects the buttons that are not selected Therefore the name property must be the same name for all radio buttons in a group It is case sensitive Tutorial 6

Each button needs a description next to it Each button needs a value, this value does not have to match the descriptive text Tutorial 6

For Register.htm: NAME will be USE Five buttons - home, business, government, educational institution, and other Add a new row with 2 columns Tutorial 6

VALIGN=TOP aligns the "Used for:" text at the top of the cell <BR> tags force the next radio button to go to a new line within the cell Tutorial 6

Let's take a look at it Add the CHECKED property to set a default option <INPUT TYPE=RADIO NAME=USE VALUE=BUS CHECKED>Business Now it looks like Example #9 – Radio buttons Tutorial 6

Working With Check Boxes
Similar to radio buttons, except the user may select as many boxes or no boxes Syntax: <INPUT TYPE=CHECKBOX NAME=text> Text is the name of the field A check box has a value of "on" if the box is selected, and no value if the box is not selected You can assign a different value, such as "YES" instead of "on" if the box is selected <INPUT TYPE=CHECKBOX NAME=text VALUE=YES> Each checkbox will need descriptive text Tutorial 6

By default, checkboxes are deselected when the form is opened You may use the CHECKED property previously described for radio buttons Since a user can select all of the checkboxes, you must use unique NAMES for each checkbox For Register.htm Add a row with two columns Add the checkboxes with unique names Leave checkboxes deselected Add a horizontal rule after the checkboxes Tutorial 6

View Example #10 – CheckBox Example Tutorial 6

Horizontal rule: <TR> <TD COLSPAN=2><HR></TD> </TR> Tutorial 6

Creating a Text Area Text Areas are useful for long comments, where as Input Boxes might be too small Use the <TEXTAREA> tag to create a text box like the one in Figure 6-23 Tutorial 6

Creating a Text Area Syntax:
<TEXTAREA ROWS=value COLS=value NAME=text>default text</TEXTAREA> ROWS is the number of lines in the box (some earlier browser may show more lines than specified) COLS is the number of characters allowed on each line Default text is the text that is displayed in the box when the form is first opened. Default text is not required, but sometimes helpful to give instructions to the user. The ending </TEXTAREA> tag is required even if you don't use default text in your box Tutorial 6

Creating a Text Area Text in a TEXTAREA box does not automatically wrap, the text will continue to scroll to the left as the text is typed Use the WRAP property to override this default setting Usually specify PHYSICAL or VIRTUAL, the difference is how the data is sent to the CGI script See Figure 6-24 Tutorial 6

Creating a Text Area For Register.htm: Add a new row with 2 columns
Add the Comments field using the <TEXTAREA> tag Wrap property set to virtual 4 lines high and 50 characters wide No default text Tutorial 6

Creating a Text Area Let's look at the comments box and type in a lot of text to see it wrap around and the scroll bar change View Example #11 – Text Area Tutorial 6

Creating Form Buttons Buttons can be used to run programs, submit forms, or reset a form to its original state Use the INPUT tag with a TYPE of BUTTON Example: <INPUT TYPE=BUTTON VALUE="Click to calculate total order"> Value is the label on the button Tutorial 6

Creating Submit & Reset Buttons
The SUBMIT button sends the data in the form to the CGI script The RESET button restores the form to its original default values without submitting it to the CGI script Syntax: <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> You can specify NAME and VALUE properties. These are used when you have more than one submit and reset buttons on the form and you want the CGI script to perform different actions Tutorial 6

View Examples #12 - Buttons Submit and reset buttons don't have to be labeled "submit" and "reset", you can specify the label with the VALUE property Tutorial 6

For Register.htm: Add a row with only one column which will be centered Add a submit button labeled "Send Registration" Add a reset button labeled "Cancel" Tutorial 6

Let's test the Register.htm cancel button Register.htm with buttons Type in name, address, etc. Change the radio button from business to home Check some boxes Change United States Type in comments Then click the CANCEL button Tutorial 6

Creating Image Fields Inline images can act like Submit buttons
A user can click on an image and this action will submit the coordinates to the CGI script, then the script will perform an action based upon the coordinates Used with server-side maps Syntax: <INPUT TYPE=IMAGE SRC=URL NAME=text VALUE=text> URL is the filename or URL of the inline image NAME assigns a name to the field Value assigns a value to the image Tutorial 6

Creating Image Fields Example
<INPUT TYPE=IMAGE SRC=“USAMAP.gif” NAME=USA VALUE=“STATE”> User clicks the image at coordinates (15,30) The form sends: Field name of USA and coordinate x USA.15 Field value of STATE and coordinate y STATE.30 The CGI script will perform an action based upon these coordinates Tutorial 6

Creating Image Fields Working With Hidden Fields
Our CGI script needs to know where to the form to, but we don’t want the address to be displayed on the form where the user can see it We will create a hidden field that is part of the form, but not displayed on the form Syntax: <INPUT TYPE=HIDDEN NAME=text VALUE=value> Tutorial 6

Working With Hidden Fields
Place the hidden fields between the FORM tags Good practice to place all hidden fields in one place, usually at the beginning of the form Add the hidden field to Register.htm Note: this is my address View Example #13 – Hidden example Tutorial 6

Working With Form Properties
Finally we need to specify where to send the form data and how to send it Modify the properties of the FORM tag with ACTION, METHOD, and ENCTYPE ACTION identifies the CGI script that will process the form <FORM ACTION=URL> URL is the URL of the CGI script The URL is supplied to you by the person who wrote the CGI script Tutorial 6

METHOD controls how your Web browser sends data to the Web server that’s running the CGI script <FORM METHOD=type> Type is either GET or POST GET method, the default, packages the form data by appending it to the end of the URL specified in the ACTION property. The Web server then retrieves the modified URL and stores it in a text string for processing by the CGI script. POST method, sends form information in a separate data stream, allowing the Web server to receive the data through “standard input.” Tutorial 6

The POST method is the preferred method Safer, since some Web servers limit the amount of data sent with a GET method and will truncate the URL, losing valuable data If you write your own CGI scripts, then you will consider these issues which are out of the scope of this class In the meantime you will use what ever method the author of the CGI script tells you to use Tutorial 6

ENCTYPE (encoding type) property specifies the format of the data when it is transferred from your Web page to the CGI script <FORM ENCTYPE=text> Text is the data format Default is “application/x-www-form-urlencoded” If you don’t specify a type, the above default is used Another often used format is “multipart/form-data” which allows the form to send files along with any form data Again this is a bit technical and beyond the scope of this course You will more than likely get your ENCTYPE specifications from the CGI author Tutorial 6

One more possible property, the TARGET property. Use the TARGET property when your Web page has frames and you need to indicate where the output from the CGI script is going to display it For Register.htm: Add ACTION and METHOD properties, no need for ENCTYPE since we will use the default format ACTION has a fictional URL Tutorial 6

You have finished the form, but of course you can’t test it since we used a fictional address and URL You can check out the following site to see how it would work: View Example #14 for completed form. Type your address in the first field Fill out the form Click the Click to register button You will get an immediate response back from the CGI script on the screen And, you will soon receive a message in your box Tutorial 6

Using the MAILTO Action
You can use the MAILTO ACTION instead of a CGI script to form information Syntax: <FORM ACTION=“mailto: _address” METHOD=POST> _address is the address of the recipient of the form information The mailto property uses the user’s own program to send the form Tutorial 6

The advantage is that this is a simple way send information via without a CGI script Disadvantages: Not all browsers support mailto, versions earlier than IE 4.0 and Netscape 3.0 Not encrypted for privacy The recipient’s address is revealed to the user Depending on the user’s program settings, the will allow the user to make changes to the before sending it, or it will be sent automatically s created with the mailto action have special characters inserted that have to be interpreted before it can be read – Special Characters shown in Figure 6-34 Tutorial 6

You can use the WebForms translation program at Tutorial 6

Additional Form Elements
HTML 4.0 enhancements for online forms –more flexible and easier Supported by IE 4.0 or higher Check Netscape support Obviously, you should test these new enhancements on a variety of browsers to be certain Tutorial 6

Creating Buttons With the <BUTTON> Tag
More versatile than the INPUT tag supporting character and graphic elements Syntax: <BUTTON NAME=name VALUE=value TYPE=type> button text and HTML tags </BUTTON> Name is the field’s name Value is the default value Type of button (submit, reset, or button is default) Tutorial 6

Creating Buttons With the <BUTTON> Tag
You can format the button’s appearance with HTML tags including inline images Tutorial 6

Assigning Labels to Fields
Use the <LABEL> tag to assign labels to fields instead of typing text in the form Two ways: Place the input field within the <LABEL> tags Assign the label using the FOR property Tutorial 6

Place the input field within the <LABEL> tags: <LABEL>label text input field tag and properties </LABEL> Label text is the text that you’ll associate with the field Tutorial 6

Assign the label using the FOR property <LABEL FOR=field_name>label text</LABEL> Input field tag and properties Field_name is the field name you want to associate with the label This approach allows you to place the label in one part of the document and the field in another part of the document Tutorial 6

The <LABEL> tags are useful with radio buttons and check boxes because the user can click the label or the field to select/deselect the radio button or check box Example with a checkbox: <TR><TD> <LABEL FOR=WINDOWS>Windows:</LABEL> </TD> <TD> <INPUT TYPE=CHECKBOX NAME=WINDOWS> </TD> </TR> You could put the label and the input tags any where in the document See example #16 Tutorial 6

Assigning Labels to Fields n The LABEL tag has a property called ACCESSKEY n Access key or the accelerator key is a keyboard character that can be pressed along with CTRL, ALT, or OPTION (for Macs) key in order to jump to/select a field n Syntax: <LABEL ACCESSKEY=“key_letter”> n Example – create a “quick key” ALT+w or OPTION+w: <LABEL FOR=WINDOWS ACCESSKEY=“W”> <U>W</U>indows: <INPUT TYPE=CHECKBOX NAME=WINDOWS> </LABEL> Note: the “w” is underlined, this is not required, but is a standard convention Creating Group Boxes n You can group together a set of buttons that share a common theme or appearance n Usually done with radio buttons and check boxes n The <FIELDSET> tag will place a box around the input fields and text located within the <FIELDSET> tags n Syntax: <FIELDSET> collection of input fields and text </FIELDSET> Creating Group Boxes n You can add a legend with the LEGEND tag n Syntax: <FIELDSET> <LEGEND ALIGN=align>legend text</LEGEND> collection of input fields and text </FIELDSET> ALIGN aligns the legend on the group box, Properties are TOP (default), BOTTOM, LEFT, and RIGHT Tutorial 6

Creating Group Boxes n For example, to redesign the registration form: <FIELDSET> <LEGEND ALIGN=TOP>Used for:</LEGEND> <INPUT TYPE=RADIO NAME=USE VALUE=Home>Home<BR> <INPUT TYPE=RADIO NAME=USE VALUE=BUS>Business<BR> <INPUT TYPE=RADIO NAME=USE VALUE=GOV>Government<BR> <INPUT TYPE=RADIO NAME=USE VALUE=ED>Educational Institution<BR> <INPUT TYPE=RADIO NAME=USE VALUE=OTHER>Other</TD> </FIELDSET> Tutorial 6

Creating Group Boxes Specifying the Tab Order n Users usually use the Tab key to move from field to field n The default tab order is the order in which you entered your fields in the HTML file n You can specify a different tab order using the TABINDEX property n Syntax: <INPUT NAME=name TABINDEX=value> Name is the field name Value is the tab index number n Example: <INPUT NAME=FirstName TABINDEX=1> FirstName field will be the first field the user goes to when the tab key is pressed Tutorial 6

Specifying the Tab Order
Set the tab index number for each field you want the user to move to in a particular order 1 = first field, 2 = second field, etc. 0 = field will be tabbed to in the order that it’s encountered in the file Negative tab indexes are left out of the tabbing order entirely, the only way a user can get to that field is with the mouse Suggest thoroughly testing your tab order if you use the TABINDEX property, especially if you don’t specify all fields with a tab index order Tutorial 6

What have we learned? Learned about CGI scripts
Created an online form with text boxes, selection lists, checkboxes, radio buttons, text areas, submit and reset buttons Created a hidden field on a form Work with form properties Learned how to send data from a form to a CGI script Learned how to send form information without using CGI scripts Learned about enhancements to the HTML form elements Tutorial 6

Tutorial 6 - Creating Web Page Forms

Similar presentations

Presentation on theme: "Tutorial 6 - Creating Web Page Forms"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Tutorial 6 - Creating Web Page Forms

Similar presentations

Presentation on theme: "Tutorial 6 - Creating Web Page Forms"— Presentation transcript:

Similar presentations

About project

Feedback