HTML. Unit 10. Advanced forms.

How to structure a web form

With the basics out of the way, we’ll now look in more detail at the elements used to provide structure and meaning to the different parts of a form. The flexibility of forms makes them one of the most complex structures in HTML; you can build any kind of basic form using dedicated form elements and attributes. Using correct structure when building an HTML form will help you to ensure that the form is both usable and accessible.

The <form> element

As explained previously, the <form> element formally defines a form and attributes that determine the form’s behaviour. Each time you want to create an HTML form, you must start it by using this element, nesting all the contents inside. Now let’s move forward and cover the structural elements you’ll find nested in a form.

The <fieldset> and <legend> elements

The <fieldset> element is a convenient way to create groups of widgets that share the same purpose, for styling and semantic purposes. You can label a <fieldset> by including a <legend> element just below the opening <fieldset> tag. The text content of the <legend> formally describes the purpose of the <fieldset> it is included inside.

For maximum usability/accessibility, you are advised to surround each list of related items in a <fieldset>, with a <legend> providing an overall description of the list.  Each individual pair of <label>/<input> elements should be contained in its own list item (or similar). The associated <label> is generally placed immediately after the radio button or checkbox, with the instructions for the group of radio button or checkboxes generally being the content of the <legend>. See the examples in the previous unit for structural examples.

Many assistive technologies will use the <legend> element as if it is a part of the label of each control inside the corresponding <fieldset> element. For example, some screen readers such as Jaws and NVDA will speak the legend’s content before speaking the label of each control.

Here is a little example:

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <label><input type="radio" name="size" value="small" />Small</label>
    </p>
    <p>
      <label><input type="radio" name="size" value="medium" />Medium</label>
    </p>
    <p>
      <label><input type="radio" name="size" value="large" />Large</label>
    </p>
  </fieldset>
</form>
Fruit juice size

When reading the above form, a screen reader will speak “Fruit juice size small” for the first widget, “Fruit juice size medium” for the second, and “Fruit juice size large” for the third.

The use case in this example is one of the most important. Each time you have a set of radio buttons, you should nest them inside a <fieldset> element. There are other use cases, and in general the <fieldset> element can also be used to section a form. Ideally, long forms should be spread across multiple pages, but if a form is getting long and must be on a single page, putting the different related sections inside different fieldsets improves usability.

Proposed exercise: Drink and hamburger

Using the code of the previous example, create a web page to choose the size of both a drink and a hamburger, each one inside a different <fieldset> with the corresponding <legend>. Also, as done before, the user should be able to choose among three different sizes: small, medium and large:

Drink

Hamburger

A form with sections

Beyond the structures specific to web forms, it’s good to remember that form markup is just HTML. This means that you can use all the power of HTML to structure a web form. As you can see in the examples, it’s common practice to wrap a label and its widget with a <p> element within. Lists are also recommended for structuring multiple checkboxes or radio buttons.

In addition to the <fieldset> element, it’s also common practice to use HTML titles (e.g. <h1>, <h2>) and sectioning (e.g. <section>) to structure complex forms. Above all, it is up to you to find a comfortable coding style that results in accessible, usable forms. Each separate section of functionality should be contained in a separate <section> element, with <fieldset> elements to contain radio buttons.

Let’s put these ideas into practice and build a slightly more involved form — a payment form. This form will contain more control types than the previous example. Read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.

  1. First, we will create the form by adding the outer <form> element:
<form>
    ...
</form>
  1. Inside the <form> tags, we will add a heading and paragraph to inform users how required fields are marked:
<form>
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong>*</strong>.</p>
  ...
</form>
  1. We’ll also add a simple <button> of type submit, at the bottom of the form, for submitting the form data:
<form>
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong>*</strong>.</p>
  ...
  <p><button type="submit">Validate the payment</button></p>
</form>
  1. Next we’ll add a larger section of code into the form, below our previous entry. Here you’ll see that we are wrapping the contact information fields inside a distinct <section> element. Moreover, we have a set of three radio buttons, each of which we are putting in a new line. We also have two standard text <input> and their associated <label> elements, each contained inside a <p>, and a password input for entering a password:
