Document

Transcript Document

New Perspectives on Creating Web Pages with HTML

Tutorial 6: Creating Web Page Forms 1

Tutorial 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 attributes Learn how to send data from a form to a CGI script Learn how to send form information without using CGI scripts 2

An Example of a Form

This figure shows a sketch of a proposed registration form. XP

The Interaction between a Web Page Form and a CGI Script

This figure shows how a Web page form interacts with a CGI script. XP

Working with CGI Scripts

    HTML supports tags for creating forms, however, it does not process the information.

Use CGI (Common Gateway Interface) script to process form information.

CGI script runs on the Web server and receives data from a form and uses it to perform a set of tasks.

Web page designers may not be able to create or edit CGI scripts.

 Internet Service Providers (ISPs) and universities may provide CGI scripts that their customers and student can use on their Web sites, but which they 5

CGI Scripts

 Among the many things CGI scripts made possible are:  online database containing customer information       catalogues for ordering and purchasing items online databases containing product support information determining the number of times a Web page has been accessed server-side image maps message boards for online discussion forums e-mail for discussion groups 6

CGI Script Restrictions

  There are several reasons to restrict direct access to CGI scripts:  CGI scripts are actually running a program directly on the server  security risks from computer hackers  drain on system resources caused by large numbers of programs running simultaneously System administration are understandably careful to maintain strict control over their servers and systems.

CGI Scripts and Computer Languages

  CGI scripts can be written in a variety of different computer languages. Some of the most commonly used languages are:     AppleScript ASP C/C++ Perl    TCL The UNIX shell Visual Basic The computer language used depends on the 8

Form Components and Elements

text box This figure shows a form that contains various control elements commonly used in Web page forms. drop-down list box

First Name Address #1 Address #2 City Country Item Purchased

radio buttons

Used For (check one) Home Business Religious or Charitable Institution Government Educational Institution Last Name State Purchase Date Serial Number Zip Network Operating System (check all that apply) Netware Banyan Vines Windows IBM Lan Server PC/NFS Comments?:

XP group box check boxes text area form button

Send Registration Cancel 9

Form Control Elements

 Control elements that are commonly used:  text boxes for text and numerical entries       selection lists for long lists of options, usually appearing in a drop-down list box radio buttons, also called option buttons, to select a single option from a predefined list check boxes to specify an item as either present or absent groups boxes to organize form elements text areas for extended entries that can include several lines of text buttons that can be clicked to start processing the form 10

   

Form Control Elements

Continued

Each control element in which the user can enter information is called a field.

Information entered into a field is called the field value, or simply the value.

In some fields, users are free to enter anything they choose.

Other fields, such as selection lists, limit the user to a predefined list of options.

The
Tag

     The

a form.

tag identifies the beginning and end of A single page can include several different forms, but you cannot nest one form inside another.

The general syntax of the

tag is:

form elements and layout tags

Between the

tags, place the various tags for each of the fields in the form.

Use standard HTML tags to specify the form’s appearance.

The
Tag Continued

   A single Web page can contain multiple forms, the

tag includes the name attribute.

The name attribute identifies each form on the page.

The name attribute is also needed for programs that retrieve values from the form.

Adding the Tag

XP The tag includes attributes that control how the form is processed, including information on what CGI script to use, how the data is to be transferred to the script, and so forth. This figure shows the form name “ reg .”

Structuring a Form

 Horizontal lines can provide structure to a form by separating sections.

Layout of a Registration Form

XP This figure shows sections that are separated from each other with a horizontal line. Structuring a form in this fashion can make it easier to identify the different sections.

contact information product information usage information comments buttons

Input Types

This figure shows other supported HTML input types.

Type

type=”button” type=”checkbox” type=”file” type=”hidden” type=”image” type=”password” type=”radio” type=”reset” type=”submit” type=”text”

Description

Display a button which can be clicked to perform an action from a script Display a check box Display a browse button to locate and select a file Create a hidden field, not viewable on the form Display an inline image which can be clicked to perform an action from a script Display a text box in which hides text entered by the user Display a radio (option) button Display a button which resets the form when clicked Display a button which submits the form when clicked Display a text box in which displays text entered by the user 17

Working with Text Boxes

    Text boxes are created using the

tag.

The general syntax is:

 

type

specifies the type of input field

name

and

attributes identifies the input field for the CGI script To create a text box, you would enter the tag:

If the

type

attribute is not included, the Web browser assumes, by default, that you want to create a text box.

The name and id Attribute

     The

name

and

attributes of the

identifies the input field for the CGI script.

The the

name

attribute represents the older standard, but it is deprecated in HTML 4.01, however, some CGI scripts still recognize only

name

attribute tag The newest standard uses the

attribute.

The

attribute is required, if a form contains form labels.

It is best to duplicate the information by using both the

name

and

attributes.

Creating a Text Box

 To create a text box, use the following HTML code:

   

name

and

attributes identify the field

value

attribute assigns a default value to the text box

size

attribute defines the width of the text box in number of characters

maxlength

attribute defines the maximum 20

Name/Value Pairs sent from

the Web Form to the CGI Script

This figure shows when form data is sent to the CGI script, the script receives the name or id of each field in the form paired with whatever value the user entered in the field. The script then processes the data according to each name/value pair.

CGI Script Names

   Some CGI scripts require a particular field or groups of fields.

 for example, a CGI script whose purpose is to e mail form values to another user might require a field named “email” that contains the e-mail address of the recipient Before using a CGI script, check the documentation for any requirements and then design your form accordingly.

Case is important in field names.

 a field named “email” might not be interpreted by the CGI script in the same way as a field named “EMAIL” 22

Text Boxes on the Form

XP Text boxes are blank and do not contain any accompanying text, a text description needs to be inserted, such as “Last Name”, adjacent to each box so that the user knows what to enter.

text box

Controlling the Size of a Text

 

Box

By default, all text boxes are 20 characters wide.

The syntax for changing the size of a text box is:



value

is the size of the text box in characters 24

Setting the Width of Text Boxes

XP This figure shows an example of code for setting the width of text boxes.

Once changes are made, save the changes to a file, and then reload or refresh it in the browser.

Netscape users may have to close and open the file for the changes to the Web form to take effect.

Result of Setting the Width of Text Boxes

XP text box width set to 30 characters

Setting the Maximum Length

for Text Input

  Setting the width of a text box does not limit the number of characters the box can hold.

 if a user enters text longer than the box’s width, the text scrolls to the left  the user cannot see the entire text, but all of it is sent to the CGI script for processing The syntax for setting the maximum length for field input is:



value

is the maximum number of characters that can be stored in the field 27

Specify the Maximum Length for a Field

XP This figure shows an example of limiting the width of the zip code field to five characters.

no more than 5 characters are allowed in this text box

Setting a Default Value for a

  

Field

When the same value is entered into a field, it may make sense to define a default value for a field.

Default values can save time and increase accuracy for users of a Web site.

To define a default value, use the following syntax:



value

is the default text or number that is displayed in the field 29

Defining a Default Value for a

Field

If customers from countries other than the United States use this Web form, they can remove the default value by selecting the text and pressing the Delete key.

default value

Creating a Password Field

     A password field is a text box in which the characters typed by the user are displayed as bullets or asterisks i.e. ****.

The syntax for creating a Password field is:

Using a password field should not be confused with having a secure connection.

The password itself is not encrypted.

The password field only acts as a mask for a field entry as it is entered.

Working with Form Labels

  HTML allows you to formally link a label with an associated text element for scripting purposes.

The syntax for creating a form label is:

label text

  

is the value of the id attribute for a field on the form

label

text is the text of the label you must bind the label to the id attribute of the field and not the name attribute 32

Working with Form Labels

    Labels can simplify the data entry process by allowing a user to click on either the control element or the element’s label to enter data.

Labels allow users to write scripts to modify their content for interactive forms.

The

tag is part of the HTML 4.0 specifications, however, it is not currently supported by Netscape.

The Netscape browser, and versions of the Internet Explorer browser prior to 4.0, ignore the

