HTML 4 Hypertext Markup Language

Creating Forms

Science & Art MultimediaScience & Art Multimedia

HTML – Forms (21% of test)

Why forms are important:

• allows visitors to communicate with you

• provides important information (ie. Polls)

• processes pertinent data (cgi scripts)

• provides ecommerce options (ie. shopping carts)

• determine what information you require

• write out your form on paper first

• keeping your form simple at first helps

• look for ideas on the internet

• response-o-matic (pg. 195)

Creating Forms: Resources (pg.190)

NOTE: Most visitors will not fill out long forms

Forms have three main parts:

1. Form tag, which includes the url or cgi script

2. Form elements, such as fields and menus

3. Submit button, which sends the data(reset button, which empties data from form)

Creating Forms:

<form method=post

enctype=“text/plain” (formats incoming text)

action=“mailto:you@site.com”> (email address)

<input type="text" name="visitor_name"

size="26">Comments?<br>

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

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

</form> <!-- review textarea (pg. 198)-->

Form tags: Form sent by email (pg. 194)

Name:<input type="text" name=“name“>

Address:<input type="text" name=“address“size=30>

City:<input type="text" name=“city“>

Province:<input type="text" name=“province“size=2 maxlength=2>

Postal Code:<input type="text" name=“postal“size=5 maxlength=5>

Form tags: Creating Text Boxes (pg. 194)

<textarea name=“comments” rows=3cols=65 wrap>Comments?</textarea>

name= text that identifies data sent to server

rows= height of text area

cols= width of text area

wrap= lines of text are automatically wrapped within the margins of the text area

Form tags: Creating Larger Text Areas (pg. 198)

<input type=“radio" name=“size” value=“K”>King

<input type=“radio" name=“size” value=“Q">Queen

<input type=“radio" name=“size” value=“S”>Single

<input type=“radio" name=“size” value=“D">Double

Form tags: Creating Radio Buttons (pg. 199)

• “size” identifies the name of the radioset, and links the group of radio buttons

• “value” identifies the text that will be sent to the server based on the visitor’s choice

<input type=“checkbox" name=“extras” value=“foot”>Footboard

<input type=“checkbox " name=“extras” value=“drawers">Drawers

<input type=“checkbox " name=“extras” value=“casters”>Casters

<input type=“checkbox " name=“extras”

value=“nosqueak">Squeak Proofing

Form tags: Creating Check Boxes (pg. 200)

• “extras” identifies the name of the checkbox, and links the group of checkboxes

• “value” identifies the text if the box has been checked, and sends data to server

<b>Type of Wood</b>

<select name=“type of wood”>

<option value=“mahogany”>Mahogany

<option value=“maplewood”>Maplewood

<option value=“pine”>Pine

<option value=“cherry”>Cherry

</select>

Form tags: Creating Menus (pg. 201)

Form section on test: