HTML5 Guidelines for Web Developers

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

Figure 2.3  The basic structure of the HTML5 blog content By definition, the address element contains contact information, which inciden- tally does not, as is often wrongly assumed, refer only to the postal address, but simply means information about the contact, such as name, company, and posi- tion. For addresses, the specification recommends using p. The address element applies to the closest article element; if there is none, it applies to the whole document. The time element behaves in a similar way in relation to its attributes pubdate and datetime, which form the timestamp for our document. You will find details on this in section 2.7.2, The “time” Element. Chapter 2—Structure and Semantics for Documents24 If article elements are nested within each other, the inner article should in prin- ciple have a theme similar to that of the outer article. One example of this kind of nesting would be, in our case, adding a subarticle to our blog with comments on the post concerned. Regarding styling via CSS, we should mention that article once again requires display: block, that the content width is reduced to 79% via the surrounding div, and that this div also neutralizes the logo’s float: left with clear: left. The italicized author information is the result of the default format of address and is not created via em. The picture is anchored on the left with float: left, the text is justified with align: justify, and quotations are integrated using the q element. One interesting detail is that the quotation marks are not part of the markup but are automatically added by the browser via the CSS pseudo-elements :before and :after in accordance with the style rules for the q element. The syntax in CSS notation once more reflects the markup specification: /* Style rule for the q-element: */ q { display: inline; } q:before { content: '"'; } q:after { content: '"'; } 2.3  Footer with “footer” and “nav” In the footer of our HTML blog, we find two other new structural elements: foot- er and nav (see Figure 2.4). The former creates the frame, and the latter provides navigation to other areas of the web page. footer contains additional info on the relevant section, such as who wrote it (as address of course); are there other, related pages; what do we need to look out for (copyright, disclaimer); and so on. Unlike the human body, where the head is usually at the top and the foot at the bottom, a footer in a document does not always have to be at the end of the document, but can, for example, also be part of an article element. Not allowed, however, are nested footer elements or a footer within a header or address element. If you want to create navigation blocks to allow page navigation via jump labels within a document or to external related pages, you can use nav. Just as with footer, nav can appear in other areas of the document as well, as you will see in the section 2.4, Sidebar with “aside” and “section”—the only exception being that you cannot have nav within the address element: Figure 2.4  The basic structure of the HTML blog footer As for CSS, our HTML5 blog’s footer has a few special features. For example, the entire footer is colored in the same light gray as the page background, and only the links are formatted with background-color: white. The copyright in the first p requires float: left, and the navigation text-align: right plus the h3 heading in the nav block are hidden with display: none. Just why there is an h3 element in there at all will become clear in section 2.5, The Outline Algorithm. To improve the style of the links, they are surrounded by div tags. And of course we have display: block for header and nav, plus a reduction of the width in the footer element to 79%. 2.4  Sidebar with “aside” and “section” For areas of a page that are only loosely related to the main content and can there- fore be seen as rather separate entities, we can use the aside element. In our exam- ple, it creates a classical sidebar on the right with three blocks for Questionnaire, Chapter 2—Structure and Semantics for Documents26 Login, and Quick Links. If the link list is implemented as nav, as is to be expected, the two first blocks are embedded in another new element: section. The section element contains sections of a document that are thematically con- nected, for example, chapters of an essay or individual tabs of a page constructed from tabs, typically with a heading. If section is used within footer, it is usually used for appendices, indices, license agreements, or the like. Generally, it makes sense to use section if it belonged in a table of contents as well. In our example, as shown in Figure 2.5, the Questionnaire and the Login are tagged with section, and the links are tagged as nav as mentioned earlier: Figure 2.5  The basic structure of the HMTL5 blog sidebar 2.5  The Outline Algorithm 27 NOTE For the same reason as with the nav block in the footer (see the following sec- tion), the sidebar contains a heading h2 directly before the first Questionnaire block, hidden via CSS with display: none. The sidebar format is float: right with width: 20% and font-size: 0.9em. The striking feature of the sidebar is the rounded bottom-right corner, which means it’s time to admit that the HTML5 blog also uses CSS3: The rounded corner is only one of two features used. The CSS syntax for the class rounded-bottom-right looks like this: .rounded-bottom-right { -moz-border-radius: 0px 0px 20px 0px; -webkit-border-radius: 0px 0px 20px 0px; border-radius: 0px 0px 20px 0px; } The second feature is responsible for the subtle shadow of the four areas and is defined as follows in the CSS file: .shadow { -moz-box-shadow: 4px 0px 10px -3px silver; -webkit-box-shadow: 4px 0px 10px -3px silver; box-shadow: 4px 0px 10px -3px silver; } The tripling of the CSS command through the prefixes -moz-* and -webkit-* is conspicuous; it is caused by the fact that CSS3 is not yet in the Candidate Rec- ommendation phase. Once it enters this stage of the standardization process, only then will it be ensured that border-radius and box-shadow will no longer be changed. Until then, the prefixes are maintained to show that the implementa- tion could still contain small deviations from the standard. If you want to learn more about these two eagerly awaited features of the CSS3 specification, you will find further information here: zz http://www.w3.org/TR/css3-background/#the-border-radius zz http://www.w3.org/TR/css3-background/#box-shadow 2.5  The Outline Algorithm Even if the details for outlining a document sound rather complicated in the specification, there is a simple idea behind outlining, which is a machine-read- able summary of the underlying document structure. This structure is deter- mined by a combination of so-called sectioning content—for example, body, Chapter 2—Structure and Semantics for Documents28 article, aside, nav, and section—and heading content, such as h1 to h6 or hgroup, which provides the proper entries of the outline. If we check our HTML5 blog with Geoffrey Sneddon’s online HTML5 Outliner (http://gsnedders.html5.org/outliner), we see the following structure: 1. The HLML5 blog! 1. Link Block 1. Questionnaire 2. Login 3. Quick Links 2. Tug of war between W3C and WHATWG enters ... 3. Navigation With the italicized entries Link Block and Navigation, we get back exactly those two headings that were hidden in the layout with display: none. If we had omit- ted these headings completely, we would have seen the text Untitled Section in their place. But this way, the structure is complete and the outline is much easier to read. Regarding the choice of headings h1 to h6, we should note the following: In prin- ciple, any sectioning content can start with the heading rank h1, but it does not have to. In our case the heading ranks reflect the hierarchy in the outline: h1 for the blog header; h2 for the article title, the link block, and the footer navigation; and h3 for the other headers. If we tagged everything with h1, we would get the same outline, but the layout would suffer somewhat and we would need to sort it out manually in the CSS file. When using hgroup, you need to remember that the outline only includes the highest level in the hgroup. That is why you cannot see the subtitle Tips, tricks & tidbits for today’s web developers in the outline. Even if there is as yet no browser that directly uses the outline algorithm in any form, this does not mean that it could not play a more important role in the future. Automatically generated navigation bars would be a possibility, or the creation of short, concise summaries, or perhaps improvements for crawlers ex- tracting relevant content for search engines. Until then it definitely does not hurt to do some serious thinking about the structure of your document. It is easy to check the structure, so why not go ahead and do it? 2.6  Figures with “figure” and “figcaption” The elements figure and figcaption do not really count among the structural elements, but they are still a welcome addition to our options in structuring the integration of independent pictures, graphics, diagrams, and code lists. Each 2.7  Text-Level Semantics—More New Tags 29 figure element can have only one figcaption element. It is up to the author whether this is placed before or after the figure in question. A brief example with markup and its browser implementation (see Figure 2.6) could look like this: Figure 2.6  Example of “figure” with “figcaption” 2.7  Text-Level Semantics—More New Tags Apart from focusing on clear structures, the HTML5 specification also attaches importance to semantics and tries to assign each element a certain meaning on the text level. At the same time, the HTML5 specification determines in which context the tag concerned can be used and in which it cannot. There are some new elements and some that have disappeared completely (such as font, center, and big), and the definitions of others have changed slightly. The fol- lowing chapter will introduce new and changed elements. Later, in Table 2.2 we will show you the classical applications of all elements that appear in the Chapter 2—Structure and Semantics for Documents30 specification’s Text-level semantics chapter. Let’s start with the most exotic of the new elements—ruby. 2.7.1  The Elements “ruby,” “rt,” and “rp” The term ruby refers to a typographic annotation system, meaning “short runs of text alongside the base text, typically used in East Asian documents to indicate pronunciation or to provide a short annotation” (www.w3.org/TR/ruby). Ruby annotation is used in Chinese and Japanese to show the pronunciation of char- acters, as you can see in the example on the left in Figure 2.7. Figure 2.7  Two examples of ruby annotation The markup for ruby annotations contains the elements ruby, rt, and rp. First, the expression that will be explained is specified within a ruby element. The ex- planation is then provided by the following rt element, and in browsers with ruby support the content of this rt element is positioned above the expression described. As you can see in the Beijing example, several words in a row can be annotated this way. Browsers without ruby support (such as Firefox and Opera) display the individual components consecutively, which can make the words more difficult to read. Be- cause it is not necessarily clear that the second word is the explanation of the first word, a visual separation of the two components is required. That is what the rp element is for: It enables adding optional parentheses that will only be displayed if a browser does not know ruby. As you can see in Figure 2.7, Google Chrome can 2.7  Text-Level Semantics—More New Tags 31 interpret ruby and visually separate it. A browser without ruby support would display the examples as 北 běi 京 jīng and HTML N°5 (Web Standard). 2.7.2  The “time” Element The time element represents either a time in the 24-hour-format or a date in the Gregorian calendar with optional time and time-zone components. Its purpose is to give modern date and time specifications in a machine-readable format within an HTML5 document. Vague time references, such in the spring of 2011 or five minutes before the turn of the millennium, are therefore not allowed. To ensure machine readability, we can use the attribute datetime, and its attri- bute value can be specified either as time, date, or a combination of both. The syntax for specifying the time components is clearly defined in the specification and is described in Table 2.1. Table 2.1  The Rules for Timestamps for the “time” Element’s “datetime” Attribute Component Syntax Example Date YYYY-MM-DD 2011-07-13 Time with hours hh:mm 18:28 Time with seconds hh:mm:ss 18:28:05 Time with milliseconds hh:mm:ss.f 18:28:05.2318 Date and time T to join date and time 2011-07-13T18:28 With time zone GMT Z at the end 2011-07-13T18:28:05Z With time zone as offset +mm:hh / -mm:hh 2011-07-13T18:28:05+02:00 The pubdate attribute is a boolean attribute and indicates that the specified date applies to the next level article in the hierarchy, and—if there is none—should be understood as the publication date of the document. If you are using pubdate, there has to be a datetime element as well. If this is not the case, the section be- tween the time element’s start tag and end tag must contain a valid date. Chapter 2—Structure and Semantics for Documents32 NOTE Be careful when writing boolean attributes in HTML5: true or false are not valid attribute values! As soon as the parser discovers the attribute name in boolean attributes, it switches to true. So there are three valid notations for setting a boolean attribute to true: drinks page. em Stress emphasis I must say I adore lemonade. strong Importance This tea is very hot. small Side comments These grapes are made into wine. Alcohol is addictive. s Inaccurate text Price: £4.50 £2.00! cite Titles of works The case Hugo v. Danielle is relevant here. q Quotations The judge said You can drink water from the fish tank but advised against it. dfn Defining instance The term organic food refers to food produced without synthetic chemicals. abbr Abbreviations Organic food in Ireland is certified by the IOFGA. Chapter 2—Structure and Semantics for Documents34 Table 2.2  Usage of Semantic Text Elements (Contd.) Element Purpose Example code Computer code The `fruitdb` program can be used for tracking fruit production. var Variables If there are n fruit in the bowl, at least n÷2 will be ripe. samp Computer output The computer said Unknown error -3. kbd User input Hit F1 to continue. sub Subscripts Water is H2O. sup Superscripts The hydrogen in heavy water is usually 2 H. i Alternative voice Lemonade consists primarily of Citrus limon. b Keywords Take a lemon and squeeze it with a juicer. mark Highlight Elderflower cordial, with one part cordial to ten parts water, stands apart from the rest. ruby, rt, rp Ruby annotations OJ (Orange Juice) bdi Text directional- ity isolation The recommended restaurant is My Juice Café (At The Beach). bdo Text directional- ity formatting The proposal is to write English but in reverse order. “Juice” would become “Juice» span Other In French we call it sirop de sureau. br Line break Simply Orange Juice Company
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.

Nested div elements

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: