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

  1. What are the advantages of using a <label> tag rather than just using text in an HTML document?
  2. What tag is used to ask for input from a user?
  3. What are the different types attributes for the <input> tag? Which of these are newly defined in HTML5?
  4. Explain a radio button group, and how it works.
  5. What are the tags and attributes in the example form?
  6. Run the final web page in at least 2 browsers, and document as many differences between how the form is rendered in each browser.

Licenses and Attributions


Speak Your Mind