New HTML5 tags/form elements

New HTML5 tags/form elements

In this chapter, we will look at the new HTML5 elements related to forms.

HTML4 HTML5
  • <form>
  • <fieldset>
  • <legend>
  • <textarea>
  • <label>
  • <select>
  • <option>
  • <optgroup>
  • <input>
  • <button>
  • <datalist>
  • <output>
  • <meter>
  • <progress>
  • <keygen> *
* Not really useful for most developers.

In the following sections, we will specifically look at the <datalist>, <output>, <meter>and <progress> elements.

 

The <output> element

The output element represents the result of a computation or user action. You can see it as a “specialized <div> or <span>” for displaying interactive results.

TYPICAL USE / INTERACTIVE EXAMPLES

Do not hesitate to play with the source code of these examples online at JS Bin.

Example 1

  1. <form oninput=o.value=a.value*b.value>
  2.      <input type=“number” name=“a” id=“a” value=“2”> x
  3.      <input type=“number” name=“b” id=“b” value=“3”> =
  4.      <output for=“a b” name=“o”>6</output>
  5. </form>

The oninput event handler directly uses the <output> element using the value of its name attribute.

Result (do change the input field values):

Explanation about the attributes specific to the <output> element:
    • for: a space-separated list containing the elements’ ids whose values went into the calculation.
    • name: the name of the element.
    • form:  associates the <output> element with its form owner. The value must be the id of a form in the same document. This allows you to place an <output> element outside of the <form> with which it is associated.

Source code:

  1. <form >
  2.    <input name=“a” value=“50” type=“range”
  3.           oninput=x.value = a.valueAsNumber + b.valueAsNumber;
  4.           y.value = this.value;/>
  5.    <output id=“y”>50</output> +
  6.    <input name=“b” value=“50” type=“number” /> =
  7.    <output name=“x” id=“x” for=“a b”></output>
  8. </form>

HTML5 has introduced new input field properties: valueAsNumber and valueAsDate. The last example is similar to the previous one except that we use an addition instead of a multiplication.

As input field values are considered as strings by JavaScript, using x.value = a.value + b.value would result in a string concatenation instead of an addition. That’s why we use the valueAsNumber property.

This is why we used the valueAsNumber property also introduced by HTML5 for some input fields such as <input type=”range”> and <input type=”number”>, we also encountered the valueAsDate properties when we studied <input type=”date”>.

 

The <meter> element

The <meter> element displays colored bars to represent numeric values.

It can be useful to display a colored gauge to show disk usage, to highlight the relevance of a query result, or the fraction of a voting population that favours a particular candidate, etc. This element is often used with the <input type=”range”> field as an instant feedback indicator.

picture of a meter example

The <meter> element should not be used to indicate progress. You should instead use a <progress> element.

This element is supported by all major browsers, on desktop and mobile devices, except Internet Explorer (Microsoft Edge supports it) and IOS/Safari, as in November 2015.

TYPICAL USE

  1. Storage space used: <meter value=75 min=0 low=20 high=80 max=100optimum=50></meter>

The <meter> element uses the easy-to-understand value, min, max, low, high and optimumattributes. The optimum attribute, along with min, low, high and max attributes will affect the color of the bar, and of course the constraint min < low < high < max should be respected.

INTERACTIVE EXAMPLE

Try the next example online at JS Bin  or just play with it in your browser by dragging the slider below:

<meter value=75 min=0 low=20 high=80 max=100 optimum=19></meter>

 

  1. <p>Grades: <meter id=“meter2” value=“75”min=“0” low=“20” high=“80” max=“100”></meter>
  2. <input min=“0” max=“100” value=“75” id=“meter2range”
  3.        oninput=effect(‘meter2’, ‘meter2range’) type=“range”>
  4. <output id=“meter2val” for=”meter2range”></output></p>
  5. function effect(meter, meterrange) {
  6.      var currVal = document.getElementById(meterrange).value;
  7.      document.getElementById(meter).value = currVal;
  8.      document.getElementById(meter+ “val”).innerHTML = currVal;
  9. }

 

THE COLOR OF THE GAUGE CHANGES DEPENDING ON THE ATTRIBUTE’S VALUES

Note: thanks to jyorme, a student of this course, for helping improving this part of the course!

The optimum attribute indicates the optimal numeric value and gives an indication where along the range is considered preferable. Just think of the <meter> ranges as follows:

    • Range 1: between min and low
    • Range 2: between low and high
    • Range 3: between high and max

… and depending on the value you set to optimum attribute, one of the ranges above becomes the “good (optimum)” range.

So in the previous example, with the value of the optimum attribute set to 19, a number between min and low (not inclusive), the Range 1 (between min=0 and low=20) becomes the “good (optimum)” range (displayed in green), the Range 3 (between high=80 and max=100) becomes the “bad” (displayed in red color) range, and the Range 2, in the middle, will be displayed in yellow (not optimum, not bad).

So, a <meter> element used for displaying blood pressure might be a good candidate for setting the optimum value to “Range 2”, and a <meter> element used for displaying memory usage might be a good candidate for setting the optimum value to “Range 1”, meaning that a low memory usage is “good”.

EXTERNAL RESOURCES

The <progress> element

The <progress> element is similar to <meter> but it is used for progress bars (i.e., the percentage of a file being uploaded, etc.):

  1. <progress id=pr value=50 min=0 max=100>

Gives:

The browser calculates the percentage corresponding to the value, minand max attributes and adjusts the length of the progress bar accordingly.

If no value attribute is set, the progress bar will display an “indeterminate look”, that may vary among different browser implementations. Chrome, Opera, Safari and Firefox display indeterminate progress as an animated stripe. In IE 11, it’s styled as animated dots.

This element is supported by all major browsers, on desktop and mobile devices.

TYPICAL USE

Here is an online example at JS Bin, or try it below in your browser:

This example uses some JavaScript to simulate a download progress by changing in real time the value attribute.The progress below is defined like this:

<progress id=pr value=100 min=0 max=1000>

Source code:

  1. Download progress: <progress id=pr value=100 min=0 max=1000></progress>
  2.    var i=0;
  3.    setInterval(function () {
  4.        i = (i+1) %1000;
  5.        document.getElementById(‘pr’).value = i;
  6.    },1);

The <datalist> element

The <datalist> form element is useful for linking a list of choices to an input element.

We have already seen this element in action with different <input> elements, such as <input type=”color”>, <input type=”date”>, or <input type=”range”>.

It is often “linked” to input fields either for restricting the value set that can be proposed  (i.e., restricted set of colors or possible dates, or for displaying slider ticks, as shown above), but it may also be used in a more general way, for providing client-side auto-completion without the need to use JavaScript.

It works with the new list attribute of input fields introduced by HTML5. The id of the<datalist> must match the value of the list attribute in the input field. A datalist can be shared by several input fields. It suffices that their list attribute matches the id of the datalist element.

The input field is related to the datalist that will propose auto-completion based on <datalist>values.

TYPICAL USE FOR AUTO-COMPLETION

Here is an online example at JS Bin, or try it here in your browser (type the name of your favorite browser):

Source code of this example:

  1. <form action=“demo_form.asp” method=“get”>
  2.      <input list=“browsers” name=“browser” />
  3.      <datalist id=“browsers”>
  4.          <option value=“Internet Explorer”>
  5.          <option value=“Firefox”>
  6.          <option value=“Chrome”>
  7.          <option value=“Opera”>
  8.          <option value=“Safari”>
  9.      </datalist>
  10.      <input type=“submit” />
  11. </form>

As you can see at lines 2 and 4, the id and list attributes match. The <datalist> element is wrapped around a set of  <option> that are available for selection by another form control (in this example the input field from line 2).

CURRENT SUPPORT

All major browsers support this element except Safari (as of June 2015). See http://caniuse.com/#search=datalist for details and polyfills.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s