FORM example

First are examples of the various form elements, followed by the HTML and CSS used here in this example. For your own practice, use CSS to control the font, size, color, padding, etc. within the controls.

The <INPUT> tag

type='TEXT' The work-horse form variable.
type='PASSWORD' Input shows as bullets or opaque boxes.
type='HIDDEN'   Useful for adding form variables
you don't want the user to see.
type='CHECKBOX' Checkbox #1
Checkbox #2
Checkbox #3
 User chooses zero or more selections.
type='RADIO' Radio button #1
Radio button #2
Radio button #3
 User chooses exactly one selection.
type='SUBMIT'   w/method="POST" Sends the form data to the 'action=' target.
type='RESET' Clears the form.
type='BUTTON' Similar to 'SUBMIT', but usually used
in conjunction with some Javascript.
type='FILE' Uploads a file from the user's desktop,
gets a bit tricky on the server side...
type='IMAGE' Like 'SUBMIT' or 'BUTTON' but
with an image instead of a
text-labeled button.

The <SELECT>, <OPTION> and <TEXTAREA> tags

SELECT
OPTION		 Allows the user to select one or
more items from a drop-down list.
TEXTAREA So the user can input free-form text.
Generally without HTML content.

The <FIELDSET>, <LEGEND> and <LABEL> tags

FIELDSET
LEGEND
LABEL
I Prefer


For grouping controls,
and giving them a legend,
and making the text clickable.

HTML & CSS source 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
            "http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd"> 
