HTML5 Guidelines for Web Developers
46 Chapter 3—Intelligent Forms ment with the ID minMaxDate jumps forward seven days each time. Opera only displays those days in ...
3.3 New Elements 47 When using regular expressions with the pattern attribute you need to remem- ber that the search pattern alw ...
48 Chapter 3—Intelligent Forms Using the meter element is very simple: You set the desired value via the value attribute; all ot ...
3.3 New Elements 49 The HTML code for this example contains the still empty elements, which are filled via JavaScript: Text % o ...
50 Chapter 3—Intelligent Forms The rest of our example has nothing to do with new HTML5 techniques, but we still want to explain ...
3.3 New Elements 51 var cnt = 0; for(var i=0; i<ip.length; i++) { if (ip[i].checked == true) { cnt++; } } pb.value = cnt; } T ...
52 Chapter 3—Intelligent Forms For the option elements within the datalist, you just need to fill the value at- tribute. Further ...
3.3 New Elements 53 The onchange event within the select element inserts the current text of the se- lection menu into the text ...
54 Chapter 3—Intelligent Forms The following short HTML document creates a keygen button: <!DOCTYPE html> <meta charset ...
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 ...
56 Chapter 3—Intelligent Forms To test the output element, we will program one of these little shopping carts for three differen ...
3.4 Client-Side Form Validation 57 function updateSum() { var ips = document.getElementsByTagName("input"); var sum = 0; var pro ...
58 Chapter 3—Intelligent Forms Figure 3.12 shows what will happen if you submit the form in the preceding list- ing without spec ...
3.4 Client-Side Form Validation 59 WebKit-based browsers, such as Google Chrome or Safari, currently support the validation but ...
60 Chapter 3—Intelligent Forms <input type=email name=email onchange="this.checkValidity();"> If you enter an invalid e-ma ...
3.4 Client-Side Form Validation 61 Figure 3.14 Opera displays an error message after an incorrect time input (in this case a vio ...
62 Chapter 3—Intelligent Forms ensures that the browser will check for a valid e-mail address. Additionally, we want to specific ...
3.4 Client-Side Form Validation 63 3.4.4 Summary of Validity Checks Table 3.3 shows a summary of all input attributes and validi ...
64 Chapter 3—Intelligent Forms <p><input type=submit formnovalidate value="Save" name=save id=save> The following ex ...
3.5 Example: A Support Form 65 The HTML code for the form starts by loading an external JavaScript file and the already familiar ...
«
1
2
3
4
5
6
7
8
9
10
»
Free download pdf