tag, but still display the label text.

Creating a Label for the fname

Field

This figure shows a label for the fname field.

value of the id attribute for the first name field

Creating a Selection List

     A selection list is a list box from which a user selects a particular value or set of values.

Selection lists are good to use when there is a fixed set of possible responses.

Selection lists help prevent spelling mistakes and erroneous entries.

A selection list is created using the

and

 The general syntax for the

.

and

 

name

and

id

attribute identify the selection field each

tag represents an individual item in the selection list  the text in the selection list is indicated by the text in

item1

,

item2

, and so forth 38 The

tag is a one-sided tag.

   

Modifying the Appearance of a Selection List

HTML provides several attributes to modify the appearance and behavior of selection lists and options.

By default, the

XP

39

Modifying the Appearance of a Selection List Continued

  

value

is the number of items that the selection list displays in the form by specifying a value greater than 1, the selection list changes from a drop-down list box to a list box if the

size

attribute is equal to the number of options in the selection list, the scroll bar is either not displayed or is dimmed

XP

40

This figure shows selection lists with different size values.

Selection Lists with Different Size Values

size = "1" size = "4" XP size = "7" size = "9"

41

Making Multiple Selections

XP

    When using multiple selections, users are not limited to a single selection from a selection list.

Adding the multiple attribute to the

A common method to make multiple selections from a selection list is to hold down a specific key while making selections.

42

 

Making Multiple Selections Continued

The Windows operating system, multiple selections can be made as follows:  for noncontiguous selections, press and hold the Ctrl key while you make your selections  for a contiguous selection, select the first item, press and hold the Shift key, and then select the last item in the range Check and verify that the CGI scripts used are designed to handle multiple selection lists.

XP

43

Working with Option Values

XP

    By default, a form sends the values that are displayed in the selection list to the CGI script.

Instead of sending an entire text string, an abbreviation or code can be sent to the CGI script.

Specify the value that is sent to the CGI script with the value attribute.

Use the selected attribute to specify which item in the selection is selected, or highlighted, when the form is displayed.

44

Working with Option Groups

XP

  The most recent releases of HTML allows you to organize selection lists into distinct groups called option groups.

The syntax for creating an option group is:

 

label

group is the label assigned to the option the text for the label appears in the selection list above each group of items but is not a selectable item from the list 45

XP

Option Groups

a single option group Internet Explorer and Netscape versions prior to 6.0 display the selection list without the group labels.

option group label option group label a single option group

46

Working with Radio Buttons

XP

   Radio buttons display a list of choices from which a user makes a selection.

Only one radio button can be selected at a time.

The syntax to create a radio button is:

 

name

button identifies the field containing the radio

id

attribute identifies the specific option. Only required if you intend to use a field label with the radio button 47

Working with Radio Buttons Continued

XP

   The

name

because it groups distinct radio buttons together.

attribute must be included,  selecting one radio button in the group automatically deselects all of the other radio buttons in that group Insert descriptive text next to the button.

Enclose text within a label tag to allow the user to select the radio button or label.

48

Creating Radio Buttons

XP This figure shows an example of HTML code that creates radio buttons for party affiliations. In this sample code, the value sent to the CGI script does not match the field label. If the user selects the Republican radio button, the value “gop” is sent to the CGI script paired with the field name “party.”

49

Selection Lists vs. Radio

  

Buttons

If you have a long list of options, use a selection list.

If you want to allow users to select more than one option, use a selection list with the multiple attribute.

If you have a short list of options, and only one option is allowed at a time, use radio buttons.

XP

50

XP

Creating a Group Box

   A group box labels an entire collection of radio buttons.

A group box is a box placed around a set of fields that indicates that they belong to a common group.

The syntax for creating a group box is:

legend text collection of fields

51

Creating a Group Box Continued

   the

tag is used to display a legend on the group box

legend text

specifies the text for that legend the

align

attribute specifies where the legend is placed in the box  align values are “top” (the default), “bottom”, “left”, and “right”  browsers only support “top” and “right” options at this time

XP

52

Creating a Group Box and Legend

XP This figure shows an example of a group box applied to a set of radio buttons.

start of group box group box legend resulting radio buttons and group box

53

XP

Group Box Size

    There is no attribute to control the size of a group box.

The box’s height will be large enough to accommodate the fields and labels in the field set.

The width is the width of whatever space remains on the Web page.

To set the width to a specific value use a table cell to place the group box and set the width of the cell.

 group boxes cannot extend across table cells; all 54 of the fields in the field set must be placed within

Working with Check Boxes

XP

    A check box is either selected or not, there is only one check box per field.

Check boxes are created using the following syntax:

 

name

and

id

attribute identify the check box the

value

attribute specifies the value that is sent to the CGI script when the check box is selected The

any text.

tag for a check box does not display 55 Check boxes are not selected by default.

XP

Adding Check Boxes

This figure shows different check boxes. The user can click either the check box or the label associated with the check box to select and deselect.

56

Group Boxes for Radio Buttons

XP

and Check Boxes

57

XP

Creating a Text Area

  To create a larger text area for a text box, use the tag:

default text

 

rows

and

cols

attributes define the dimensions of the text box the

rows

attribute indicates the number of lines in the text box Default text can be specified in the text box when the form is initially displayed.

58

XP

Creating a Text Area

This figure shows an example of a text area with default text.

The tag is a two-sided tag, which means that it has an opening tag <textarea> , and a closing tag, .

default text area text resulting text area dimensions of text area

59

XP

Wrap Attribute Values

The text entered in a text area wraps to the next line when it exceeds the width of the box. To control how a browser wraps text to a new line use the wrap attribute. This figure shows the three possible wrap options.

60

The wrap Attribute for Text

XP

   Set the value of the “soft” or “hard” to allow text to wrap within the text box.

wrap

attribute to either  the “hard” setting preserves any line wrapping that takes place in the text box and the “soft” setting does not.

If no value for the wrap attribute is specified, a value of “soft” is used.

For comment fields, use the box.

</b></p> <p>tag with the wrap attribute set to “soft” so that the user’s comments wrap to the next line in the 61</p> <a id="p62" href="#"></a> <p><b>In this figure the text box includes a vertical scroll bar, so that a user can scroll to see the hidden text, if needed.</b></p> <h3>Comment Text Area</h3> <p><b>XP</b></p> <p>62</p> <a id="p63" href="#"></a> <h3>Creating Form Buttons</h3> <p>  Another type of control element is one that performs an action. In forms, this is usually done with a <b>button</b>.</p> <p>Buttons can be clicked to:    run programs submit forms reset the form to its original state</p> <p><b>XP</b></p> <p>63</p> <a id="p64" href="#"></a> <p><b>XP</b></p> <h3>Creating a Push Button</h3> <p>   One type of button, called a <b>push </b> <b>button</b>, is created using the </p> <p><b><input></b></p> <p>as follows: tag </p> <p><b><input type=“button” value=“text”></b></p> <p></p> <p><b>text</b></p> <p>is the text that appears on the button By themselves, push buttons perform no actions in the Web page.</p> <p>To create an action, write a script or program that runs automatically when the button is clicked.</p> <p>64</p> <a id="p65" href="#"></a> <h3>Creating Submit and Reset </h3> <p><b>XP</b></p> <p>  </p> <h3>Buttons</h3> <p>A <b>submit button </b>is a button that submits the form to the CGI script for processing.</p> <p>A <b>reset button </b>resets the form to its original (default) values.</p> <p>The syntax for creating these two buttons is:</p> <p><b><input type=“submit” value=“text”> <input type=“reset” value=“text”></b></p> <p></p> <p><b>value</b></p> <p>attribute defines the text that appears on the button 65</p> <a id="p66" href="#"></a> <h3>The name and value Attributes</h3> <p><b>XP</b></p> <p>  The </p> <p><b>name</b></p> <p>buttons.</p> <p>and </p> <p><b>value</b></p> <p>attributes can be used for <b>push</b>, <b>submit</b>, and <b>reset</b> Use these attributes when the form contains multiple buttons and a program that processes the form needs to distinguish one button from another.</p> <p> for example, a Web page advertising a shareware program might include three buttons:  one used to download the program  another used to retrieve information the third to cancel the form 66</p> <a id="p67" href="#"></a> <h3>Creating a Form Button</h3> <p><b>XP The figure shows HTML tags for buttons that download a program, retrieves information, and resets the form to its original values.</b></p> <p>67</p> <a id="p68" href="#"></a> <h3>Creating Buttons with the <button> Tag</h3> <p><b>XP</b></p> <p>   Buttons created with the the Web page designer to control the appearance of the button.</p> <p><b><input></b></p> <p>tag do not allow For greater artistic control over the appearance of the button, use the </p> <p><b><button></b></p> <p>tag.</p> <p>The syntax of the </p> <p><b><button></b></p> <p>tag is:</p> <p><b><button name=“name” value=“value” type=“option”> button text and HTML tags </button></b></p> <p>  </p> <p><b>name value</b></p> <p>attribute specifies the name of the button attribute sends to a CGI script</p> <p><b>type</b></p> <p>attribute specifies the button type (submit, reset, or button) 68</p> <a id="p69" href="#"></a> <h3>Using the <button> Tag</h3> <p><b>XP The figure shows how to create a button that contains formatted text and an inline image.</b></p> <p><b>The default value for the type attribute is “button”. Within the <button> tags you can place whatever HTML tags you wish to format the button’s appearance. This includes inline images.</b></p> <p><b>the button type is a simple push button button image contents of the button</b></p> <p>69</p> <a id="p70" href="#"></a> <p><b>XP</b></p> <h3>Creating File Buttons</h3> <p>   A <b>file button </b>is used to select files so that their contents can be submitted for processing to a CGI script.</p> <p>The contents of the file are not displayed- only the file’s location.</p> <p>A programmer can then use that information to retrieve a file and use it for whatever purpose is required by the script.</p> <p>70</p> <a id="p71" href="#"></a> <h3>Using a File Button</h3> <p><b>The figure shows an example of using the file button to return the location of a file named “report.doc.” 1. User clicks the Browse button 2. Selects a file from the Choose File dialog box XP 3. The filename and location are automatically placed in the text box</b></p> <p>71</p> <a id="p72" href="#"></a> <p><b>XP</b></p> <h3>Creating Image Fields</h3> <p>   Inline images can act like submit buttons, so that when the user clicks the image, the form is submitted.</p> <p>The syntax for this type of control element is:</p> <p><b><input type=“image” src=“URL” name=“text” value=“text”></b></p> <p>  </p> <p><b>URL</b></p> <p>is the filename and location of the inline image</p> <p><b>name</b></p> <p>attribute assigns a name to the field</p> <p><b>value</b></p> <p>attribute assigns a value to the image When the form is submitted to the CGI script, the coordinates of where the user clicked are attached to the image’s name and value in the format: </p> <p><b>namex_coordinate</b></p> <p>, </p> <p><b>value.y_coordinate</b></p> <p>.</p> <p>72</p> <a id="p73" href="#"></a> <h3>Using an Image Control with a CGI Script</h3> <p><b>Once the CGI script receives data, the action it performs depends on whether the user clicked within the image.</b></p> <p><b>XP</b></p> <p>73</p> <a id="p74" href="#"></a> <h3>Working with Hidden Fields</h3> <p><b>XP</b></p> <p>     A <b>hidden field </b>is added to the form but not displayed in the Web page.</p> <p>Because the field is hidden, it can be placed anywhere between the opening and closing </p> <p><b><form></b></p> <p>tags.</p> <p>The syntax for creating a hidden field is:</p> <p><b><input type=“hidden” name=“name” value=“value></b></p> <p>Place all hidden fields in one location to make it easier to read and interpret the HTML code.</p> <p>74 Include a comment describing the purpose of </p> <a id="p75" href="#"></a> <h3>Adding a Hidden Field</h3> <p><b>This figure shows an example of the hidden field code.</b></p> <p><b>XP</b></p> <p>75</p> <a id="p76" href="#"></a> <h3>Working with Form Attributes</h3> <p><b>XP</b></p> <p> To specify where to send the form data and how to send it add the following attributes to the </p> <p><b><form></b></p> <p>tag:</p> <p><b><form action=“URL” method=“option” enctype=“text”></b></p> <p>  </p> <p><b>URL</b></p> <p>specifies the filename and location of the CGI script that process the form</p> <p><b>method</b></p> <p>attribute specifies how your Web browser sends data to the CGI script</p> <p><b>enctype</b></p> <p>attribute specifies the format of the data stored in the form’s field 76</p> <a id="p77" href="#"></a> <h3>The method Attribute</h3> <p><b>XP</b></p> <p> There are two possible values for the method attribute: <b>“get” </b>or <b>“post”</b>.</p> <p>    the “<b>get</b>” method (the default) packages the form data by appending it to the end of the URL specified in the action attribute the “<b>post</b>” method sends form data in a separate data stream, allowing the Web server to receive the data through what is called “standard input” the “<b>post</b>” method is considered the preferred way of sending data to a Web server The “<b>post</b>” method is also safer, because some Web servers limit the amount of data sent via the “get” method and will truncate the URL, cutting off valuable information 77</p> <a id="p78" href="#"></a> <h3>The enctype Attribute</h3> <p><b>XP</b></p> <p>    The exact meaning of the </p> <p><b>enctype</b></p> <p>a technical issue.</p> <p>attribute is The default enctype value is “<b>application/x-</b> <b>www-form-urlencoded</b>.” Another enctype value that is often used is “<b>multipart/form-data</b>,” which allows the form to send files to the Web server along with any form data.</p> <p>The most basic way of encoding data is to use “<b>text/plain</b>,” which encodes the data as simple text.</p> <p>78</p> <a id="p79" href="#"></a> <h3>Specifying Where and How to Send Form Data</h3> <p><b>XP This figure shows the CGI script that processes the form is located at the URL http://www.langear.com/cgi/mailer (a fictional address) and uses the “post” method.</b></p> <p>79</p> <a id="p80" href="#"></a> <p><b>The Web browser presents a page, an example of which is shown in this figure, displaying the name of each field in the form and the value assigned to it. At the same time, the CGI script formats a mail message to be sent to the address you entered.</b></p> <h3>Form Values</h3> <p><b>XP</b></p> <p>80</p> <a id="p81" href="#"></a> <h3>Using the “ mailto ” Action</h3> <p><b>XP</b></p> <p>   Use the <b>“</b> script.</p> <p><b>mailto</b></p> <p><b>” </b>action to send form information via e-mail without using a CGI This action accesses the user’s own e-mail program and uses it to mail form information to a specified e-mail address, bypassing the need for using CGI scripts on a Web server.</p> <p>The syntax of the <b>“</b></p> <p><b>mailto</b></p> <p><b>” </b>action is:</p> <p><b><form action=“mailto:e-mail_address” method=“post” enctype=“text/plain”></b></p> <p></p> <p><b>e-mail_address</b></p> <p>is the e-mail address of 81</p> <a id="p82" href="#"></a> <h3>Using the “ mailto ” Action Continued</h3> <p><b>XP</b></p> <p>   Not all browsers support the “</p> <p><b>mailto</b></p> <p>” action.</p> <p> for example, versions of <b>Internet Explorer</b> earlier than 4.0 and <b>Netscape Navigator</b> <b>3.0 </b>do not Another concern is that messages sent via the “</p> <p><b>mailto</b></p> <p>” action are not encrypted for privacy.</p> <p>The recipient’s email address is revealed to the user.</p> <p>82</p> <a id="p83" href="#"></a> <h3>Mail Message Created Using the “mailto” Action</h3> <p><b>XP This figure shows an e-mail message that the “mailto” action generated for a registration form. The format of the mail message may look different depending on the browser or e-mail software.</b></p> <p>83</p> <a id="p84" href="#"></a> <p><b>XP</b></p> <h3>Specifying the Tab Order</h3> <p>   Users navigate through a Web form using the Tab key.</p> <p> the Tab key moves the cursor from one field to another in the order that the field tags are entered.</p> <p>Add the <b>tabindex </b>attribute to any control element in the form to specify the tab order.</p> <p>With each element assigned a tab index number, the cursor moves through the fields from the lowest index number to the highest.</p> <p> for example, to assign the tab index number “1” to the fname field, enter the code: </p> <p><b><input name=“fname” tabindex=“1”></b></p> <p>84</p> <a id="p85" href="#"></a> <p><b>XP</b></p> <h3>Tab Order and Browsers</h3> <p> Browsers that do not support the tab order feature simply ignores the tabindex attribute and continues to tab to the fields in the order that they appear in the HTML code.</p> <p>85</p> <a id="p86" href="#"></a> <h3>Specifying an Access Key</h3> <p><b>XP</b></p> <p>   An <b>access key </b>is a single key that you type in conjunction with the Alt key for Windows users or the Command key for Macintosh users, to jump to one of the control elements in the form.</p> <p>Add the <b>accesskey </b>attribute to any of the control elements to create an access key.</p> <p>To create an access key for the lname field, enter the following code: </p> <p><b><input name=“lname” accesskey=“1”></b></p> <p> if a user types Alt+l (or Command+1 for Macintosh users), the control element for the lname field is selected 86</p> <a id="p87" href="#"></a> <h3>Specifying an Access Key Continued</h3> <p><b>XP</b></p> <p>  Use letters that are not reserved by the browser.</p> <p> for example, Alt_f is used by Internet Explorer to access the File menu When an access key is used, provide some visual clue about the key’s existence.</p> <p> the accepted method is to underline the character corresponding to the access key. For example, “Last Name” 87</p> <a id="p88" href="#"></a> <p><b>XP</b></p> <h3>Tutorial 6 Summary</h3> <p>       Worked with Web page forms.</p> <p>Overview of scripts.</p> <p>CGI scripts.</p> <p>Created simple input boxes.</p> <p>Worked with properties.</p> <p>Controlled the appearance of input boxes.</p> <p>Worked with Web form elements and components.</p> <p>88</p> <a id="p89" href="#"></a> <h3>Tutorial 6 Summary Continued</h3> <p><b>XP</b></p> <p>    Controlled the appearance and behavior of various elements.</p> <p>Examined form buttons, form images and hidden fields.</p> <p>Focused on how information is transferred from the Web page form to the CGI script.</p> <p>Worked with various form actions and methods.</p> <p>89</p> </div> </section> </div> </div> </div> </main> <footer> <div class="container mt-3"> <div class="row justify-content-between"> <div class="col"> <a href="/"> <img src="/theme/studyslide/static/logo-slideum.png" /> </a> </div> </div> <div class="row mt-3"> <ul class="col-sm-6 list-unstyled"> <li> <h6 class="mb-3">Company</h6> <li> <i class="fa fa-location-arrow"></i> Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040 <li> <i class="fa fa-phone"></i> +357 64-733-402 <li> <i class="fa fa-envelope"></i> info@slideum.com </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Links</h6> <li> <a href="/about">About</a> <li> <a href="/contacts">Contact</a> <li> <a href="/faq">Help / FAQ</a> </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Legal</h6> <li> <a href="/terms">Terms of Service</a> <li> <a href="/privacy">Privacy policy</a> <li> <a href="/page.html?code=public.usefull.cookie">Cookie policy</a> <li> <a href="/page.html?code=public.usefull.disclaimer">Disclaimer</a> </ul> </div> <hr> <p>slideum.com © 2024, Inc. All rights reserved.</p> </div> </footer> <div class="modal directory" id="directory-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Directory</h5> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> </div> </div> </div> <script src="/theme/common/static/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/theme/common/static/jquery_extra/dist/jquery-extra.js"></script> <script src="/theme/common/static/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="/theme/common/static/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script> <script> var __path_directory = [ ] !function __draw_directory(data, root, uuid) { var ul = $('<ul>', uuid && { id: 'category' + uuid, class: !__path_directory.includes(uuid) ? 'collapse' : null }); for (var item in data) { var li = $('<li>').appendTo(ul); if (item = data[item], item.children) { li.append('<a href=#category' + item.id + ' data-toggle=collapse>') __draw_directory(item.children, li, item.id); } else { li.append('<a href=' + item.url + '>'); } var a = $('> a', li).addClass('item').text(item.name) .append($('<a class="link fa fa-external-link" href=' + item.url + '>')); if (item.id === +__path_directory.slice(-1)) { a.addClass('active'); } /* if (item.id !== __path_directory[0]) { a.addClass('collapsed'); } */ } root.append(ul); } ([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside')); var __root_directory = $('#directory-aside > ul'); $('#directory-aside') .on('show.bs.collapse', function() { //console.log('show.collapse') }) .on('hide.bs.collapse', function() { //console.log('hide.collapse') }); $('#directory-modal') .on('show.bs.modal', function() { $('[class$="body"]', this).prepend(__root_directory); }) .on('hide.bs.modal', function() { $('#directory-aside').prepend(__root_directory); }); $('.directory-mobile').on('click', function(e) { e.preventDefault(); }); $('.directory .link').on('click', function(e) { e.stopPropagation(); }); </script> <script> function scrollToViewport() { $('html, body').stop().animate( { scrollTop: $('.navbar').outerHeight() }, 1000); } setTimeout(scrollToViewport, 1000); $(window).on('orientationchange', scrollToViewport); $('[data-toggle="tooltip"]').tooltip(); </script> <script async src="//s7.addthis.com/js/300/addthis_widget.js#pubid=#sp('addthis_pub_id')"></script>  <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter28397281 = new Ya.Metrika({ id:28397281 }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="//mc.yandex.ru/watch/28397281" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <style> @media screen and (max-width: 768px) { .cc-revoke { display: none; }} </style> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function() { window.cookieconsent.initialise( { content: { href: "https://slideum.com/dmca" }, location: true, palette: { button: { background: "#fff", text: "#237afc" }, popup: { background: "#007bff" }, }, position: "bottom-right", revokable: true, theme: "classic", type: "opt-in" })}); </script> </body> </html>