<form>
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong>*</strong>.</p>

  <section><fieldset>
    <legend><h2>Contact information</h2></legend>

    <fieldset>
      <legend>Title</legend>
      <label><input type="radio" name="title" value="mr" />Mr</label><br />
      <label><input type="radio" name="title" value="mrs" />Mrs</label><br />
      <label><input type="radio" name="title" value="miss" />Miss</label><br />
    </fieldset>

    <p><label>Name: <input type="text" name="name" required /> *</label></p>
    <p><label>E-mail: <input type="email" name="email" required /> *</label></p>
    <p><label>Password: <input type="password" name="password" required /> *</label></p>
  </fieldset></section>

  ...

  <p><button type="submit">Validate the payment</button></p>
</form>
  1. The second <section> of our form is the payment information. We have three distinct controls along with their labels, each contained inside a <p>. The first is a drop-down menu (<select>) for selecting credit card type. The second is an <input> element of type tel, for entering a credit card number; while we could have used the number type, we don’t want the number’s spinner UI. The last one is an <input> element of type date, for entering the expiration date of the card; this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers.
<form>
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong>*</strong>.</p>

  <section><fieldset>
    <legend><h2>Contact information</h2></legend>
    <fieldset>
      <legend>Title</legend>
      <label><input type="radio" name="title" value="mr" />Mr</label><br />
      <label><input type="radio" name="title" value="mrs" />Mrs</label><br />
      <label><input type="radio" name="title" value="miss" />Miss</label> <br />
    </fieldset>
    <p><label>Name: <input type="text" name="name" required /> *</label></p>
    <p><label>E-mail: <input type="email" name="email" required /> *</label></p>
    <p><label>Password: <input type="password" name="password" required /> *</label></p>
  </fieldset></section>

  <section><fieldset>
    <legend><h2>Payment information</h2></legend>

    <p><label>Card type:
      <select name="card_type">
        <option value="visa">Visa</option>
        <option value="mc">Mastercard</option>
        <option value="amex">American Express</option>
      </select>
    </label></p>

    <p><label>Card number: <input type="tel" name="card_number" required /> *
    </label></p>

    <p><label>Expiration date: <input type="date" name="expiration" required /> *
    </label></p>
  </fieldset></section>

  <p><button type="submit">Validate the payment</button></p>
</form>

Proposed exercise: Payment form

Using the code of the example above, create a more sophisticated payment form. Inside the “Contact information” section, you have to add a group of radio buttons so that the user can select its status (either “Student”, “Teacher”, or “Other”), and a new text field to enter the phone number. And inside the “Payment information” section you have to add a new selection box so that the user can select the preferred payment type (either “Credit card” or “Paypal”) and a new email field to enter the Paypal account:

PAYMENT FORM (Required fields are followed by *)

Contact information
Status


Title






Payment information






A real example: search engine forms

Searching for text

Let’s now create a simple form which will provide all necessary data (a simple text) to be passed to some of the most known search engines:

<form action="https://google.com/search" method="GET">
  <label>Google: <input type="text" name="q" required /></label>
  <button type="submit">Search</button>
</form>
...
<form action="https://duckduckgo.com/" method="GET">
  <label>DuckDuckGo: <input type="text" name="q" required /></label>
  <button type="submit">Search</button>
</form>
...
<form action="https://bing.com/search" method="GET">
  <label>Bing: <input type="text" name="q" required /></label>
  <button type="submit">Search</button>
</form>

You will notice that when you press the submit button, the query (q parameter) is included in the url, and this way the search engine will know what to search. For example, if we are searching the word “dogs” on Google, the resulting url when submitting the form will be this one: https://www.google.es/search?q=dog.

Proposed exercise: Text search

Using the example of the form above to search information on Google, DuckDuckGo and Bing, develop a web page similar to the one below to search information on several search engines (at least five).

The only difference from one form to another is the value of the action attribute (“https://google.com/search”, “https://duckduckgo.com/”, “https://bing.com/search”, “https://www.ecosia.org/search”, “https://search.givewater.com/serp”, etc.). This address can be guessed by having a look at the url when you are using each particular search engine.

TEXT SEARCH

Searching for images

Now we will change the code a little bit so that the results provided by the search engines are images instead of text. In some cases we only need to change the action attribute, but sometimes we have to add some additional fields:

<form action="https://google.com/search" method="GET">
  <label>Gooogle: <input type="text" name="q" required /></label>
  <input type="hidden" name="tbm" value="isch" />
  <button type="submit">Search</button>
</form>
...
<form action="https://duckduckgo.com/" method="GET">
  <label>DuckDuckGo: <input type="text" name="q" required /></label>
  <input type="hidden" name="iax" value="images" />
  <input type="hidden" name="ia" value="images" />
  <button type="submit">Search</button>
</form>
...
<form action="https://search.givewater.com/serp" method="GET">
  <label>giveWater: <input type="text" name="q" required /></label>
  <input type="hidden" name="qc" value="images" />
  <button type="submit">Search</button>
</form>

You will notice that when you press the submit button, those hidden fields (which are not entered by the user) are included automatically in the url so that the search engine knows that has to show images instead of text. This way, in this example we are passing two parameters: q (the search string) and tbm (to search for images). For example, if we are searching for images about dogs on Google, the resulting url when submitting the form will be this one: https://www.google.es/search?q=dog&tbm=isch.

Proposed exercise: Image search

Using the code of the previous exercise, develop a new web page to search for images on several search engines (at least five).

To search for images using Bing and Ecosia, you only have to use the right value for the action attribute (“https://bing.com/images/search”, “https://www.ecosia.org/images”). You only have to use the hidden fields for Google (tbm), DuckDuckGo (iax, ia) and giveWater (qc), as done in the example above. Both the addresses and the hidden fields can be guessed by having a look at the url when you are using each particular search engine.

IMAGE SEARCH

Choosing between text and image search

Now let’s concentrate on Google’s search engine and let’s go one step forward to add a checkbox to give the user the option to choose between searching for text or images:

<form action="https://google.com/search">
  <label>Google: <input type="text" name="q" required /></label>
  <label>Search for images <input type="checkbox" name="tbm" value="isch" /></label>
  <button>Search</button>
</form>

Proposed exercise: Text or images

Develop a web page to search either text or images on Google and giveWater search engines. You have to provide the user with a checkbox so that can easily change from one type to another:

TEXT SEARCH

Filtering the results

Finally let’s concentrate again on Google’s search engine to add several controls so that the user can filter the results when searching for images. We will also add a reset button to set the default values:

<form action="https://google.com/search" method="GET">
  <p>Search: <input type="text" name="q" class="big" required /></p>

  <fieldset>
    <legend>Size</legend>
    <select name="tbs"> 
      <option selected disabled>Any size</option>
      <option value="isz:l">Large</option>
      <option value="isz:m">Medium</option>
      <option value="isz:i">Icon</option>
    </select>
  </fieldset>
  <fieldset>
    <legend>Color</legend>        
    <select name="tbs"> 
      <option selected disabled>Any color</option>
      <option value="ic:color">Color</option>
      <option value="ic:gray">Black and white</option>
      <option value="ic:trans">Transparent</option>
   </select>
  </fieldset> 
  <fieldset>       
    <legend>Type</legend>        
    <select name="tbs"> 
      <option selected disabled>Any type</option>
      <option value="itp:clipart">Clip art</option>
      <option value="itp:lineart">Line drawing</option>
      <option value="itp:animated">GIF</option>
    </select>
  </fieldset>  
  <fieldset>     
    <legend>Date</legend>        
    <select name="tbs"> 
      <option selected disabled>Any date</option>
      <option value="qdr:d">Past 24 hours</option>
      <option value="qdr:w">Past week</option>
    </select>
  </fieldset> 
  <fieldset>       
    <legend>License</legend>        
    <select name="tbs"> 
      <option selected disabled>Any license</option>
      <option value="il:cl">Creative commons</option>
      <option value="il:ol">Commercial and other</option>
    </select>
  </fieldset>

  <input type="hidden" name="tbm" value="isch" />

  <button type="reset">Reset</button>
  <button type="submit">Search</button>
</form>

As you will see, we have added many options to set different values for a parameter called “tbs” (we have guessed this parameter and all its possible values by looking at the url when searching for any information on Google). This way, in this example we are passing three parameters: q (the search string), tbm (to search for images) and tbs (to filter the results). For example, if we are searching for GIF images about dogs, the resulting url when submitting the form will be this one: https://www.google.es/search?q=dog&tbm=isch&tbs=itp:animated.

Also you will notice that inside each <select> element we are using a default option: <option selected disabled>...</option> so that by default, none of the available options are selected and the results are not filtered.

Proposed exercise: Filtering images with dropdown boxes

Using the code of the previous example, develop a web page to search for images on Google and filter the results using several dropdown boxes:

Search:

Size
Color
Type
Date
License

Proposed exercise: Filtering images with radio buttons

Create a new web page to search for images on Google and filter the results using radio buttons:

Search:

Size Large
Medium
Icon
Color Color
Black and white
Transparent
Type Clip art
Line drawing
GIF
Date Past 24 hours
Past week
License Creative commons
Commercial and other