WEB DESIGN - HTML 2: Forms

FORMS

The information provided here is common to most browsers. The NN# and IE# in parenthesis refer to which version of Netscape Navigator and MS Internet Explorer the attribute was made available. If not noted, then that attribute was available from the start.

Defines a form.

ATTRIBUTES

action="url"	determines where the browser will go to process the form
method= "get\|post"	determines how the form information will be sent
name="text"	assigns a name to the form
target="name of window/frame"	sets where to display the information returned from the form processing

Defines an input field within the current form.

ATTRIBUTES

align= "absbottom|absmiddle|baseline|bottom|left|middle|right|texttop|top: sets the alignment for the input field with the surrounding content

checked: when present in the tag, it will "check" that checkbox or radio button defined in the tag (NN4, IE3)

maxlength="number": sets the maximum number of characters that can be entered into a text field

name="text": assigns a name to the field

size="number": sets the maximum visible width for a text and password field

type="button|checkbox|file|hidden|image|password|radio|reset|submit|text": defines the type of input field

value="text": assigns a value to a field to be used as part of the form processing versus what is displayed on the screen

<INPUT> TYPES

button: a clickable button that requires scripting

<input type="button" value="View Catalog" onClick="viewCatalog()">

checkbox:click on/off box; the "value" attribute is sent to the form for processing

<input type="checkbox" value="app" name="fruit" CHECKED> Apples
<input type="checkbox" value="ban" name="fruit"> Bananas
<input type="checkbox" value="ora" name="fruit"> Oranges

Apples Bananas Oranges

<input type="checkbox" value="app" name="apple"> Apples
<input type="checkbox" value="ban" name="banana"> Bananas
<input type="checkbox" value="ora" name="orange"> Oranges

Apples Bananas Oranges

file: a button file which allows a user to select a local file for uploading; requires a cgi script

<input type="file" name="upFile">

hidden: an invisible field used to provide additional information with the form when submitted

<input type="hidden" name="specialcode" value="Ab234">

image: uses an image as a submit button

<input type="image" name="imageSubmit" src="images/button_ex1.gif" height=20 width=92 onClick="viewCatalog()">

password: displays bullets or asterisks when user types characters into the field; the actual text entered is submitted with the form

<input type="password" name="memberpw">

radio: a group of related on/off buttons

<input type="radio" name="agegroup" value="0_20"> 0 - 20
<input type="radio" name="agegroup" value="21_39"> 21 - 39
<input type="radio" name="agegroup" value="40_54"> 40 - 54
<input type="radio" name="agegroup" value="55+"> 55+

0 - 20 21 - 39 40 - 54 55+

reset: clears all thefields in the form

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

submit: submits the form to the "action" for processing

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

text: type characters into the field

<input type="text" name="firstName" maxlength="30" size="15">

<TEXTAREA></TEXTAREA>

Allows user to enter paragraphs of information

<textarea rows="5" cols="40" name="comments" wrap></textarea>

<SELECT></SELECT>

Allows user to pull down a list of options to choose from

<select name="colors">
   <option>Pick a Color
   <option>Blue
   <option>Green
   <option>Red
   <option>Yellow
   </select>

<select name="colors" MULTIPLE size="4">
   <option>Pick a Color
   <option>Blue
   <option>Green
   <option>Red
   <option>Yellow
   </select>

EXAMPLES

Example 1

<HTML>
<BODY>

<form method=post action="http://webdesign.marknewsome.com/dreamweaver/printform.php" name="myForm">

<b>First Name: </b> <input type="text" name="firstname" maxlength="30" size="20">
<br>
<b>Last Name: </b> <input type="text" name="lastname" maxlength="30" size="20">
<br>
<b>Telephone: </b> <input type="text" name="phone" maxlength="12" size="12">

<br><br>

<input type="submit" value="Submit Form">   <input type="reset" value="Clear Form">

</form>

</BODY>
</HTML>

First Name:
Last Name:
Telephone:



Example 2

<HTML>
<BODY>

<form method="get" action="http://webdesign.marknewsome.com/dreamweaver/printform.php" name="myForm">

<table width="500" border="0" cellpadding="3" cellspacing="3">
<tr>
    <td align="right" nowrap><b>First Name: </b></td>
   <td><input type="text" name="firstname" maxlength="30" size="20"></td>
</tr>
<tr>
    <td align="right" nowrap><b>Last Name: </b></td>
    <td><input type="text" name="lastname" maxlength="30" size="20"></td>
</tr>
<tr>
    <td align="right"><b>Telephone: </b></td>
    <td><input type="text" name="phone" maxlength="12" size="12"></td>
</tr>
<tr>
    <td align="right" nowrap><b>Modem/Line:</b></td>
    <td><select name="speed">
            <option>Pick a Speed
            <option>56k
            <option>Cable
            <option>DSL
            <option>T1
       </select></td>
</tr>
<tr>
     <td align=right nowrap><b>Credit Card: </b></td>

    <td><input type="radio" name="ccard" value="Visa"> Visa
            <input type="radio" name="ccard" value="MC"> MasterCard
            <input type="radio" name="ccard" value="Disc"> Discover
            <input type="radio" name="ccard" value="AmExp"> American Express</td>
</tr>
<tr>
    <td align=right><input type="checkbox" value="signup" name="getnewsletter" CHECKED></td>
    <td>Check if you want to receive our newsletter</td>
</tr>
<tr>
    <td></td>
    <td><b>Shipping Instructions:</b><br><textarea rows=5 cols=40 name="shipping" wrap></textarea></td>
</tr>
<tr>
    <td></td>
    <td><input type="submit" value="Submit Order">    <input type="reset" value="Clear Order"></td>
</tr>
</table>

</form>

</BODY>
</HTML>

First Name:

Last Name:

Telephone:

Modem/Line:

Credit Card: Visa MasterCard Discover American Express

Check if you want to receive our newsletter

Shipping Instructions:



Another example