Document

Transcript Document

New Perspectives on Creating Web Pages with HTML

Tutorial Objectives

An Example of a Form

The Interaction between a Web Page Form and a CGI Script

Working with CGI Scripts

CGI Scripts

CGI Script Restrictions

CGI Scripts and Computer Languages

Form Components and Elements

Form Control Elements

Form Control Elements

Continued

The Tag

The Tag Continued

Adding the Tag

Structuring a Form

Layout of a Registration Form

Input Types

Working with Text Boxes

The name and id Attribute

Creating a Text Box

Name/Value Pairs sent from

the Web Form to the CGI Script

CGI Script Names

Text Boxes on the Form

Controlling the Size of a Text

Box

Setting the Width of Text Boxes

Result of Setting the Width of Text Boxes

Setting the Maximum Length

for Text Input

Specify the Maximum Length for a Field

Setting a Default Value for a

Field

Defining a Default Value for a

Field

Creating a Password Field

Working with Form Labels

Working with Form Labels

Creating a Label for the fname

Field

Creating a Selection List

Modifying the Appearance of a Selection List

Modifying the Appearance of a Selection List Continued

Selection Lists with Different Size Values

Making Multiple Selections

Making Multiple Selections Continued

Working with Option Values

Working with Option Groups

Option Groups

Working with Radio Buttons

Working with Radio Buttons Continued

Creating Radio Buttons

Selection Lists vs. Radio

Buttons

Creating a Group Box

Creating a Group Box Continued

Creating a Group Box and Legend

Group Box Size

Working with Check Boxes

Adding Check Boxes

Group Boxes for Radio Buttons

and Check Boxes

Creating a Text Area

Creating a Text Area

Wrap Attribute Values

The wrap Attribute for Text

The
Tag

The
Tag Continued