<html>
<head>
<title>FORM example (GET)</title>
<style type="text/css">
body       { margin: 2em 3em; }
h1, h2, h3 { font-family:    Georgia, Arial; }
tr, td     { font-family: Verdana; font-size: 10pt; }
textarea   { font-family: Verdana; font-size: 10pt; padding: 3px; }
.red       { color: #900; }
.boldblue  { color: #009; font-weight: bold; }
pre        { border: 1px solid black; background-color: #FAFAE6; 
             padding: 0.5em; color: #090; }
</style>
</head>

<body>
<h1 align='center'> FORM example </h1>

First are examples of the various form elements, followed by the HTML and CSS
used here in this example.  For your own practice, use
CSS to control the font, size, color, padding, etc. within the controls.
<p>

<form method="POST" action="viewparms.php">

<H2>The <span class='red'>&lt;INPUT></span> tag</H2>
<DIV ALIGN='center'>
<table border bgcolor="#CCCCCC" cellspacing=0 cellpadding=5>

<tr><td BGCOLOR="#DDDDDD">type=<span class='red'>'TEXT'</span></td>
	<td> <INPUT TYPE='text' size=20 name='TextBox' value='default'>
	</td>
    <td><i>
    The work-horse form variable.
    </i></td>
</tr>

<tr><td BGCOLOR="#DDDDDD">type=<span class='red'>'PASSWORD'</span></td>
	<td> <INPUT TYPE='password' size=20 name='Password'>
	</td>
    <td><i>
    Input shows as bullets or opaque boxes.
    </i></td>
</tr>

<tr><td BGCOLOR="#DDDDDD">type=<span class='red'>'HIDDEN'</span></td>
	<td> <INPUT TYPE='hidden' size=10 VALUE="hidden value" name='HiddenField'>&nbsp;
	</td>
    <td><i>
    Useful for adding form variables<br>you don't want the user to see.
    </i></td>
</tr>

<tr><td BGCOLOR="#DDDDDD">type=<span class='red'>'CHECKBOX'</span></td>
	<td> <INPUT TYPE='checkbox' name='CheckBox1' VALUE='Y'>Checkbox #1<BR>
	     <INPUT TYPE='checkbox' name='CheckBox2' VALUE='Y' CHECKED>Checkbox #2<BR>
	     <INPUT TYPE='checkbox' name='CheckBox3' VALUE='Y' CHECKED>Checkbox #3<BR>
	</td>
    <td><i>
    User chooses zero or more selections.
    </i></td>
</tr>

<tr><td BGCOLOR="#DDDDDD">type=<span class='red'>'RADIO'</span></td>
	<td> 
        <INPUT type='radio' name='Brand' VALUE=5 CHECKED>Radio button #1<BR>
        <INPUT type='radio' name='Brand' VALUE=6>Radio button #2<BR>
        <INPUT type='radio' name='Brand' VALUE=7>Radio button #3<BR>
	</td>
    <td><i>
    User chooses exactly one selection.
    </i></td>
</tr>

<tr><td BGCOLOR="#DDDDDD">type=<span class='red'>'SUBMIT'</span></td>
	<td> <INPUT type='submit' VALUE="Submit" name='SubmitButton'>
    &nbsp; w/method="POST"
	</td>
    <td><i>
    Sends the form data to the 'action=' target.
    </i></td>
</tr>

<tr><td BGCOLOR="#DDDDDD">type=<span class='red'>'RESET'</span></td>
	<td> <INPUT type='reset' VALUE="Reset" name='ResetButton'>
	</td>
    <td><i>
    Clears the form.
    </i></td>
</tr>

<tr><td BGCOLOR="#DDDDDD">type=<span class='red'>'BUTTON'</span></td>
	<td> <INPUT type='button' VALUE="button" name='Button'>
	</td>
    <td><i>
    Similar to 'SUBMIT', but usually used<br>
    in conjunction with some Javascript.
    </i></td>
</tr>

<tr><td BGCOLOR="#DDDDDD">type=<span class='red'>'FILE'</span></td>
	<td> <INPUT type='file' size=25 name=File ACCEPT="image/*">
	</td>
    <td><i>
    Uploads a file from the user's desktop,<br>
    gets a bit tricky on the server side...
    </i></td>
</tr>

<tr><td BGCOLOR="#DDDDDD">type=<span class='red'>'IMAGE'</span></td>
	<td> <INPUT type='image'  name='Image'
			src="http://www.micapeak.com/gif/r11small.gif"
			value="...IMAGE not supported...">
	</td>
    <td><i>
    Like 'SUBMIT' or 'BUTTON' but<br>with an image instead of a<br>
    text-labeled button.
    </i></td>
</tr>
</table>
</div>


<h2>The <span class='red'>&lt;SELECT></span>,
    <span class='red'>&lt;OPTION></span> and
    <span class='red'>&lt;TEXTAREA></span> tags</h2>
<div align='center'>
<table border cellpadding=5 cellspacing=0 bgcolor="#CCCCCC">

<tr><td BGCOLOR="#DDDDDD"><span class='red'>SELECT<br>OPTION</span></td>
	<td>	<select name="FieldName">
			<option>BMW
			<option>Ducati
			<option selected>Gas Gas
			<option disabled>Harley Davidson
			<option>Honda
			<option>Yamaha
		</select>
	</td>
    <td>
    <i>
    Allows the user to select one or<br>more items from a drop-down list.
    </i>
    </td>
</tr>

<tr><td BGCOLOR="#DDDDDD"><span class='red'>TEXTAREA</span></td>
	<td>	<textarea name="textarea" ROWS=3 COLS=30 class='boldblue'>
Default text (if any)...
		</textarea>
	</td>
    <td>
    <i>
    So the user can input free-form text.<br>
    Generally without HTML content.
    </i>
    </td>
</tr>
</table>
</div>


<h2>The <span class='red'>&lt;FIELDSET></span>, 
    <span class='red'>&lt;LEGEND></span> and
    <span class='red'>&lt;LABEL></span> tags</h2>
<div align='center'>
<table border cellpadding=5 cellspacing=0 bgcolor="#CCCCCC">

<tr><td BGCOLOR="#DDDDDD"><span class='red'>FIELDSET<br>LEGEND<br>LABEL</span></td>
	<td> 
        <fieldset>
        <legend> <span class='boldblue'>I Prefer</span> </legend>
        <INPUT type='radio' name='liquorChoice' VALUE='bourbon' id='L1'>
            <label for='L1'>Bourbon on the rocks</label><BR>
        <INPUT type='radio' name='liquorChoice' VALUE='rum' checked id='L2'>
            <label for='L2'>Dark Rum and Coke</label><BR>
        <INPUT type='radio' name='liquorChoice' VALUE='tequila' id='L3'>
            <label for='L3'>Tequila and lime</label><BR>
        </fieldset>
	</td>
    <td>
    <i>
    For grouping controls,<br>
    and giving them a legend,<br>
    and making the text clickable.
    </i>
    </td>
</tr>
</table>
</div>

</form>

<p align='center'>
<a href="/">Software Ingenuity</a>

</body>
</html>

Software Ingenuity