HTML5 enhanced form Demo

HTML5 has greatly enhanced table lists, not only adding many form attributes but also adding many types of form elements,
The following example demonstrates all newly added form attributes and form elements.
 
1. <! DOCTYPE html>
2.
3. 4. <link rel = "stylesheet" href = "css/common.css" type = "text/css">
5. <script type = "text/javascript" src = "js/validateform. js"> </script>
6. <meta charset = "UTF-8">
7. <title> HTML5 form DEMO </title>
8. 9.
10. 11.
12. <form method = "post" action = "action1.jsp">
13.
14. <! -- The placeholder attribute of the text box. This attribute can be used for text prompts when the status is not entered. -->
15. Experiment 1: placeholder attribute of the demo text box. This attribute can be used for text prompts when no status is entered. <br>
16. Enter textfield: <input type = "text" placeholder = "Enter the content in the text box"/>
17. <br>
18.
19. <! -- Autofocus: This control automatically obtains the focus when the page is opened. -->
20. Experiment 2: demo autofocus attribute, which enables a control to automatically gain focus <br>
21. Enter the search text: <input type = 'search' autofocus/>
22. <br>
23.
24. <! -- The list attribute can be used with datalist. when the focus is obtained, a prompt can be sent to the user; otherwise, the user can input the content by himself. -->
25. Experiment 3: demo list attribute. This attribute can be used with datalist to notify users of the Focus. <br>
26. input text (with prompt): <input type = "text" name = "charles" list = "charles info">
27. <datalist id = "charles info" stype = "display: none;">
28. <option value = "charles wang"> charles wang </option>
29. <option value = "charles_wang888"> charles_wang888 </option>
30. <option value = "Prince charles"> Prince charles </option>
31. </datalist>
32. <br>
33.
34.
35. </form>
36.
37. 38. 39.
40. <form method = "post" action = "action2.jsp">
41.
42. <! -- The url type indicates the text box of the specific url, which must be the protocol name + address; otherwise, an error is returned. -->
43. input url: <input name = "url1" type = "url" size = "60" value = "http://www.sina.com.cn"/>
44. <br>
45.
46. <! -- The email type indicates the specific email address -->
47. <! -- Note that every element can use pattern to verify the input using regular expressions. For example, I have provided the regular expression of the email address here -->
48. enter email address: <input name = "email1" type = "email" size = "60" value = "charles_wang888@126.com" pattern = "^ [\ w-] + (\. [\ w-] +) * @ [\ w-] + (\. [\ w-] +) + $ "/>
49. <br>
50.
51. <! -- The datetime type can be used to enter the UTC date and time and check the validity. This is supported by Opera and not supported by Firefox. -->
52. select a good time: <input name = "datetime1" type = "datetime" required = "true"/>
53. <br>
54.
55. <! -- For the number type, you can enter a number. You can select the up or down arrow to increase or decrease the number and perform verification. -->
56. input number: <input name = "number1" type = "number" value = "25" min = "10" max = "25" step = "5"/>
57. <br>
58.
59. <! -- Range type: You can enter a value in a certain range, which has the minimum and maximum values. You can set the value. The value is specified using a slide bar. -->
60. Select a value: <input name = "range1" type = "range" value = "25" min = "0" max = "100" step = "5"/>
61. <br>
62.
63. <input type = "submit"/>
64.
65. </form>

From consortium of parallel lines