# HTML5 Guidelines for Web Developers

#### zhougong

##### 贡献于2012-05-25

Hello world!

in the preset HTML basic frame with the following wrong markup:
WHATWG

Hello world!

You probably cannot see much difference between this and the HTML version. That is due to the fact that we have not made full use of the permitted level of simplification in HTML code for the first Hello world! example. In lazy HTML5, this markup would have been sufficient: Hello World! in HTML5

Apopka, FL 32703
New input types

... In Figure 3.3 you can see what the result of this test looks like on an Android cell phone. The system’s WebKit-based browser (left) pretends to know the types tel, search, url, and email but does not really help when it comes to entering the telephone number via the keyboard (center). Opera Mobile in version 10.1 beta (right) supports url and email, plus the date and time types. Figure 3.3  Support of new form input types on an Android 2.1 phone with browsers WebKit (left, center) and Opera (right) That is a rather disappointing result for the otherwise so modern Android brows- er. Results look slightly better on the iPhone: At least the smartphone adapts the software keyboard, displaying a numeric keyboard when you try to enter a phone number and adding the @ character on the keyboard for the input type email. 3.2  Useful Attributes for Forms 43 This test works even better with BlackBerry, the operating system of the popular line of smartphones produced by the Canadian manufacturer Research in Mo- tion (RIM). As you can see in Figure 3.4, the BlackBerry supports both tel and number plus date types, and the latter in particular are represented in very at- tractive graphics. Under the hood we find WebKit at work: The software was ex- panded to include these functions. Figure 3.4  The new input types on a BlackBerry smartphone (BlackBerry 9800 simulator) 3.2  Useful Attributes for Forms Apart from new elements and many new types for the input element, HTML5 also offers several new attributes for form elements. 3.2.1  Focusing with “autofocus” Years ago, Google surprised many users with a simple trick that made searching much more convenient: When the page was loaded, the cursor was automati- cally positioned in the search field. The user was able to enter the search term directly without having to first activate the input box by clicking with the mouse. Previously, this was done with a short snippet of JavaScript; in HTML5 you can now do it with the autofocus attribute: As with all boolean attributes, you can write this attribute as autofocus="autofocus" (see Chapter 2, section 2.7.2, The “time” Element). The specification states that only one element in a web page can contain the autofocus attribute. Chapter 3—Intelligent Forms 44 Older browsers do not have a problem with autofocus, because they simply ig- nore the unknown attribute. Of course, you only get the benefit of user friendli- ness with new browsers. 3.2.2  Placeholder Text with “placeholder” Usability of HTML forms can be further improved with the new placeholder attribute:

The value of placeholder can give the user a quick hint about how to fill in the field, but it should not be used as an alternative to the label element. It is partic- ularly useful for fields where a certain data entry format is expected. The browser displays the hint text within an inactive input field. As soon as the field is acti- vated and is focused, the text is no longer displayed (see Figure 3.5). Figure 3.5  The “placeholder” attribute in Google Chrome 3.2.3  Compulsory Fields with “required” required is a boolean attribute, and its name already says everything about its function: A form element that this attribute is assigned to must be filled in. If a required field remains blank when the form is sent, it does not fulfill the require- ments and the browser must react accordingly. You will find more information on this in section 3.4, Client-side Form Validation. 3.2  Useful Attributes for Forms 45 3.2.4  Even More Attributes for the “input” Element The input element has not only been enhanced with new types (section 3.1, New Input Types), but also with new attributes that enable easier handling of forms (see Table 3.2). Table 3.2  New Attributes for the “input” Element Type Description Attribute liststring Refers to the ID of a datalist element with suggestions (see section 3.3.3, Lists of op- tions with “datalist”) list numeric/date Minimum value of numeric fields and date fields min numeric/date Maximum value of numeric fields and date fields max numeric Step size of numeric fields and date fields step boolean Multiple selection possible multiple enumerated (on/off/default) Automatically inserts saved data into form fields autocomplete string Regular expression for validating the value pattern We will come across the list attribute again in section 3.3.3, Lists of Options with “datalist”. It refers to the datalist element, which offers possible entries as suggestions. min, max, and step are not only suitable for numeric fields, but these attributes can also be used for entering the date and time:

In browsers that support the input type number, the first input element (id=minMax) is increased each time by a value of 0.1. This works by clicking the arrow keys at the end of the text field or by pressing the arrow keys on the keyboard. The ele- Chapter 3—Intelligent Forms 46 ment with the ID minMaxDate jumps forward seven days each time. Opera only displays those days in the calendar as active that correspond to the week cycle. For setting this element, Google Chrome offers the same navigation as with the input type number: two arrow keys that set the date forward or backward seven days. In the third input element in this example, the step size is set to 3600; this causes the time to be set one hour forward or one hour backward. Although the specification states that the input elements for time usually work in minutes, both Opera and Google Chrome interpret this data as seconds. We are all familiar with multiple selection from copying files; now this option ex- ists for browsers as well. If you wanted to load several files on a website at once, you previously had to provide an input field for each file. The multiple attribute allows for the marking of several files in the file dialog. The multiple option was always intended for the select element; using it for input fields of the type email is new. But as yet (at the time of this writing), none of the commonly used desk- top browsers can implement this function for email types. Modern browsers have a function that allows them to save form data to help the user fill in forms when the form is revisited. This prefilling can be very useful but would be undesirable for security-sensitive input fields (the specification men- tions the activation codes for nuclear weapons as an example). The autocomplete attribute was introduced to allow web developers to govern this behavior. If an element has the attribute autocomplete="off" assigned to it, that means the in- formation to be entered is confidential and should not be saved in the browser. If the form element does not state if autocomplete should be switched on or off, the default setting is to display suggestions. The autocomplete attribute can also be applied to the whole form by assigning it to the form element. The new pattern attribute allows for very flexible input verification. You can specify a regular expression against which the form field will be checked for a match. Regular expressions are very powerful but unfortunately not a very easy method of parsing strings. Imagine you are looking for a character string start- ing with an uppercase character followed by any number of lowercase letters or numbers and ending in .txt. Finding it is no problem at all with a regexp (short for regular expression): [A-Z]{1}[a-z,0-9]+\.txt An introduction to regular expressions would be far beyond the scope of this chapter, so let’s assume for now that you have basic knowledge of regular expressions when you read the following section. If you are looking for a brief online introduction to regular expressions, Wikipedia is a good starting point: Browse to http://en.wikipedia.org/wiki/Regular_expression. The website http://www.regexe.com gives you the chance to try regular expressions online. NOTE 3.3  New Elements 47 When using regular expressions with the pattern attribute you need to remem- ber that the search pattern always has to apply to the field’s entire content. The specification also suggests using the title attribute to give the user a hint re- garding the input format. Opera and Google Chrome display this kind of infor- mation as a tool tip as soon as the mouse pointer hovers over the field. After all this theory, here is a brief example:

The guideline for the pattern attribute specifies that the character string can only contain characters between a and z (in lowercase,[a-z]) and that there are at least 3 and at most 32 characters. Special characters or umlauts are not allowed, which can be useful for a user name as in the preceding example. If you want to include certain special characters, for example, the umlauts in the German lan- guage, you need to include them in the group: [a-zäöüß]. In section 3.4, Client- side Form Validation, you can find out what happens if the validation fails. 3.3  New Elements In addition to the new input types and the new attributes mentioned earlier, the specification also includes new elements for forms. We will discuss these in the next section. The elements meter and progress create graphical objects that previously could only be achieved with more or less complicated tricks. Sugges- tions for text input are offered by datalist, and output provides a placeholder for the results of calculations. The keygen element has been circulating through the World Wide Web for a long time but has only reached standardization with HTML5. 3.3.1  Displaying Measurements with “meter” The meter element is used to graphically represent a scalar measurement within a known range. Think, for example, of the fuel gauge in your car: The needle shows the current level of fuel in your tank as somewhere between 0 and 100 percent. Previously, such graphic representations were usually coded in HTML with nested div elements, a rather inelegant solution for which the div element was probably not intended. A status display can also be displayed graphically, as a picture, through free web services, such as the Google Chart API. You can see all of these options in the example that follows. Chapter 3—Intelligent Forms 48 Using the meter element is very simple: You set the desired value via the value attribute; all other attributes are optional. If you do not set a min and max value, the browser will use 0 and 1 for these attributes. So, the following meter element shows a half-full element: Apart from value, min, and max are also the attributes low, high, and optimum— values that the browser can incorporate into the display. Google Chrome (at the time of this writing, the only browser apart from Opera that is able to represent the meter element), for example, displays the normally green bar in yellow if the optimum value is exceeded. In the following example you can see a graphic representation, showing the per- centage of the current year that has already passed. The website presents a vi- sualization of the output in four different ways: as text with a value in percent, using the new meter element, via nested div elements, and as graphics produced by the online service of Google’s Chart API. You can see the result in Figure 3.6. Figure 3.6  The “meter” element and similar options for representing a state 3.3  New Elements 49 The HTML code for this example contains the still empty elements, which are filled via JavaScript:

## Text

% of the year has passed.

# Please activate all the checkboxes

Progress:

The progress element is initialized with a value of 0 and a maximum value of 10. As soon as an input element is activated, it calls the function updateProgress(), which looks like this: function updateProgress() { var pb = document.getElementById("pb"); var ip = document.getElementsByTagName("input"); 3.3  New Elements 51 var cnt = 0; for(var i=0; i

http:// If you want to equip older browsers with a selection list without duplicating the HTML code, you can fall back on the following trick. Because browsers support- ing the datalist element ignore an enclosed select element, they display the new HTML5 select element. Older browsers, however, display a selection list for the text field with predefined links, which will be inserted into the text field when the selection is changed. As you can see in Listing 3.2, we need to add a text node to the option elements because the “old” select element does not show the content of the value attri- bute but instead shows the text: Listing 3.2  A “datalist” with the fallback for older browsers 3.3  New Elements 53 The onchange event within the select element inserts the current text of the se- lection menu into the text box (see Figure 3.8). Figure 3.8  A combination of “input” and “select” elements as fallback for older browsers (here, Internet Explorer 8) 3.3.4  Cryptographic Keys with “keygen” The keygen element has a long history in the Mozilla Firefox browser (included since version 1.0), but Microsoft still expressed great concern regarding the im- plementation in HTML5. keygen is used to generate cryptographic keys, which sounds complicated, and unfortunately, it is just as complicated as it sounds. Simply put, the idea behind this element is this: The browser creates a pair of keys, one a public key and the other a private key. The public key is sent off with the other form data and is then available to the server application, whereas the private key remains saved in the browser. After this exchange of keys, the serv- er and browser can communicate in encryption without SSL certificates. This sounds like a practical solution for those pesky self-signed certificates, which browsers keep complaining about, but sadly it is not, because the identity of the server can only be verified through a certificate that has been signed by a trust- worthy authority, the Certificate Authority (CA). So if keygen cannot replace SSL, what should the new element be used for? As ex- plained in the Mozilla documentation, the keygen element helps create a certifi- cate that the server can sign (signed certificate). To make this step totally secure, it is usually necessary for the applicant to appear personally before the authority. Because the issuing of signed certificates is a task for experts, we will briefly de- scribe this element and its attributes. Chapter 3—Intelligent Forms 54 The following short HTML document creates a keygen button: keygen Demo

In addition to the familiar attributes, such as autofocus, disabled, name, and form, the keygen element has two special attributes: keytype and challenge. keytype in particular is interesting because the browser uses this entry to decide if it sup- ports this element’s function. Currently, there is only one valid keytype, which is rsa, a cryptographic system developed in 1977 at the Massachusetts Institute of Technology (MIT). If no keytype is specified (as in the preceding example), rsa is used as the default value. The specification also states that a browser does not have to support any keytype at all, which is probably because of Microsoft’s veto against this element. The optional challenge attribute increases security during the key exchange. For further information, please refer to the links in the note at the end of this section. If the browser supports the RSA key generation, it can offer a selection list to al- low the user to select the length, and consequently the security, of the key (see Figure 3.9). Figure 3.9  Selecting the key length in Google Chrome Figure 3.10 shows the result after the form has been sent: The POST variable kg contains the public key required for encryption (here, rendered in the extremely useful Firefox add-on Firebug). 3.3  New Elements 55 Figure 3.10  The public key of the “keygen” element, represented in Firebug If you have not had much previous experience with cryptography but would   like to find out more, Wikipedia is always a good starting point. Check out http://en.wikipedia.org/wiki/Public_key_infrastructure and http:// en.wikipedia.org/wiki/Challenge-response_authentication. 3.3.5  Calculations with “output” “The output element represents the result of a calculation.” That is the very short explanation in the HTML5 specification, and you will find exactly the same text on most websites describing the new element. It all sounds very sensible, but what kind of calculations are we dealing with? Why do we need a special element for them? As a general rule, these are calculations resulting from input fields on a web- site. An example familiar to most people would be an electronic shopping cart where the quantity for each product can be entered in an input field. Via the optional for attribute, you can determine which fields to include in the calcu- lation. One or more id attributes of other fields in the document are referenced in the process. NOTE Chapter 3—Intelligent Forms 56 To test the output element, we will program one of these little shopping carts for three different products. The quantity of each of these products can be changed via an input field. At the same time, the total number of items and the total price are displayed under the shopping cart. Figure 3.11 shows a shopping basket with five items. Figure 3.11  Two “output” elements show the number of products and the price in total The code for our example can be explained quickly and simply: To update the output elements for each change in quantity, we use the form’s oninput event:
ProductPrice (US\$)Item number
Keyboard39.50
Mouse26.30 The output elements are defined after the table with the products and refer to the IDs of the input fields via the for attribute:

Your shopping cart contains items. Total price: US\$. In the JavaScript code, a loop runs over all input elements, adding the quantities and calculating the total price: 3.4  Client-Side Form Validation 57 function updateSum() { var ips = document.getElementsByTagName("input"); var sum = 0; var prods = 0; for (var i=0; i 0) { sum += cnt * Number(document.getElementById( ips[i].name+"Price").innerHTML); prods += cnt; } } document.getElementById("sumProd").value = prods; document.getElementById("sum").value = sum; } We get the product price directly from the table by using the innerHTML value of the relevant table column and converting it to a number with the JavaScript function Number(). The same applies to the value in the input field (ips[i]. value), because without this conversion, JavaScript would add up the character strings, which would not produce the desired results. The calculated values are then inserted into the value attributes of the output elements. 3.4  Client-Side Form Validation One of the advantages of the new elements and attributes in forms is that the user can now enter data much more easily (for example, choose the date from a calendar). Another great advantage is the option of checking the form contents before the form is submitted and alerting the user of any mistakes. You might say that kind of checking is rather old hat because it has been around for years. That is true, but until now this step always had to be done via JavaScript code that you had to program. Thanks to jQuery and similar libraries, this task has become much easier and the code is more manageable, but you still must depend on an external library. With HTML5, this situation changes fundamentally: You define the parameters of the input fields in HTML, and the browser checks whether the fields have been filled in correctly. That is a big step forward and makes many lines of JavaScript code redundant. This tiny example will convince you: