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:[email protected]”> (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: