Creating Forms in HTML
In this chapter
- Final Example - Complete HTML Page with Input Elements
- Quick Check - Test your Knowledge
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.
<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
<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
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.
<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:
- 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
title and the
Title, are created.
The identifiers for
name fields in this text will use
standard camel casing for
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.
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
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
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
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
In the second case the
screenSize is the name common between the
buttons, and the choices are
<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
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
form will be shown.
The button will have an id attributed so that actions can be assigned to
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
<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.