HTML 5 Option Element

Mastering HTML5 - Part 11

Forward: In this part of the series we look at the HTML 5 option Element.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 11 of my series, Mastering HTML5. I assume you have read the previous parts of the series before reaching here. In this part of the series we look at the HTML 5 option Element. The option element is used as an option in the select or the datalist element. It can be used as a double-tag element for the select element or a single-tag element for the datalist element.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The Double-Tag Option Element
The following select element, shows the option element used as a double-tag option element. When used as a double tag element, the content of the option element is the label for the element.

        <select name="sel">
            <option>pear</option>
            <option>peach</option>
            <option>apple</option>
            <option>banana</option>
            <option>pineapple</option>
        </select>

The label for the option element is what the select element or datalist element displays as the option. The option element, whether as the double-tag element or the single-tag element has the value and label attribute. When used as the double tag element and without the value attribute, the content of the option element is at the same time the label and value of the option element.

Note, in the select or the datalist (input) element, it is the value of the option element chosen (selected) that is sent as the value of the of the select or input element, together with the name of the select or input element to the server.

As a double-tag element, if the option element has a value attribute, the value of the value attribute can be different from content of the option attribute. It is the value of the value attribute that will be sent to the server if the option is chosen. Read and try (open in browser) the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <select name="sel">
        <option value="10">pear</option>
        <option value="20">peach</option>
        <option value="30">apple</option>
        <option value="40">banana</option>
        <option value="50">pineapple</option>
    </select>

</body>
</html>

Here, if the second option element is chosen by the user, the user would know that he has chosen peach (label) that he saw; however, it is the value, 20, and the name, sel that will be sent to the server.

The Single-Tag option Element
When used as a single tag element, the value and the label attributes of the option element have to be typed. The value of the label attribute is what will appear as option in the datalist element. The value of the value attribute of the option element is what will be sent to the server as the value of input element (together with the name of the input element) when the option element is chosen. Note: when used as a single tag-element, you can only use it with the datalist element, you cannot use it with the select element. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <input type="number" name="no" list="dl">
    <datalist id="dl">
        <option value="10" label="pear">
        <option value="20" label="peach">
        <option value="30" label="apple">
        <option value="40" label="banana">
        <option value="50" label="pineapple">
    </datalist>

</body>
</html>

Advice: use the double-tag option element with the select element and use the single tag option element with the datalist element. The datalist element works with input controls.

The optgroup Element
For the select element, if the options are many, then they can be grouped into groups. Not all the option elements need to be in groups. You use the double-tag optgroup element to group the options. The optgroup element has a label attribute, which if used, will be the label (header) for the group. Read and try the following example:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <select name="sel">
        <optgroup label="Group 1">
            <option value="10">pear</option>
            <option value="20">peach</option>
        </optgroup>
    <optgroup label="Group 2">
        <option value="30">apple</option>
        <option value="40">banana</option>
    </optgroup>
        <option value="50">pineapple</option>
    </select>
</body>
</html>

Conclusion
The option element can be used as a double-tag element in a select element. It can be used as a single tag element in a datalist element. When used as a double tag element, if the value attribute and the label attribute are not typed, the content of the option element becomes the label and value of the option element. When used as a single-tag element, the label and value attributes have to be typed. When used as a double-tag element, there is no need for the label attribute, but you can have the value attribute; in this case, it is the value of the value attribute that will be sent to the server and not the content.

We continue in the next part of the series.

Chrys

Broad Network

HTML 5 Option Element

Mastering HTML5 - Part 11

Introduction

Related Links

Comments