HTML 5 Controls with Available Options

HTML5 Basics - Part 20

Forward: In this part of the series, we look at HTML 5 Controls with Available Options.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 20 of my series HTML5 Basics. I assume you have read the other parts of the series before arriving here. The links of the other parts of the series are given at the end of this tutorial. In this part of the series, we look at HTML 5 Controls with Available Options.

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 datalist Element
An input element is meant for the user to type any value that the input element would accept. It is possible for you to have possible values that the user can choose from in an element called the datalist element. In your code you would type the input element and below it you type the datalist. The datalist element is a double tag element, whose tags are <datalist> and </datalist>. The syntax for the use of the datalist element in conjunction with an input control is:

    <input type= "state" name= "inputname" list= "listname">
    <datalist id="listname">
        <option value="effectivevalue" label="valuename">
        <option value="effectivevalue" label="valuename">
- -
    </datalist>

At the browser only the input element would be displayed. The datalist element would not be displayed. Inside the datalist, you have single tag option elements. There can be many option elements, not just 2 as indicated above. Each of these option elements has the value of an option the user can choose from, as value for the input element. The user can still type value, which is not among these options.

Each of the option elements has a value attribute. The value of the value attribute of an option element is a value that the user can choose, for the input control. Each of the option elements has a label attribute. The value of the label attribute is a more user friendly name for the value in the value attribute (of the option element). The following code illustrates this for search engines:

<!DOCTYPE HTML>
<html>
<head>
    <title>Example</title>
</head>
<body>

    <input type= "url" name= "engine" list= "englist">
    <datalist id="englist">
        <option value="http://www.google.com/" label="Google">
        <option value="http://www.bing.com/" label="Bing">
        <option value="http://www.yahoo.com/" label="Yahoo">
    </datalist>

</body>
</html>

Remember, the datalist element is not displayed at the browser; only the input element is displayed. The input element here has the URL state (type). So the value of the value attributes of the option elements have to be URLs. The first URL in the list is http://www.google.com/, which is the URL for the home page of the Google search engine. So the value of the corresponding label attribute is “Google”.

From the above list, the user is expected to type the user-friendly name, like, Google and not the actual URL, like, http://www.google.com/. The user can still type any URL in the input element that is not a value of any of the value attributes; that is OK. There can be many option elements; more than three.

When the user starts typing text in the input element and types the first letter, if there are any user-friendly names of the label attributes that begin with the letter the user has typed, those names would appear below the input text control at the browser. If the user then clicks any of the names that appear, the clicked name value (URL) would appear in the input control field. Read and try the above code.

In the code there has to be something that connects the input control to the datalist element. In the input control tag, you have the list attribute. In the datalist start tag, you have the id (identifier) attribute. The value of the list attribute in the input element has to be the same as the value of the id attribute of the datalist element. This is how the connection between the two elements is made. If there is no connection, then the code will not work.

The select Control
You can have a short one-column drop-down menu on your web page. Imagine that you want a one-column drop-down menu of list of fruits (pear, peach, apple, banana, pineapple). You use the select element for this. In tag format, the select element is:

<select name="sel">

</select>

The start tag can have attributes. The start and end tags are required. Tag name is always in lower case.

Each Form control must have a name attribute. Each control should have a value (content from user); however, if you do not include the value attribute, the browser will still associate the current value to the control. The value attribute is normally used when you have an initial value (see previous parts of the series).

The option Element
In other for the select element to hold the items of the menu, it needs the double-tag option element. Above, we saw the single-tag option element. Each double-tag option element holds one item of the menu. In tag format, the option element is:

          <option>item</option>

The start tag can have attributes. Tag name should always be in lower case.

So our menu of fruits would be,

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

Try the following code to see how the select element looks like at the browser:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <form action="http://www.somewebsite/dir/file.exe"  method="post">
        <select name="sel">
            <option> pear </option>
            <option>peach </option>
            <option>apple</option>
            <option>banana </option>
            <option>pineapple</option>
        </select>
    </form>
</body>
</html>

You should have seen the Select Control at the browser. The item that appears first in the code (option) is the single item that appears in the Select Control, when the list is not opened (pull down). We say, this is the item that is pre-selected. If you click the drop down button of the menu, you should see the list of items.

If you do not want the first item to be pre-selected, you can determine which of the other items will be pre-selected. To do this you use what us called a Boolean attribute. A Boolean attribute is an attribute that does not have a value. Its presence means Yes (true) and its absence means No (false). We saw an example (checked) in the previous part of the series. The one to use here is, selected. You put this attribute in the start tag of the corresponding option element. The following code will show, apple, first when the list is not opened:

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

You can fit this code segment into the preceding code above and try.

Whether the pre-selected value was determined by you or not, when you click the drop down button of the select element, a list appears. You select any item from the list by clicking it. After clicking the item, the list disappears and the selected item (now the current value) appears as the single element of the select control.

Selecting Multiple Elements
The way the select element has been described above, only one item can be selected at a time, and the select element, by default, only shows the current (selected) value. Note: the pre-selected value is the initial value, which is displayed as the web page is shown for the first time. There is a Boolean attribute called, multiple. If you add this attribute to the start tag of the select element (not an option element), the select element will always be displaying many of the items of the list. You can then select different items by pressing down the CTRL Key, on the keyboard, while you click the different items of your choice. Try the following code and select more than one value:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <form action="http://www.somewebsite/dir/file.exe"  method="post">
        <select name="sel1" multiple>
            <option> pear </option>
            <option>peach </option>
            <option >apple</option>
            <option>banana </option>
            <option>pineapple</option>
        </select>
    </form>
</body>
</html>

If the list (menu) is too long, a vertical scroll bar will appear on the right of the list. You can use the scroll bar to scroll up and down to see all the items. You can however determine the number of rows of the list that will be displayed. To do this you use the size attribute in the start tag of the select element. The value of the size attribute is an integer, which is equal to the number of rows displayed. The following code illustrates this:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <form action="http://www.somewebsite/dir/file.exe"  method="post">
        <select name="sel" multiple size="3">
            <option>pear</option>
            <option>peach</option>
            <option>apple</option>
            <option>banana</option>
            <option>pineapple</option>
        </select>
    </form>
</body>
</html>

Name/Value Pair of select Element
For any control, it is the name/value pair that is sent to the browser. For the select control it is the name of the select element and the content of the option element chosen, that are sent to the browser.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

HTML 5 Controls with Available Options

HTML5 Basics - Part 20

Introduction

Related Links

Comments