Form Examples

Here are some example forms showing different ways to use a form.


<form method="post" action="formEx.asp">
<label for="your_name">Enter your name:</label>
<input type="text" name="your_name" size="12" value="Patty Roy" maxlength="80" />
<input type="hidden" name="HiddenFromUser" id="HiddenFromUser" value="hidden text" />
<br />
<label for="password">Enter A Test Password:</label>
<input name="password" id="password" type="password" size="8" />
<br />
<input type="submit" value="Test this form" />
</form>



<form method="post" action="formEx.asp">
<p>What is your favorite color?
<ul>
<input type="checkbox" name="blue" id="blue" value="yes" checked="checked" / >
<label for="blue">Blue</label><br />
<input type="checkbox" name="green" id="green" value="yes" />
<label for="green">Green</label><br />
<input type="checkbox" name="yellow" id="yellow" value="yes" />
<label for="yellow">Yellow</label><br />
<input type="checkbox" name="red" id="red" value="yes" />
<label for="red">Red</label><br />
<input type="checkbox" name="purple" id="purple" value="yes" />
<label for="purple">Purple</label>
</ul>

</p>
<p>
<input type="submit" value="Test this form" />
<input type="reset" value="Clear Choices" />
</p>
</form>

What is your favorite color?






All radio buttons in a group have the same name since only one button can be set.

<form method="post" action="formEx.asp">
<p>Which one of these sports is your favorite sport?</p>
<ul>
<input type="radio" name="sport" value="soccer" id="soccer" checked="checked" / >
<label for"soccer">Soccer</label><br />
<input type="radio" name="sport" id="baseball" value="baseball" />
<label for="baseball"Baseball</label><br />
<input type="radio" name="sport" id="basketball" value="basketball" />
<label for="basketball">Basketball</label><br />
<input type="radio" name="sport" id="football" value="football" />
<label for="football">Football</label><br />
<input type="radio" name="sport" id="hockey" value="hockey" />
<label for="hockey">Hockey</label>
</ul>
</p>
<p>
<input type=submit value="Test this form" >
<input type=reset value="Reset" />
</p>
</form>

Which one of these sports is your favorite sport?






textarea is used to create fields where a lot of text will be entered.

<form method="post" action="formEx.asp">
<label for="feedback">Feedback:</label>
<br /><textarea name="feedback" id="feedback" rows="20" cols="10">
This text is displayed by default.</textarea>
<br /><label for="comments"Please submit your comments about this site.</label>
<br /><textarea name="comments" id="comments" rows="4" cols="20" wrap="off"></textarea>
<br /><label for="email">Email address:</label>
<br /><textarea name="email" id="email" rows="1" cols="20"></textarea><br />
<input type="submit" value="Send Feedback" />
</form>







Option lists or combo boxes allow the user to select from a list. option lists can be drop down list boxes, like this:

<form method="post" action="formEx.asp">
<p>
<select name="color" id="color" >
<option>Blue</option>
<option>Green</option>
<option>Yellow</option>
</select>
</p>
<p><input type="submit" value="Test this form" />
<input type="reset" value="Defaults" /></p>
</form>

Simple listboxes, like this:

<form method="post" action="formEx.asp">
<p>
<select name="color" id="color" size="3">
<option>Blue</option>
<option>Green</option>
<option>Yellow</option>
</select>
</p>
<p><input type="submit" value="Test this form" />
<input type="reset" value="Defaults" /></p>
</form>

Or scrolling listboxes, like this:

<form method="post" action="formEx.asp">
<p>
<select name="color" id="color" size="3">
<option>Blue</option>
<option>Green</option>
<option selected="selected">Yellow</option>
<option>Red</option>
<option>Purple</option>
<option>Pink</option>
</select>
</p>
<p><input type="submit" value="Test this form" />
<input type="reset" value="Defaults" /></p>
</form>

So far the value returned to the action program when the form was submitted was the same as the description of the option displayed to the user in the listbox. Here we'll see an example of how you can use small tokens to represent the options (to save space in a spreadsheet for which the data is destined, for example), while still displaying meaningful descriptions to the user.

Notice that when you submit this form, you get not the option description, but an abbreviated keyword for it:

<form method="post" action="formEx.asp">
<p>
<label for="today">What would you like to do today?</label> </p>
<select name="today" id="today" size="5">
<option value="ride">Ride a bike</option>
<option value="walk" selected="selected">Take a walk</option>
<option value="school">Go to school</option>
<option value="beach">Go to the beach</option>
<option value="tv">Watch TV</option>
<option value="pig out">Go out to eat</option>
</select>
<p>
<input type="submit" value="Submit Decision" />
<input type="reset" value="Reset to Default selection" />
</p>
</form>

Here's an example of an option list which uses the MULTIPLE keyword to allow the user to select several of the options.

What items of clothing do you plan to wear?

Hold down Control to select or deselect items separated from one another.
Hold down Shift to select multiple items adjacent to one another.
<form method="post" action="formEx.asp">
<br /><select name="what-to-wear" id="what-to-wear" multiple="multiple" size="8">
<option selected="selected">T-Shirt</option>
<option value="jeans" selected="selected">Levis</option>
<option>Sweatshirt</option>
<option>Socks</option>
<option>Rugby Shirt</option>
<option selected="selected">Wool Sweater</option>
<option>Leather Jacket</option>
<option selected="selected">Boots</option>
<option>Cotton Sweater</option>
<option>Running Shoes</option>
<option>Windbreaker</option>
<option>Vest</option>
</select>
<p>
<input type="submit" value="Submit Choices" />
<input type="reset" value="Reset to Default selections" />
</p>
</form>


This form allows you to click on an image causing the X and Y coordinates to be submitted as baby.x and baby.y.

<form method="post" action="formEx.asp">
<br / >
<input name="baby" id="baby" value="littleKid" type="image" src="images/baby.gif" height="93" width="109" border="0" alt="Baby Picture">
</form>


Here is a way to have fancy submit buttons.

<form method="post" action="formEx.asp">
<p><label for="your_name">Enter your name:</label> <input type="text" name="your_name" id="your_name" size="12" value="Patty Roy" maxlength="50">

</p>
<p> <input name="Submit" id="Submit" type="image" src="images/Submit.gif" height="25" width="130" border="0" alt="Submit Button"> </p> </form>


This HTML5 calendar control may not be available in all broswers.

<label for="myDate">Choose a Date</label>

<input type="date" name="myDate" id="myDate">

<br><br>

<input type="submit" value="Send"> <input type="reset">




This HTML5 color control may not be available in all broswers.

<label for="myColor">Choose a Color</label>

<input type="color" name="myColor" id="myColor">

<br><br>

<input type="submit" value="Send"> <input type="reset">