HAL-PC Web Technolgies SIG

Mail List | SIG Leader

Form Controls

HAL-PC Web Technologies SIG

Examples of Form Controls

None of the forms controls on this page are linked to any forms processor but merely for example with the code below each example.

Types of text boxes:

Group Options:

Checkbox:

Computers in Household:

<fieldset>
<legend>Computers in Household: </legend>
<label><input type="checkbox" name="computers" value="1-5" />1-5</label>
<label><input type="checkbox" name="computers1" value="6-11" />6-11</label>
<label><input type="checkbox" name="computers2" value="12-25" />12-25</label>
<label><input type="checkbox" name="computers3" value="25-50" />25-50</label>
</ fieldset>

Radio Buttons:
<label>Radio Buttons:
<input name="computerOwner" type="radio" value="yes" />I own a computer </label>

Radio Group:

Price Range:

<fieldset>
<legend>Price Range</legend>
<label><input type="radio" name="Price_Range" value="0-10" />$0- $10 </label>
<label><input type="radio" name="Price_Range" value="11-25" />$11-$25</label>
</fieldset>

Select Boxes

<label>Skill Level
<select name="skill">
<option value="0" selected="selected">--select--</option>
<option value="1">Newbie</option>
<option value="2">Beginner</option>
<option value="3">Intermediate</option>
<option value="4">Advanced</option>
<option value="5">Expert</option>
<option value="6">Super User</option>
</select>
</label>

<label>Skill Level<br />
<select name="skill1" size="6">
<option value="1">Newbie</option>
<option value="2">Beginner</option>
<option value="3">Intermediate</option>
<option value="4">Advanced</option>
<option value="5">Expert</option>
<option value="6">Super User</option>
</select>
</label>

<label for="favcity">Which is your favorite city?</label>
<select id="favcity" name="favcity">
<optgroup label="Europe">
<option value="1">Amsterdam</option>
<option value="2">Interlaken</option>
<option value="3">Nice</option>
<option value="4">Venice</option>
</optgroup>
<optgroup label="North America">
<option value="5">New York</option>
<option value="6">Houston</option>
<option value="7">Montreal</option>
</optgroup>
<optgroup label="South America">
<option value="8">Buenos Aires</option>
<option value="9">Portillo</option>
</optgroup>
<optgroup label="Asia">
<option value="10">Hong Kong</option>
<option value="11">Tokyo</option>
<option value="12">New Dehli</option>
</optgroup>
</select>

Buttons & Images

<input type="submit" name="Submit" value="Submit" />
<input type="reset" name="Reset" value="Reset" />
<input name="imageField" type="image" src="register.gif" width="72" height="20" border="0" alt="register" />

Misc. Controls

Hidden Control <input name="sku" type="hidden" value="P-457" />


<label for="file">Select File</label> <input type="file" name="file" id="file" />


About Us | Site Map | Advanced Search | Privacy Policy | Contact Us | ©1999-2006 HAL-PC Web Technologies SIG Leader Cheryl D. Wise