HTML 6: HTML Forms

Well, this post marks the end of this series. In part 5, we covered what you needed to know about images. In this final part, I want to get into another important HTML element group… forms. Forms are a great way to collect user input and pass data from one page to another. Forms are also a great way to start the conversation of interactivity, as there can be very rich interaction with JavaScript, but that’s another lesson for another day. In more advanced cases (using server-side processing scripts), forms can feed data to databases.

Objectives

After reading this post, you will be able to:

Build basic text input elements in a form.
Recall the difference between GET and POST methods.

Remember, you still have access to the Mozilla or W3C tag references first provided in part 2 and the W3C CSS Styles Reference from part 4.

Review

We’ve learned a lot of elements so far. It’s a good idea to review all the ones we’ve covered so far.

<html>...</html>
<head>...</head>
<body>...</body>
<title>...</title>
...
...
 
<a>...</a>
<img>

HTML Form Element

The FORM element initializes an HTML form. If you’ve ever logged into a site using a login form, filled out a request to create a new account, or even shopped online, you’ve interacted with forms.

The primary uses of the FORM element are to collect user data and interact with the page, and that can be accomplished in many ways:

Text inputs (and textareas)
Other interactional inputs (checkboxes, radios, dates, etc.)
Drop-down selectors
Buttons

HTML5 has made forms much more robust than they were in the past. Let’s start with the FORM element itself.

The FORM element tells the browser where to send the data in the form and how to send it. The two attributes we’ll discuss today are:

action
method

The action attribute accepts a file processing script location. This location can be a URL or an absolute or relative file path. In the past, I’ve processed forms with PHP, but there are so many server-side programming and scripting languages you can use to process forms. Server-side scripting is beyond the scope of this lesson, though.

The method attribute tells the HTTP method to use to send the data to the script listed in action. There are two valid values for this:

GET: Sends the form data within the URL. If you’ve ever seen a URL that looks like:

https://example.com?var1=gobblygook&var2=flabbergasted

you’re looking at GET variables in action. The value after the question mark is called a query string. Within the query string, the GET variable is the value before each equal sign. So in this case, there are two GET variables: var1 and var2. Their respective values are what comes after the equal sign for each, so:

var1 = gobblygook
var2 = flabbergasted

These name/value pairs come directly from your inputs within your HTML form. We’ll cover that a little further down.
POST: Sends the form data “behind the scenes”, meaning the users won’t see any of the submitted form data, but it will still be available for processing. The same name/value pairs exist, but are invisible to the user. Usually, post is more secure because users cannot modify the data after the form has been submitted. Whereas with GET, a user can update the form data by just modifying the values in the URL.

Let’s actually initialize a form using the FORM element.

<html>
     <head>
          <title>Form Example</title>
     </head>

     <body>
          <form action="/processing-script.php" method="GET">

          </form>  
     </body>
</html>

Input elements

The most common type of form element is the INPUT element. This element has no end tag. There are many types of INPUT elements (designated by the type attribute). It is good practice to include other attributes to facilitate in processing as well.

type – tells the type of input (see types below)
name – tells the name in the name/value pair passed through the GET or POST method.
value – tells the default value of a form field

We’ll start with the basic text input.

<input type="text" name="firstname" value="Tina">

This gives you the following:

Go ahead, click in the field! Notice you can change the value.

Other form input types are:

<input type="radio" name="my-radio" value="1"> Radio Button

Radio Button

<input type="checkbox" name="option" value="1"> Check 1

Check 1 Check 2

<input type="password" name="my-pw" value="shenanigans">

<input type="file" name="file-upload">

<input type="range" name="age-range" value="6" min="1" max="30"> Age Range

Age Range

There are several other input types that appear to be regular text boxes, but validate (checks for data in a particular format) in a certain way.

telephone
number
date
email
url

To see a comprehensive list of HTML5 input types (including the awesome color picker), visit the W3C Input Types page.

Form Buttons

Once clicked, buttons often trigger an action with a form; either submitting the form, processing the form, or some custom action that could be defined by JavaScript functions.

There are two elements you can use to create a button within an HTML form; either the BUTTON element or the INPUT element. My preference is using the BUTTON element to set buttons apart from other form input types. Let’s look at both ways:

<button type="button" name="clickable">Click me!</button>
<input type="button" name="clickable" value="Click me!">

<button type="button" name="clickable">Click me!</button>
<input type="button" name="clickable" value="Click me!">

Both of these produce the same button. However, with the BUTTON element, you can place additional HTML elements to display on the button. You cannot do that when using the INPUT element.

There are a few button types, too:

button – places a button on the page that has no default action. This type is usually used to add a custom action with JavaScript (or another language).
reset – clears entered data from each element within the form.
submit – delivers the form input to the script defined in the FORM element’s action attribute for processing.

Visually, there is no difference in button types. The difference comes in once clicked.

<button type="button" name="clickable">Button</button>

<button type="reset" name="clickable">Reset</button>

<button type="submit" name="clickable">Submit</button>

Form Labels

The LABEL element adds a label for most form elements. The LABEL element takes one attribute, the for attribute. This attribute accepts a unique identifier assigned to any HTML element using the id attribute. The id attribute is very important in the world of JavaScript.

Labels are very helpful for accessibility reasons and to assist with clicking certain elements within the form (like checkboxes and text inputs). In the example below, click on the text next to the checkbox.

<input name="tos" value="1" type="checkbox" id="tos-check">
<label for="tos-check">Please agree to the <a href="tos.html">Terms of Service</a></label>

Please agree to the Terms of Service

For text fields, clicking on the label has the same effect as focusing on (clicking within) the text field.

<label for="fname">First name</label>
<input name="firstname" value="Tina" type="text" id="fname">

First name

Other Form Inputs

The TEXTAREA element is a multiline text input. It takes two additional attributes:

rows – defines the height of the textarea.
cols – defines the width of the textarea.

<label for="bio">Your bio:</label> 
<textarea name="bio" id="bio" rows="4" cols="20">Default text</textarea>

Your bio:

The SELECT element creates a drop-down menu with options. Each option is defined with the OPTION element.

The SELECT element takes two additional attributes:

multiple – set to either “true” or “false” and tells whether or not there can be multiple options selected simultaneously. Note, a value is optional. If no value is defined, the value is interpreted as “true”.
size – determines the number of options that are displayed for the SELECT element. The default is 1.

The OPTION element takes two additional attributes:

value – defines the reference value for each option, in the event it is selected.
selected – set to either “true” or “false” and tells whether or not the option is the default selected option. Note, a value is optional. If no value is defined, the value is interpreted as “true”.

<label for="terms_agree">Do you agree to the terms?</label><br>

<select name="agree" id="terms_agree">
     <option value="1">Yes</option>
     <option value="0" selected>No</option>
</select>

Do you agree to the terms?

<label for="firstnames">Please select the names you like</label><br>

<select name="firstnames" id="firstnames" multiple size="4">
     <option value="Abigail">Abigail</option>
     <option value="Brittany" selected>Brittany</option>
     <option value="Chloe" selected>Chloe</option>
     <option value="Deidre">Deidre</option>
     <option value="Emma">Emma</option>
</select>

Please select the names you like

Bringing It All Together

Use the bolded linked tags and elements below to navigate to the corresponding part where each element/attribute was covered.

<html>
	<head>
		<title>Form Example</title>
	</head>

	<body style="background-color: #DEDEDE; font-family: Arial;">
		<h2>Please complete the following form!</h2>
		<p>
			<img src="images/image.png" alt="Main image" title="Main image" style="width: 125px; height: 90.5px;">

		</p>
		<form action="/processing-script.php" method="GET">
			<p>
				<label for="fname">First name:</label><br>
				<input name="firstname" value="Tina" type="text" id="fname">
			</p>
			<p>
				<label for="lname">Last name:</label><br>
				<input name="lastname" value="Gates" type="text" id="lname">
			</p>
			<p>
				<label for="email">Email address:</label><br>
				<input name="email" value="name@domain.com" type="email" id="email">
			</p>
			<p>
				<label for="bio">Your bio:</label><br>
				<textarea name="bio" id="bio" rows="4" cols="20">All about me...</textarea>
			</p>
			<p>
				<label for="firstnames">Please select the names you like:</label><br>
				<select name="firstnames" id="firstnames" multiple size="4">
					<option value="Abigail">Abigail</option>
					<option value="Brittany" selected>Brittany</option>
					<option value="Chloe" selected>Chloe</option>
					<option value="Deidre">Deidre</option>
					<option value="Emma">Emma</option>
				</select>
			</p>
			<p>
				<input name="tos" value="1" type="checkbox" id="tos-check">
				<label for="tos-check">Please agree to the <a href="tos.html">Terms of Service</a></label>
			</p>
			<p>
				<button type="submit" name="clickable">Submit Form</button>
			</p>
		</form>
	</body>
</html>

Look at the rich HTML page you can create now! You should be so proud of yourself!

If this series has helped you, don’t forget to tell others!

Check Your Understanding (1 Activity)

Relevant Vocabulary

Term	Definition
Focus	When a form field is clicked on.
Query string	The set of name/value pairs that are derived from form inputs when the form is processed using the GET method.