Using Form Structure Tags on Your HTML5 Web Page - dummies

Using Form Structure Tags on Your HTML5 Web Page

By Andy Harris

From the beginning, web pages have had the ability to gather data from users. HTML5 has a standard but quite useful set of form elements you can use to get input. These form elements follow many of the same rules as other tags.

This figure shows a form containing all the main HTML form elements you may encounter:


The tags you use to manage the general structure of the form include:

  • <form>: This tag contains the actual form; it encloses all the other form elements. The <form> tag should also include the action = attribute. This indicates that you do not plan to call a server-side script when the form is submitted.

  • <fieldset>: This special tag allows you to group a series of input elements together. It isn’t required, but it can make complex forms easier to navigate. By default, a fieldset has a single border around it, but you can change this with CSS.

  • <legend>: You can add a legend to a fieldset to act as a label for the entire fieldset.

  • <label>: This marks text as the label associated with a particular input element. You can use the optional for attribute to specify which input element the label is associated with. Label tags are normally used to make CSS styling of forms easier to manage.

The code for a page using all the structure tags shown in the figure runs as follows:

<html lang = "en">
    <meta charset = "UTF-8" />
    <h1>Form Demo</h1>
        <legend>Text input</legend>
          <label>Text box</label>
          <input type = "text"
                 id = "myText"
                 value = "text here" />
          <input type = "password"
                 id = "myPwd"
                 value = "secret" />
          <label>Text Area</label>
          <textarea id = "myTextArea"
                rows = "3"
                cols = "80">Your text here</textarea>
        <legend>Selecting elements</legend>
          <label>Select List</label>
          <select id = "myList">
            <option value = "1">one</option>
            <option value = "2">two</option>
            <option value = "3">three</option>
            <option value = "4">four</option>
          <label>Check boxes</label>
           <input type = "checkbox"
                 id = "chkEggs"
                 value = "greenEggs" />
           <label for = "chkEggs">Green Eggs</label>
          <input type = "checkbox"
                 id = "chkHam"
                 value = "ham" />
          <label for = "chkHam">Ham</label>
          <label>Radio buttons</label>            
          <input type = "radio"
                 name = "radSize"
                 id = "sizeSmall"
                 value = "small"
                 checked = "checked" />
          <label for = "sizeSmall">small</label>
          <input type = "radio"
                 name = "radSize"
                 id = "sizeMed"
                 value = "medium" />
          <label for = "sizeMed">medium</label>
          <input type = "radio"
                 name = "radSize"
                 id = "sizeLarge"
                 value = "large" />
          <label for = "sizeLarge">large</label>
          <button type = "button">
            standard button
          <input type = "button"
                 value = "input button" />
          <input type = "reset" />
          <input type = "submit" />

The fieldset, legend, and label tags are not required, but they help you organize the page so it’s easier to lay out with CSS. Proper use of these tags and CSS often makes your forms much easier to work with than the older table-based hacks.