Lecture 7b: HTML: Forms

What You Will Learn Today

  1. Describe the function of forms and the structure of form tags.
  2. Create HTML forms using form elements such as
    1. push buttons, radio buttons, check boxes, text boxes
    2. pull-down and multiple-select menus
    3. text areas

HTML Forms

Form Tag

Input Field

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

Select Field

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

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

Tips for Form Design

To Do After Class