Thomas Wallace: Lectures and Resources - A collection of website design lectures and resources

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

Personal Information

Name

Address

Gender Male Female

Form Code

<form name="formexample" method="" action="">
<fieldset>
<legend>Personal Information</legend>
<p>
<label for="textfield">Name</label>
<input type="text" name="textfield" id="textfield" />
</p>
<p>
<label for="textarea">Address</label>
<textarea name="textarea" id="textarea" cols="45" rows="5">
</textarea>
</p>
<p>
<label for="select">Gender</label>
<select name="select" id="select">
<option value="Male" selected="selected">Male</option>
<option value="Female">Female</option>
</select>
</p>
<p>
<input type="submit" name="button" value="Submit" />
</p>
</fieldset>
</form>