Make your own free website on Tripod.com

Sparks Fly
[Home] [PBS VideoDatabase] [Social Studies] [TSU] [UVA]

 

 

Advanced HTML

Forms and Comments

My Web Page is Alive!

Forms make web pages interactive

Readers can

  • Fill out text entry
  • Click on radio buttons
  • Select from pop-up menus

Forms make static pages become places for

  • Commerce
  • Research
  • feedback

Importance

  • Important for e-commerce
  • Establishes relationships
    • Business-to-business
    • Business-to-consumer
  • Gather and uploads data from users

Functionality

  • Two-fold
  • Create a form for the user
  • Server level; what happens to the data
  • Data transferred in name-value pairs
  • Value—the data being entered by the user
  • Name—the label used to identify the value
  • No two values can share the same name

Other Options--CGI

Common Gateway Interface

Standards that lets programs operating outside the WWW environment to interact with forms

CGI serves information

  • Produce documents that web browsers can read
  • Connect to databases
  • Connect to image generation programs
  • Connect to electronic mail
  • Connect to almost any other program

CGI-BIN repository of CGI programs

CGI

Programs that receive the data at the server level

Can be written in many programming or scripting languages

  • Perl
  • C++
  • C
  • TCL
  • AppleScript

Commonly written in Perl

Web Hosts

You don’t have to write the CGI programming

Most web hosting vendors provide generic CGI programs

Many freeware and public domain CGI programs on Web

Complex Behavior

  • Forms do not require special programs like C++, Perl, or Java
  • Form data can be send directly by e-mail without leaving HTML
  • Forms have not always been so easy
  • Netscape created an extension that allowed form data transfer
  • The Netscape extension has become widely supported

Data Received

Form data arrives and is NOT pretty

PizzaNumber=3&optionGP=on&optiononion=on&DeliveryMethod=2nd+Day

Order for 3 pizzas with green pepper and onions delivered by 2nd Day shipping

Data is combined into name/value pairs

Each pair is separated by ampersands (&)

  • Where does it go?
  • All data that is relevant is present
  • Depends on you email program
  • Eudora files form data in a separate attachments folder
  • Experiment with your mail program to see where it files form data

Form Structure

Form container places fill-out forms within HTML

A single HTML page can have several forms

Each must stand on its own

Forms may not be nested (form within a form)

Attributes

Form tag

<form>…</form>

Attributes

Action (necessary)

Method (necessary)

Enctype

Action

Action attribute instructs the browser where to send form data

This holds the email address or URL of a CGI program that accepts the form contents

Could also hold a specific program written in C, Perl, or Java

Example

<form

ACTION="mailto:csparks@whro.net" OR

ACTION=/cgi-bin/email.cgi

METHOD="post"

ENCTYPE="application/x-www-form-urlencoded">

Place data here

</form>

METHOD

Explains how the post will be sent

Only two choices

POST (default method)

GET (very uncommon)

Unless instructed otherwise by your host always use POST

ENCTYPE

Selects the data format—most leave this attribute off

Two choices

application/x-www-form-urlencoded

This is the default

multipart/formdata

This is supported by Netscape only

While multipart/formdata is superior but only supported by one browser you can omit the ENCTYPE attribute from the form tag

Data Fields

Three major form types

Selection lists

Text areas

Inputs

Everything else (catch all)

Selection lists support pop-up menus and multiple-selection forms

Text—entry fields

Input—all other elements such as buttons, single-line data entry, etc.

INPUT tag

Most common tag

Specifies the type of form element being created

Used with other elements

Text fields

Checkboxes

Radio buttons

Password fields

Attributes

Input has three required attributes

Type

Type=text

Name

Name=first_name

Value (only used with checkboxes and radio buttons)

Value=exec

Type Attribute

These are the acceptable options

Text

Password

Radio

Checkbox

Button

Name Attribute

Required attribute for all form fields

Any unique identifier of your choice

No two can be alike except radio

Radio/Checkbox

Same name value for all radio buttons or checkboxes in a group

Name Attribute

Data fields must have a name

User-defined label for the data field

Invisible to form reader

Valuable for deciphering and processing the resulting data

Data will upload to a database only if these labels and the & divider exist

List Boxes & Text Areas

Exception to standard rules of form syntax

Neither uses the INPUT tag

Each has own tag set to form the container

Selection Fields

Selection fields allow choice from a range of values

Present options for the user to select

To establish a default the <Option Selected> tag is used and this option will appear in the selection box window

Example

<select name="Groceries" multiple>

<option selected> milk

<option> bread

<option> meat

<option> vegetables

</select>

Text Input Fields

Most common type and easiest

Request brief answers

Permit single-line data entry

<input type=text>

Creates a text-based data entry field

SIZE, and MAXLENGTH attributes control the behavior of the field (VALUE can be used)

Size

Limits the width of a text field

Value measured in number of characters

Most browser show 20 characters if no size coded

Example of size attribute

<input type="text" name="Text 1" value="Text one" size=2>

<input type="text" name="Text 1" value="Text one" size=15>

These fields will have different sizes

Maxlength

Maximum number of characters that can be input no matter the width

Example of maxlength

<input type="text" name="Text1" value="Text one" size = 20 maxlength=10>

Example of maximum length in characters that can be placed in the box

Value

Provides example of type of text in box

Example of value attribute

<input type="text" name="Text1" value="Text one">

<input type="text" name="Text2" value="Text two">

These fields have different values

Password Input Field

Similar to text fields

Exactly like input fields and act like text fields but you cannot see the data

<input type=password>

Tag hides the text that the reader types

Prevents onlookers from snooping and obtaining sensitive information

Characteristics

Accepts any alphanumeric data

Width can be specified with size attribute

Max number of characters can be entered not matter the width using MAXLENGTH attribute

Visual security, not encryption of data when uploaded

Checkbox

Simple on/off entry fields

Capture non-exclusive data

Multiple options

<input type=checkbox>

Produces a selectable box

Attribute CHECKED

Causes the attribute to be chosen as default

Characteristics

Identified by text located adjacent to the box

Require VALUE input tag attribute

In single group, all checkboxes have same name but different value

Only radio and checkboxes REQUIRE the VALUE attribute

Each box has to be selected or unselected

Example results in green box having a check in it

<input type="checkbox" name="red">red<br>

<input type="checkbox" name="blue">blue<br>

<input type="checkbox" name="green" checked>green<br>

Radio Buttons

One-of-many selections

<input type=radio>

Tag limits selection among a number of identically named fields--exclusive

Only one button can be selected

Attributes CHECKED and VALUE

Checked selects the default

Value distinguishes between identical named buttons

Characteristics

Identified to user by text adjacent to tag

Require VALUE attribute

Unlimited number of radio buttons in a single group or form

Only one radio button in a single group can be selected

<input type="radio" name="station" value="2WD"> 2WD

<input type="radio" name="station" value="NPR" checked> NPR

<input type="radio" name="station" value="WNOR"> WNOR<br>

This results in three round buttons with NPR having a dot in the circle. You can select another choice but you cannot select two.

Text Area Fields

<textarea>

Enter large blocks of text

Creates a multi-line text input field

Set field size with COLS and ROWS attributes

<textarea rows=3 cols=40 name="feedback"> Enter text here </textarea>

Characteristics

Not sized with SIZE attribute

Uses ROWS and COLS attributes

Container tag

<textarea>…</textarea>

Vertical and horizontal scrollbars appear automatically

Grayed out until needed

Text automatically word wraps in IE not in Netscape

List Box

Selection list

List of options and only one can be chosen

Provide many options without using screen space

Characteristics

Container tag

<select>…</select>

Similar to ordered and unordered list

Uses <option> tag to specify the choices in the list box


Example

What is your favorite color?

<select name=color>

<option>red

<option>blue

<option>green

</select>

Form Buttons

Mechanism for user to upload data

Submit, Reset and resubmit buttons

RESET returns form values to default

SUBMIT sends form data to the URL specified in the ACTION attribute

Uses INPUT tag

Attribute—VALUE

Defines the button text

Characteristics

Submit executes the values of the opening attributes in form

Reset clears the contents of the form

These two tags do not need the NAME attribute

Choices for submit and reset buttons

<input type="reset" value="reset">

<input type="reset" value="reset form">

<input type="reset" value="erase form">

<input type="submit" value="submit">

<input type="submit" value="send data">

<input type="submit" value="place order">

 

Other Form Elements

<fieldset>

Allows grouping together of data fields that relate to each other

Divide form into smaller parts

Places a box around a portion of the form

<legend>

Content of a fieldset element must begin with a legend tag to provide a caption for the group of controls

Problems

Netscape does not support formset tag

Displays form without the box around it

Caption in legend field will not display

Forms—Web Site Interactivity

Forms rely on external resources to produce responses

Form data can be mailed, strange format but in your email

Forms allow interaction, commerce, research to occur on the Web

Comments

Comments—What???

Form of document control

Elements that readers never see

Placed in HTML code to provide insight, manageability, and commentary

Created by and for the author

Keep track of authorship, revisions, and recurring trouble spots

<!- - and - ->

Web browser cannot see the above command and anything written within it

<!- - Document: art.htm

Author: csparks

Source: CPS

Last Rev: 9 Feb 2001

- ->

Use when needed

Comments can be placed anywhere

The are invisible to the users

When View Source, comments can be seen

Most editors place lots of comments in the document

Comments and Forms

Comments clarify and remind author about the page

Forms allow interaction

Comments explain and help the author to recall exactly how the form, page, site operates

Summary

Form is not a single HTML element

Purpose—two-fold

User side

Server side

Sophisticated and strict syntax

Data resulting from the form is uploaded into

CGI program

E-mail account

 
This page was updated on:  04/10/02