HTML Forms IS 210 Internet Programming I

When adding a form, you first need to tell the browser that the page will contain a form by using the form tag:

<form id="myForm" action="#" method="post"> </form>

All form elements must go between the <form></form> tags.
All forms should be assigned a name.

Form Field Types

The submit button will not work for this form unless you have an email program on your computer. The CRC computers do not.

Reset
`<input type="reset" value="Clear" />`
Submit
`<input type="submit" value="Send it!" />`
Button
`<input type="button" name="whatever" value="Click Me!" />`
Text Boxes
`<p>`What is your favorite season?`</p>` `<input type="text" name="FavSeason" size="20" maxlength="6" />`	What is your favorite season?
Radio Buttons
`<input type="radio" name="season" value="spring" />`Spring`<br />` `<input type="radio" name="season" value="summer" checked="checked" />`Summer`<br />` `<input type="radio" name="season" value="fall" />`Fall`<br />` `<input type="radio" name="season" value="winter" />`Winter	Spring Summer Fall Winter
Checkbox
`<p>`Select your favorite seasons.`</p>` `<input type="checkbox" name="Favorite Seasons" value="spring" />`Spring`<br />` `<input type="checkbox" name="Favorite Seasons" value="summer" />`Summer`<br />` `<input type="checkbox" name="Favorite Seasons"value="fall" />`Fall`<br />` `<input type="checkbox" name="Favorite Seasons" value="winter" />`Winter	Select your favorite seasons. Spring Summer Fall Winter
Select Menus
`<p>`Select your favorite season.`</p>` `<select name="selectSeason">` `<option selected="selected" value="spring">`Spring`</option>` `<option value="summer">`Summer`</option>` `<option value="fall">`Fall`</option>` `<option value="winter">`Winter`</option>` `</select>`	Select your favorite season.
Memo Type Text
`<p>`Tell us why it's your favorite season.`</p>` `<textarea name="seasonDescription" rows="5" cols="20" wrap> </textarea>`	Tell us why it's your favorite season.
Password
`<p>`Enter your password.`<br />` `<input type="password" name="password" size="12" /> </p>`	Enter your password.
Hidden
`<input type="hidden" name="secret" value="youCantSeeThisDisplay" />`
Image
`<input type="image" name="imageElement" src="picName.jpg" />`
Fieldset
`<fieldset><legend>Favorite Season</legend> <input type="checkbox" name="Favorite Seasons" value="spring" />`Spring`<br /> <input type="checkbox" name="Favorite Seasons" value="summer" />`Summer`<br /> <input type="checkbox" name="Favorite Seasons"value="fall" />`Fall`<br /> <input type="checkbox" name="Favorite Seasons" value="winter" />Winter </fieldset>`	Favorite Season Spring Summer Fall Winter

Other notes about forms

You should always include a "Submit" and "Reset" button in your form.
Pay close attention to the NAME attribute for the radio buttons. It must be the same for each group of radio buttons.
Note how the VALUE attribute defines the actual text that appears on buttons, radio buttons, check boxes, and menus.

Writing CSS rules for forms

IS 210 Home
Syllabus
Fonts Guide
CSS Reference Site
Forms Guide
Useful JavaScript Snippets
MSDN AA

Contact Info
Office: Bldg 18 Room 112A
krist at spokanefalls.edu
3410 W Ft George Wright Dr
MS 3180
Spokane, WA 99224
Voice: 509.533.3246
Fax: 509.533.3856