Love for the Alien Same:
4.1. COSMOPOLITAN INTIMACIES
The first of the new tags implements a common autocomplete feature: when you begin typing into a form field, a drop-down appears that has a list of options that match what has already been typed. As you continue to type, the list becomes more specific, and at any time you can use the arrow keys to select one of the options.
These sort of autocomplete fields are often referred to as data lists (and sometimes combo boxes) and HTML5 has a new <datalist> tag that implements this exact user interface element.
In practice, a <datalist> tags contain <option> tags, one for each item in the data list. By themselves
<datalist> elements are not rendered in page, and can go anywhere in the document structure. Once created, a data list must be associated with an input field in order to use it. Give the <datalist> tag a unique id attribute. To associate it with an <input> element, set that element’s list attribute to the unique id. That tells the browser to render the specified data list with the <input> element, as demonstrated in Listing 2-14.
Listing 2-14. A Data List
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Programmer's Reference</title>
</head>
<body>
<!-- Note the datalist can be anywhere -->
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
<article>
<h1>Using the <datalist> tag</h1>
<input list="browsers" />
</article>
</body>
</html>
As with other HTML5 user interface elements, each browser renders the data list slightly differently (Figure 2-11).
As you can see, Chrome provides a drop-down arrow hint on the right side of the input field to indicate that the input field is a data list, and Firefox has a slight drop shadow on the dropdown. The functionality of the list remains the same between browsers.
Meter
The new <meter> tag provides a simple meter bar or gauge visual element. This bar is meant to model a measurement within a known range, or a fractional value of a whole (e.g., volume, disk usage, etc.). It should not be used to show progress (e.g., in a download); use the new <progress> tag for this.
The <meter> tag has the following properties:
• value: The current value to be displayed. This value must be within the min and max values, if specified. If no value is set, or if it is malformed, the browser will default to 0.
If specified but the value is greater than the max attribute, the value will be set to the value of the max attribute. If the value is less than the min attribute, the value will be set to the value of the min attribute.
• min: The minimum value of the range. Defaults to 0 if not specified.
• max: The maximum value of the range. Must be greater than the value of the min attribute (if specified). Defaults to 1.
It is also possible to specify subranges within the measured range. There can be a low range, a high range, and an optimum range. The low range goes from the min value to a specified value, while the high range goes from the high value to the max value. Either the low range or the high range can be specified as an optimum range by specifying a number within them using the optimum attribute.
• low: The highest value of the low range. When the value attribute is within the low range, the bar will render yellow by default.
• high: The lowest value of the high range, which ranges from this value to the value of the max attribute. When the value attribute is within the high range, the bar will render yellow by default.
Figure 2-11. Listing 2-14 rendered in Chrome (left) and Firefox (right)
• optimum: Indicates an optimum value for the range. The value must be between the min and max values of the range. If the low and high ranges are used, specifying an optimum value within one of them will indicate which of those ranges is preferred.
When the value is within the preferred range, the bar will render green. When it is in the other range, it will render red.
Creating these meters is as simple as adding a <meter> tag to your document, as demonstrated in Listing 2-15.
Listing 2-15. Meter Bars
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Programmer's Reference</title>
</head>
<body>
<article>
<h1>Using the <meter> tag</h1>
<p>Simple meter from 1 to 100, value set to 25:<br>
<meter min="1" max="100" value="25"></meter>
</p>
<p>Simple meter from 1 to 100, low range from 1 to 25, high range from 75 to 100, value set to 90:<br>
<meter min="1" max="100" low="25" high="75" value="90"></meter>
</p>
<p>Simple meter from 1 to 100, low range from 1 to 25, high range from 75 to 100, value set to 10:<br>
<meter min="1" max="100" low="25" high="75" value="10"></meter>
</p>
<p>Simple meter from 1 to 100, low range from 1 to 25, high range from 75 to 100, optimum set to 10, value set to 10:<br>
<meter min="1" max="100" low="25" high="75" optimum="10" value="10"></meter>
</p>
<p>Simple meter from 1 to 100, low range from 1 to 25, high range from 75 to 100, optimum set to 10, value set to 10:<br>
<meter min="1" max="100" low="25" high="75" optimum="10" value="90"></meter>
</p>
</article>
</body>
</html>
The meters render pretty consistently across browsers (Figure 2-12).
Output
The new <output> tag provides a way of specifying the output of a calculation or other user action within a form. It doesn’t have any special features; instead it provides a semantic tag for marking up this kind of content.
A simple example is shown in Listing 2-16.
Listing 2-16. Calculation Output in a Form
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Programmer's Reference</title>
</head>
<body>
<article>
<h1>Using the <output> tag</h1>
<form id="mainform" onsubmit="return false">
<label for="input-number">Temperature</label>
Figure 2-12. Listing 2-15 rendered in Chrome (left) and Firefox (right)
<input name="input-number" id="input-number" type="number" step="any"><br>
<input type="radio" name="convert-choice" id="radio-ftoc" checked value="ftoc">
<label for="radio-ftoc">Convert Fahrenheit to Celcius</label><br>
<input type="radio" name="convert-choice" id="radio-ctof" value="ctof">
<label for="radio-ctof">Convert Celcius to Fahrenheit</label><br>
Result:
<output name="output-target" for="input-number" id="output-target"></output>
</form>
</article>
<script>
var myForm = document.getElementById('mainform');
var converter = {
ctof: function(degreesC) {
return (((degreesC * 9) / 5) + 32);
},
ftoc: function(degreesF) {
return (((degreesF - 32) * 5) / 9);
} };
myForm.addEventListener('input', function() {
var inputNumber = document.getElementById('input-number'), outputTarget = document.getElementById('output-target');
var sel = document.querySelector('input[name=convert-choice]:checked').value;
outputTarget.value = converter[sel](parseInt(inputNumber.value));
}, false);
</script>
</body>
</html>.
This is a simple example, but you’ve used a couple of nifty tricks.
• You created a converter object, which has two methods, ctof (for converting Celsius to Fahrenheit) and ftoc (for converting Fahrenheit to Celsius).
• You set one of the radio button’s value properties to ctof, and the other to ftoc.
• You used the selector input[name=convert-choice]:checked to get whichever radio button is checked and then fetch its value (either “ctof” or “ftoc”).
• Then you can directly access the correct method on the converter object just by using the result of your query.
■Tip Javascript is also governed by a standard—eCMa-262—which specifically defines two ways to
access object members: dot notation or bracket notation. so
objectName.identifierNameis functionally equivalent to
objectName[<identifierName string>]even if the object in question is not an array. For details, see section 11.2.1, “property accessors,” in eCMa-262 at
http://www.ecma-international.org/ecma-262/5.1/
.
Figure 2-13 shows Listing 2-16 as rendered in Chrome.
Progress
HTML5 defines a new <progress> tag, which renders as a progress meter in the document. It is used to indicate progression or completion of a task, and provides the user with an idea of how much has been done and what still remains. It should not be used for visualizing a measurement within a known range—for that, use the <meter> tag.
The <progress> tag takes the following attributes:
• max: The maximum value of the activity. This value must be a valid positive floating-point number. If max is not specified, the maximum value defaults to 1.
• value: The current value of the progress. This value must be a valid floating-point number between 0 and max (if specified) or 1 (if max is not specified). If value is not specified, then the progress bar is considered indeterminate, meaning the activity it is modeling is ongoing but gives no indication of how much longer it will take to complete.
Listing 2-17 provides a simple demonstration of progress bars.
Figure 2-13. Listing 2-16 rendered in Chrome
Listing 2-17. Progress Bars
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Programmer's Reference</title>
</head>
<body>
<article>
<h1>Using the <progress> tag</h1>
<p>Downloading file1<br>
<progress max="100" value="10">10/100</progress> 10%</p>
<p>Downloading file2<br>
<progress max="100" value="50" orient="vertical">50/100</progress> 50%</p>
</article>
</body>
</html>
As shown in Figure 2-14, the progress bar renders differently in the various browsers.
The examples would look different when rendered on MacOS as well. Fortunately, the bars are easy to style. Firefox and Internet Explorer give direct access to the element’s styling, while in Chrome you have to select the pseudo-elements to change them. By adding a few simple directives to your CSS, as shown in Listing 2-18, you can make the bar look the same in all browsers.
Listing 2-18. CSS Rules for Progress Bars progress {
color: #0063a6;
font-size: .6em;
line-height: 1.5em;
text-indent: .5em;
width: 15em;
height: 1.8em;
border: 1px solid #0063a6;
background-color: #fff;
}
Figure 2-14. Listing 2-17 rendered in Chrome (left), Internet Explorer (middle), and Firefox on Windows 8 (right)
::-webkit-progress-bar { background-color: #fff;
}
::-webkit-progress-value { background-color: #0063a6;
}
As you can see in Figure 2-15 the bars now render the same across browsers.
A slightly more practical example would be a timer. Using the <progress> tag you can indicate that some allotted time—ten seconds, for example—is passing, as shown in Listing 2-19.
Listing 2-19. A Ten-Second Timer
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Programmer's Reference</title>
<style>
progress { color: #0063a6;
font-size: .6em;
line-height: 1.5em;
text-indent: .5em;
width: 15em;
height: 1.8em;
border: 1px solid #0063a6;
background-color: #fff;
}
::-webkit-progress-bar { background-color: #fff;
}
::-webkit-progress-value { background-color: #0063a6;
}
</style>
</head>
Figure 2-15. Progress bars with CSS rules applied
<body>
<article>
<h1>Using the <progress> tag</h1>
<h2>Ten Second Timer</h2>
<p><progress max="10" value="0" id="myProgress">0</progress></p>
</article>
<script>
var progress = 0;
var myProgress = document.getElementById("myProgress");
var myTimer = setInterval(function() { myProgress.value = ++progress;
if (progress > 10) { clearInterval(myTimer);
} }, 1000);
</script>
</body>
</html>
This example uses the DOM method setInterval() to run a function every second that updates the value of the progress bar. When the progress bar is full, it cancels the timer with the clearInterval() method.