Forms

Working with Forms

HTML forms allow us to collect information or receive input from our site visitors. In this module we will explore the basic elements of an HTML form.

<form> – open and closes a web based form (block-level element) includes the action and method attributes.
<fieldset> opens and closes a group of related form input options. A single form may have multiple fieldsets
<legend> declares a heading for a fieldset grouping
<label> – The name of the input that is displayed on the screen, required for accessible forms
<input> – element that the user uses to input data. Must contain the type and name attributes. This is a self-closing tag. Below is a list of a few of the different input types
- text – displays a single line input
- submit – displays a button that the user can click to submit the form
- reset – resets the values in the form elements to their default values
<textarea> – displays a multi-line input – not self closing
<select> – displays a dropdown list of options for the user to select

Example Form

Form Code

<form action=”” method=”” name=”formexample”>
<fieldset><legend>Personal Information</legend><label for=”textfield”>Name</label>
<input id=”textfield” name=”textfield” type=”text” />

<label for=”textarea”>Address</label>
<textarea id=”textarea” cols=”45″ name=”textarea” rows=”5″><br />
</textarea>

<label for=”select”>Favorite Color</label>
<select id=”select” name=”select”>
<option selected=”selected” value=”Red”>Red</option>
<option value=”Blue”>Blue</option>
<option value=”Green”>Green</option>
</select>