Web: Lecture 7b

Lecture 7b: HTML: Forms

What You Will Learn Today

Describe the function of forms and the structure of form tags.
Create HTML forms using form elements such as

HTML Forms

A form is a set of controls which make the web page work like a fill-in paper form or a dialog box.
Forms can make a page interactive by allowing the user to interact with the server, or to send an e-mail message.
Many sites use forms for interacting with users.
- web-based e-mail, search engines, user registration, product ordering, navigation menus.
- For an example of a form, see the site evaluation survey and view the HTML source.
Forms can be used with client-side scripting languages like JavaScript and VBScript.
Processing forms using CGI and server-side scripts is an advanced topic; we will only use mailto forms.

Form Tag

The action attribute specifies the URL of an action to perform, usually a program on the server which processes the form.
The method attribute specifies a method of data exchange with the client and the server program, either get or post.
The body of the form contains fields such as input, select and text area.
There can be more than one form per page but forms cannot be nested.
<form action="mailto:gvogl@umu.ac.ug" method="post"> body of form </form>

Input Field

The input tag defines an input field where the user can enter information. Note: there is no end tag.
The type attribute determines the type of input field. Types include:

Type	Description	Example Field	Example HTML Code
`text`	A rectangle where the user can type characters.		`<input type="text" size="10" name="username" value="umu">`
`password`	A text field which displays (conceals) typed characters as *; often used as a password variable.		`<input type="password" size="10" maxlength="14" name="password" value="mum">`
`file`	A text field which prompts the user for a file. The user can type a filename or click the Browse button to find a file.		`<input type="file" size="10" name="userfile">`
`checkbox`	A small square box which displays a check (tick) if selected.	I agree Married	`<input type="checkbox" name="agreement"> I agree <input type="checkbox" name="status" checked> Married`
`radio`	A small circle which contains a dot if selected. Only one of a group with same name can be selected.	pineapple passion papaya	`<input type="radio" name="fruit" value="pineapple"> pineapple <input type="radio" name="fruit" value="passion" checked> passion <input type="radio" name="fruit" value="papaya"> papaya`
`button`	A push button that performs an action specified by a scripting language.		`<input type="button" name="button1" value="Validate Order">`
`submit`	A button to perform the action specified in the `form` tag.		`<input type="submit" value="Send Message">`
`reset`	A button to return all fields to their default values.		`<input type="reset" value="Reset All Fields">`
`image`	An image button which returns the coordinates of the mouse click. Use `src` to specify the image.		`<input type="image" name="logo" alt="OpenOffice.org" src="../courswork/open_office_org_logo.gif">`
`hidden`	An invisible field that sends a value to the server or another form for programming purposes.		`<input type="hidden" name="browser" value="javascript:getBrowser()">`

Other Input Attributes

name: a variable name for the input field that can be used by scripts and programs.
value: an initial value for the input field, depending on the type:
- a text string for a text field, a name for a selected checkbox or radio button, or the text on a push button
checked (with no value): the check box or radio button is selected by default
- Tip: only use a default value if a selection is required.
size: number of characters displayed in a text or password field
maxlength: number of characters accepted in a text or password field

Select Field

A select field is a pull-down or scrollable menu from which the user can select one or more items.
- Tip: Selecting an option from a menu can be quicker and less error-prone than typing into a text box.
Use an option tag to define each list item.
- name: the value to be returned if this item is selected.
Use the size attribute to list the number of items in a scrollable menu; otherwise the menu will be pull-down.
Use the multiple attribute (with no value) for a scroll box allowing multiple selections (using Shift-click and/or Ctrl-click).

Menu Type	Example Field	Example HTML Code
pull-down menu	Select a colour:	`Select a colour: <select><option name="red">red <option name="green">green <option name="blue">blue </select>`
scroll box	Select a university:	`Select a university: <select size="2"><option name="MUK">Makerere <option name="KIU">Kampala International <option name="UMU">Uganda Martyrs </select>`
multiple selection	Select zero or more:	`Select zero or more: <select multiple size="3"><option name="matooke">matooke <option name="rice">rice <option name="sweet potato">sweet potato </select>`

Text Area

A textarea is a rectangular area where users can type multiple lines of text. Attributes include:
- name: a variable name to store the text in the text area
- rows and cols: number of lines and characters per line
- wrap (with no value): the text wraps to fit the box size

Example Field	Example HTML Code
Type your text here.	`<textarea rows=2 cols=20 wrap>Type your text here.</textarea>`

Tips for Form Design

HTML does not force you to use a label for fields.
- Label all fields and make it clear which label goes with which field.
- Use tables to neatly align fields and labels for readability.
Users are worried about the privacy and security of their data.
- Make it clear what data you are collecting, how you will use the data, and what data is optional.

To Do After Class

Complete Lab 6 by Friday. Lab 7 is due next Friday.
Paper References: Reding/Vodnik Unit D, Carey Tutorial 6, QuickStudy HTML p. 1
Electronic References: HTML 4.01 Specification Ch. 17, HTML Quick Reference, Bare Bones Guide