Form Basics | Skopestudios

Forms are one of the most fundamental elements used to send and receive data from one we page to another. The following tutorial will go through the basics of a HTML form. It is by no means a comprehensive resource on forms, their structure or purpose however it will help to explain some of the more common form elements.

The <form> tag

<form id="userRegistration" action="register.php" method="post" name="userRegistration"></form>

The form tag is used to encapsulate all elements in the active form. This is the parent container and all fields, controls and buttons must reside within these tags. The attributes you should include are:

id: Unique ID for the element on the page
name: Name of the form element
method: Submission type (POST | GET)
action: the page that will process the data being submitted

There are other attributes however these four should always be included.

The <fieldset> tag

<fieldset></fieldset>

The Fieldset is a container used to group similar form fields. This is not a compulsory element.

The <legend> tag

Within the fieldset tag lies the legend tag. This acts as a label for the fieldset and its contents.

<fieldset><legend>Fieldset Legend</legend></fieldset>

Fieldset Legend

The <label> tag

The label tag is used to attach a text label with a form input element. The label tag can be used in a couple of different ways. You can wrap the field and label name inside the label tag

<label>Email Address: <input type="email" name="emailAddress" id="emailFieldID" /></label>

Email Address: or you can use the ‘for’ attribute to attach the label to the field without it needing to be nested. The value of the ‘for’ attribute must match the value of the ‘name’ attribute for the form field you want the label attached to.

<label for="emailAddress">Email Address: </label><input type="email" name="emailAddress" id="emailFieldID" />

Email Address:

The <input> tag

The ‘input’ tag has a number of attributes. The following should always be included:

type: Type of input field (text | email | tel | number | checkbox | radio | submit | reset | button)
id: Unique ID for the element on the page
name: Name of the form element
value: Default value of the input field

More on input types: There are many ‘types’ of input fields that can be used depending on the information you wish to present. (button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week) This section only covers a few of the basics. Many of these types are new to HTML5 and may not be supported in older browsers. The ‘text’, ’email’, ‘tel’, ‘number’ types are all free text input fields. Later browsers that support the newer HTML5 field types (email, tel, number) expect specific types of input. Some browsers will also perform basic validation on these data types. Older browsers that do not support these new fields will typically render the field as a plain text input.

<input type="text" id="firstNameField" name="firstName">

The ‘radio’ type is used for radio buttons where the user can only pick one option from a pre-defined list. If nothing is selected, no data is sent to the server.

<input type="radio" name="favColour" value="red" id="favColourField_0">

The ‘checkbox’ type allows the user to select any number of elements from a pre-defined list. If nothing is selected, no data is sent to the server.

<input type="checkbox" name="favAnimals[]" value="dog" id="favAnimals_0">

The ‘name’ attribute of the checkbox is a little different. by adding the square brackets [] to the end of the filed name, it allows us to easily access the values later. The ‘submit’ and ‘reset’ types are special button types for html forms that perform specific functions (as named). The ‘button’ type is a clickable button and is often used in conjunction with Javascript.

The <select> tag

The ‘select’ tag is used for single and multiple select lists.

<select name="favState" id="favStatesField"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>

A multiple select list includes an additional attribute ‘multiple’

<select name="favCities" size="4" id="favCitiesField" multiple="multiple"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>

The <option> tag

The ‘option’ tag is is used for individual elements within a select list and must be nested within the select element. Each option tag needs to have a unique ‘value’ attribute. The value attribute is the content that is sent when the form is submitted.

<select name="favState" id="favStatesField">
    <option value=""></option>
</select>

Complete Code

<form id="userRegistration" name="userRegistration" method="post" action="">
<fieldset>
	<legend>Personal Information</legend>
	<label for="firstName">First Name:</label><input type="text" id="firstNameField" name="firstName"><br>
	<label for="lastName">Last Name:</label><input type="text" id="lastNameField" name="lastName"><br>
	<label for="emailAddress">Email:</label><input type="email" id="emailField" name="emailAddress"><br>
	<label for="tel">Phone:</label><input type="tel" name="tel" id="tel">
</fieldset>
  <p>&nbsp;</p>
<fieldset>
	<legend>Interests</legend>
  <p>Favourite Colour:<br>
  <label><input type="radio" name="favColour" value="red" id="favColourField_0"> Red</label><br>
  <label><input type="radio" name="favColour" value="orange" id="favColourField_1"> Orange</label><br>
  <label><input type="radio" name="favColour" value="yellow" id="favColourField_2"> Yellow</label><br>
  <label><input type="radio" name="favColour" value="green" id="favColourField_3"> Green</label><br>
  <label><input type="radio" name="favColour" value="blue" id="favColourField_4"> Blue</label><br>
  <label><input type="radio" name="favColour" value="indigo" id="favColourField_5"> Indigo</label><br>
  <label><input type="radio" name="favColour" value="violet" id="favColourField_6"> Violet</label><br>
  </p>
  <p>&nbsp;</p>
	<p>Favourite Animals:<br>
  <label><input type="checkbox" name="favAnimals[]" value="dog" id="favAnimals_0"> Dog</label><br>
  <label><input type="checkbox" name="favAnimals[]" value="cat" id="favAnimals_1"> Cat</label><br>
  <label><input type="checkbox" name="favAnimals[]" value="bird" id="favAnimals_2"> Bird</label><br>
  <label><input type="checkbox" name="favAnimals[]" value="horse" id="favAnimals_3"> Horse</label><br>
  <label><input type="checkbox" name="favAnimals[]" value="pig" id="favAnimals_4"> Pig</label><br>
  <label><input type="checkbox" name="favAnimals[]" value="cow" id="favAnimals_5"> Cow</label><br>
  </p>
  <p>&nbsp;</p>
	<label for="favState">Favourite State:</label><br>
  <select name="favState" id="favStatesField">

    <option value=""></option>
    <option value="Australian Capital Territory">Australian Capital Territory</option>
    <option value="New South Wales">New South Wales</option>
    <option value="Northern Territory">Northern Territory</option>
    <option value="Queensland">Queensland</option>
    <option value="South Australia">South Australia</option>
    <option value="Tasmania">Tasmania</option>
    <option value="Victoria">Victoria</option>
    <option value="Western Australia">Western Australia  </option>
  </select>
  <p>&nbsp;</p>
	<label for="favCities">Favourite Cities:</label><br>
  <select name="favCities" size="4" id="favCitiesField" multiple="multiple">

  <option value="">None</option>
  <option value="Adelaide">Adelaide</option>
  <option value="Brisbane">Brisbane</option>
  <option value="Canberra">Canberra</option>
  <option value="Darwin">Darwin</option>
  <option value="Hobart">Hobart</option>
  <option value="Melbourne">Melbourne</option>
  <option value="Perth">Perth</option>
  <option value="Sydney">Sydney</option>
  </select>
</fieldset>
  <p>&nbsp;</p>
<fieldset>
	<legend>Actions</legend>
  <input type="submit">
  <input type="reset">
</fieldset>
</form>