Skip to main content
Engineering LibreTexts

2.4: Creating Forms in HTML

  • Page ID
    27534
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    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.

    2.4.1 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:9

    Program 4 – Using a label tag
    
    <label  for="title">Title: </label>
    <input type="text"  size="20" />
    
    Program 5 – Using no label tag
    
    Title:
    <input type="text"  size="20" /> 
    

    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.

    Complete documentation for the <label> tag can be found at: https://www.w3schools.com/tags/tag_label.asp.

    2.4.2 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 different types of input types can be found at https://www.w3schools.com/tags/tag_input.asp.

    There is one word of caution about many of the types that can be used as inputs. All of the types listed at the W3 Schools web site are not implemented in all browsers, and many of the types are implemented differently in different browsers. Using some of these types could (and likely will) lead to a very different user experience for a Chrome user and a Firefox or Safari user. The page designer should be aware of these differences, and plan for and test carefully when implementing a web page.

    This section will only document a few input types. The ones that are selected are largely the ones which show how to implement interactions that are used in this textbook. 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.

    2.4.3 <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:

    Program 6 – Input text box
    
    <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.

    Program 7 – Text boxes different by case of name
    
    <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.

    Program 8 = readonly attribute
    
    <input type="text"  size="20" readonly value="My Map" />
    

    2.4.4 <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.

    Program 9 – Checkbox Example
    
    <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 />
    

    2.4.5 <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.

    Program 10 – Radio Button Example
    
    

    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>

    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>

    2.4.6 <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.

    Program 11 – Number Input Example
    
    

    Center of Map<br> <label for="lat">Latitude </label> <input type="number" /> <label for="long">Latitude </label> <input type="number" /> </p>

    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.

    Program 12 – Integer Number Input Example
    
    

    <label id=label3" for="age">Age</label> <input type="number" min="0" max="115" /> </p>

    2.4.7 <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.

    Program 13 – Date input Example
    
    

    <label for="creationDate">Creation Date </label> <input type="date" /> </p>

    2.4.8 <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:

    Program 14 – Button Example
    
    <input type="button" id=”processForm” value="Process Form" />    
    

    2.4.9 Final Example

    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>
                

    <label for="title">Title</label> <input type="text" size="20"> </p>

    Map Options<br> <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 /> </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" value="StamemMap" checked /> <label for="StamenMap">Stamen Map </label> </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>

    Center of Map<br> <label for="lat">Latitude </label> <input type="number" /> <label for="long">Latitude </label> <input type="number" /> </p>

    <label for="creationDate">Creation Date </label> <input type="date" /> </p> <input type="button" value="Process Form" /> </body> </html>

    2.4.10 Quick Check

    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.

    9 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.


    This page titled 2.4: Creating Forms in HTML is shared under a CC BY license and was authored, remixed, and/or curated by Charles W. Kann III.

    • Was this article helpful?