Related Books
Books / Introduction to HTML, CSS and JavaScript / Chapter 4
Creating Forms in HTML
The next part of this chapter will show how to implement form elements in HTML. Form elements are things like labels, checkboxes, radio buttons, textboxes, buttons and other elements often use to interact with and gather information from users. Form elements are a major method of creating user interaction with a web page.
All form elements contain a name or id which can be accessed from JavaScript. All form elements have a set of attributes (or properties) that can later be used in JavaScript and CSS to manipulate them.
This section will only implement the form elements. To implement interactivity in a form normally requires JavaScript and will be covered in a subsequent chapter.
The <label> tag
The <label> is used to put a label on the page and associate it with
another HTML element. Since the <label> tag simply puts text on the
screen, why use a label rather than just putting the text into the HTML?
For example, the following two HTML examples will appear the same to the
user:
<label for="title">Title: </label>
<input type="text" size="20" />
<input type="text" size="20" />
Note that when using code fragments, the entire html file is not included. The <html>, <head>, <title>, and <body> tags are omitted. This is to save space and to emphasize the concept being introduced. This is no way sanctions or recommends ever dropping these tags in a html file.
These two examples will appear the same on a web page, with the string
“Title:” followed by a textbox. There are two advantages to using the
label tag. The first is that when using a <label> tag, the label
itself can be given an id, and that id can be used later in JavaScript
to manipulate and modify the label.
The second advantage of a <label> is it can be used to reference an
<input> value by setting the for attribute to the id of the
field it corresponds to. When the for attribute is set in a label,
clicking on the label places the cursor in the corresponding field.
The <input> tag
The <input> tag tells the HTML interpreter program that the data to
follow defines a user interaction that can be queried later for content.
The type of user interaction will be specified in the type attribute. The type attribute could be:
- type=”button”
- type=”checkbox”
- type=”date”
- type=”radio”
- type=”password”
- type=”file”
- And more!
This section will only document a few input types. A complete list of HTML input types can be found on the MDN Web Docs. The ones that are covered in this chapter are the most common ones. The form implemented is one for adding maps to an application and will be used as an example through much of the text.
The input types to be looked at in the following sections are text, checkbox, radio button, number, date, and button.
HTML Input - Textbox <input type = "text">
The first type of input we will look at is type="text", or the
textbox. This is the default type for an input tag. If you expect some
other type of field, and get a textbox, check and see if something is
misspelled in the type of the input tag.
A textbox is an input box into which a user can type text, as was seen previously in Programs 4 and 5. The line:
<input type="text" size="20" />
created a text box that contained 20 characters, and with an attribute id of name. Note that the id is a unique identifier for a field; it must be unique on the page. In a later example the name attribute will be introduced. A field can have a name, id, or both, and the field can be referenced by its name or id. A name is different from an id in that a name does not have to be unique on a page; many different elements can have the same name. In fact, in the radio button example, we will rely on the fact that the elements all have the same name. An id must be unique on a Web page.
While HTML is not case sensitive, the strings used for the id and name are case sensitive. Consider the following example.
<input type="text" size="20" />
<input type="text" size="20" />
In this case, two textboxes with different ids, one title and the
other Title, are created.
The identifiers for id and name fields in this text will use
standard camel casing for ids and names, with the first letter lower
case, and lower-case letters in the rest of the identifier except for
the first letter of new words (e.g. myTitle)
There are many attributes other than id and name that can be assigned to
an input field, and the overview URL of the <input> tag above should
be referenced to find them. For example, a Boolean value of readonly can
be set on a text box to disallow changes via user input. The string
contained in the text box is stored in a field named value and can be
set or change in a JavaScript program, but the user cannot enter data
into this field.
<input type="text" size="20" readonly value="My Map" />
HTML Input - Checkbox <input type ="checkbox">
A checkbox is a box which allows a user to choose a single, discrete
option. A checkbox is normally shown on a web page as a square box. To
implement a checkbox, use an input tag and set the type attribute to
checkbox. Normally the input tag will also have an id attribute, and a
Boolean attribute checked can be added to indicate if the box is
checked by default or not. Two formats for a check box, one checked and
the other not, are shown below.
Note the use of the <br/> (break) tag in this program. The break tag
is used to move the output to the next line.
<label for="resize">Allow map to be resized: </label>
<input type="checkbox" />
<br/>
<label for="recenter">Allow map to be recentered:" </label>
<input type="checkbox" checked />
Program 9 – Checkbox Example in HTML
HTML Input - RadioButton <input type = "radiobutton">
A radio button is similar to a checkbox in that it is a Boolean
selection. It is different from a checkbox in that radio buttons form a
group, and only one item in any group of radio buttons can be selected.
For example, consider two sets of options in Program 10. The first set
of options determines the type of map to display: an XYZ Map or a
Stamen Map. The second set of options determines the size of the map
(600x480, 1024x768, or 1280x800). As shown in the following example,
these form two groups by having the name common between the buttons in
the group. In the first case, the name for both of the buttons is
mapType, and the choice is between the XYZ Map or the Stamen Map.
In the second case the screenSize is the name common between the
buttons, and the choices are 600x480, 1024x768 or 1280x800.
Radio buttons are implemented in HTML by setting the input type attribute to radio. Radio buttons are normally round and are then grouped to show the mutually exclusive options. In HTML, the grouping of options is accomplished using name attribute. All radio buttons with the same name are in one group. The following code implements two groups of radio buttons. Note that even though it has no purpose right now, the value attributes are being set for these radio buttons. The values will be used in processing these radio buttons later in JavaScript.
<p>
Type of Map<br>
<input type="radio" name="maptype" value="XYZ Map"/>
<label for="XYZMap">XYZ map </label>
<br/>
<input type="radio" name="maptype" checked />
<label for="StamenMap">Stamen Map </label>
</p>
<p>
Screen Size<br>
<input type="radio" name="screenSize" checked value="600x480"/>
<label for="XYZMap">600x480 </label>
<br/>
<input type="radio" name="screenSize" value="1024x768"/>
<label for="XYZMap">1024x768 </label>
<br/>
<input type="radio" name="screenSize" value="1280x800"/>
<label for="XYZMap">1280x800 </label>
</p>
Program 10 – Radio Button Example in HTML
HTML Input - Numeric Fields - <input type = "number">
The input type number limits the input for the field to be numeric.
The value can be a whole number or a decimal number, but only the
numbers 0-9 and the decimal point can be entered (comma is not allowed).
If the browser does not support a number type, the type defaults to a
text, and a standard textbox is used.
The following example implements number fields for the latitude and
longitude for the center of a map. Note that the entry is to be a
fixed point (decimal) value.
<p>
Center of Map<br>
<label for="lat">Latitude </label>
<input type="number" />
<label for="long">Latitude </label>
<input type="number" />
</p>
Program 11 – Number Input Example in HTML
The number field can also be used to represent a range of value, as in the following example. Be careful however as a user can type in a number outside of this range. And while this statement implies that the value is an integer value, the user can enter decimal values.
<p>
<label id=label3" for="age">Age</label>
<input type="number" min="0" max="115" />
</p>
Program 12 – Integer Number Input Example in HTML
HTML Input - Date Fields - <input type = "date">
The last form field covered is a date. The reason the date type is covered is to make a point that the browsers can be completely inconsistent in how they implement input types, particularly the input types that were implemented in HTML5, such as number and date. The format of entering the date, the return value from the date, whether or not a date picker is displayed, and the look and feel of the date picker if it is displayed are all browser dependent. The Quick Check questions at the end of this section will ask you to experiment with this field.
Only the most basic format of the date input type is shown here. It is suggested that the reader look at this date field across sever browsers to see how it is different in each one.
<p>
<label for="creationDate">Creation Date </label>
<input type="date" />
</p>
Program 13 – Date input Example in HTML
HTML Input - Buttons - <input type = "button">
An input type of button creates a button. Buttons are normally placed
on a form to trigger processing of the form when they are clicked. How
the processing of the form is accomplished will be covered later in the
chapter on JavaScript. For now, only the placing of the button on the
form will be shown.
The button will have an id attributed so that actions can be assigned to
the button in JavaScript. The text that is displayed in the button will
be contained in the value attribute. A normal definition of a button
would be as follows:
<input type="button" id="processForm" value="Process Form" />
Program 14 – Button Example in HTML
Final Example - Complete HTML Page with Input Elements
The following example combines all of the elements seen in this chapter to create a single, working form. This form does not yet have any functionality, which will be introduced in the next chapter on JavaScript. The form is also not styled, which will be covered in the chapter on Cascading Style Sheets (CSS).
<html>
<head>
<title>Map Example Input Screen</title>
</head>
<body>
<h1>Map Example Input Screen</h1>
<p>
<label id="l1" for="title">Title</label>
<input type="text" id="title" size="20">
</p>
<p>
Map Options<br>
<label id="l2" for="resize">Allow map to be resized:
</label>
<input type="checkbox" id="resize"/>
<br/>
<label id="l3" for="recenter">
Allow map to be recentered:
</label>
<input type="checkbox" id="recenter" checked />
</p>
<p>
Type of Map<br>
<input type="radio" name="maptype" id="XYZMap"
value="XYZ Map"/>
<label id="label1" for="XYZMap">XYZ map </label>
<br/>
<input type="radio" name="maptype" id="StamemMap"
value="StamemMap" checked />
<label id="label2" for="StamenMap">Stamen Map
</label>
</p>
<p>
Screen Size<br>
<input type="radio" name="screenSize" checked
id="600x480" value="600x480"/>
<label id="label3" for="XYZMap">600x480 </label>
<br/>
<input type="radio" name="screenSize" id="1024x768"
value="1024x768"/>
<label id="label4" for="XYZMap">1024x768 </label>
<br/>
<input type="radio" name="screenSize" id="1280x800"
value="1280x800"/>
<label id="label5" for="XYZMap">1280x800 </label>
</p>
<p>
Center of Map<br>
<label id="label1" for="lat">Latitude </label>
<input type="number" id="lat"/>
<label id="label2" for="long">Latitude </label>
<input type="number" id="long"/>
</p>
<p>
<label id="label1" for="creationDate">Creation Date
</label>
<input type="date" id="creationDate"/>
</p>
<input type="button" value="Process Form" />
</body>
</html>
Quick Check - Test your Knowledge
- What are the advantages of using a <label> tag rather than just using text in an HTML document?
- What tag is used to ask for input from a user?
- What are the different types attributes for the <input> tag? Which of these are newly defined in HTML5?
- Explain a radio button group, and how it works.
- What are the tags and attributes in the example form?
- Run the final web page in at least 2 browsers, and document as many differences between how the form is rendered in each browser.