MAPPING TRANSNATIONAL SAME-SPECIES ROMANCE AND KINSHIP IN SCIENCE FICTION

Love for the Alien Same:

4.2. MAPPING TRANSNATIONAL SAME-SPECIES ROMANCE AND KINSHIP IN SCIENCE FICTION

}, 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.

New Form Element Attributes

The HTML5 specification includes a few useful new attributes for form elements. Again, these new attributes were designed specifically to address shortcomings in previous versions of HTML forms and to add

commonly needed functionality that, until now, had to be built using JavaScript.

Autocomplete

All browsers offer the capability of storing form data for later reuse. This is of particular help with mobile devices because it reduces typing. The autocomplete attribute allows you to specify which <input> elements can be autocompleted and which should always be filled in manually. The autocomplete attribute can take two values: on (autocomplete is allowed; this is the default) or off (autocomplete is not allowed).

Listing 2-20 is a simple example with two form fields, one with autocomplete allowed and the other with it disallowed.

Listing 2-20. Controlling Autocomplete in Forms

<!DOCTYPE html>

<html>

<head>

<title>The HTML5 Programmer's Reference</title>

</head>

<body>

<h1>Using the autocomplete attribute</h1>

<p><label for="input-auto">This input allows autocomplete:</label><br>

<p><label for="input-noauto">This input does not allow autocomplete:</label><br>

</form>

</article>

</body>

</html>

In just about every browser, you should be able to fill out the form fields and click the submit button.

Then, reload the page. Double-click in the first form field, and you should be presented with a drop-down containing the value you entered earlier (Figure 2-16).

Note that you will have to enable the autofill feature in your browser. Most browsers will enable it by default, but many people turn it off for security purposes. If the user has disabled the feature in their browser, the autocomplete attribute will have no effect.

Browsers use a number of cues to determine which form fields should be autocompleted with what data: the name and ID for the fields, the action and method attributes of the <form> tag, and so forth.

The process is fairly nonstandard and edges into the realm of “magic.” In 2012, Google proposed an extension to the autocomplete property to help standardize the process. In this proposal they suggested an autocompletetype attribute with an extensive set of values ranging from address-line1 to postal-code to url. You can read their full proposal at http://wiki.whatwg.org/wiki/Autocompletetype. That proposal was never fully adopted, but sections from it eventually went into the new Autofill specification, which you can view at https://html.spec.whatwg.org/multipage/forms.html#autofill.

Autofocus

The autofocus attribute allows you to specify what form field should have focus when the page loads.

Because it is exclusive, you can only set autofocus on one form field on a given page, and the focus will go to that element when the page is done loading. You cannot set autofocus on a form element of type hidden.

Autofocus can be set to any <input>, <button>, or <textarea> field.

If you add an autofocus attribute to the second field in listing 2-20 on page load it will be focused, as in Listing 2-21.

Figure 2-16. Listing 2-20 rendered in Chrome (left) and Firefox (right)

Listing 2-21. Automatically Focusing an Input Field

<!DOCTYPE html>

<html>

<head>

<title>The HTML5 Programmer's Reference</title>

</head>

<body>

<h1>Using the autofocus attribute</h1>

<p><label for="input-auto">This input allows autocomplete:</label><br>

<p><label for="input-noauto">This input does not allow autocomplete:</label><br>

</form>

</article>

</body>

</html>

When the page finishes loading, the second input field will be selected and ready to receive input, as shown in Figure 2-17.

Figure 2-17. Listing 2-21 rendered in Chrome

Of course, as soon as the user clicks anywhere else in the browser, the field will loose focus, and it will not return unless the user clicks on the field again. The autofocus only happens on page load.

Placeholder

Another commonly designed feature of forms is placeholder text inside of an <input> field. Placeholder text helps provide more information about what the field is for, and it disappears when the user starts typing.

HTML5 includes a new placeholder attribute that can be applied to both <input> and <textarea> fields.

The value specified for the attribute is used as placeholder text inside the field.

Listing 2-22 is a simple example of a form in which the user can compose and send an e-mail.

Listing 2-22. Placeholder Text

<!DOCTYPE html>

<html>

<head>

<title>The HTML5 Programmer's Reference</title>

</head>

<body>

<h1>Using the placeholder attribute</h1>

<p><label for="message-title">Title:</label><br>

</article>

</body>

</html>

In modern browsers the placeholder text will be visible as grayed-out text within the form fields (Figure 2-18).

Figure 2-18. Listing 2-22 rendered in Chrome

As soon as the user begins to type in a field, the placeholder text will disappear, as shown in Figure 2-19.

Note that this example still includes <label> tags. Placeholder text is a nice design concept, but it should not replace <label> tags, which are an important part of form accessibility. You don’t typically need both—as you can see in the example, the labels are somewhat redundant. In this case, you can simply hide the <label> tags with CSS, as per Listing 2-23.

Listing 2-23. Hiding Labels with CSS label: {

display: none;

}

This simple bit of CSS makes the form look much nicer in Figure 2-20.

Figure 2-19. Listing 2-22 after user input

In document 110 Pablo Gómez Muñoz (página 191-196)