#2 of HTML and CSS3
Download as PPTX, PDFâ˘1 likeâ˘590 views
The document discusses HTML5 web storage and new input types. It explains how to use local storage and session storage to store data on the client side in HTML5. It also describes different HTML5 input types like email, url, number, range, date pickers, search and color. Code examples are provided to demonstrate how each input type works and validate user input. The document is authored by AhmedYousef and appears to be teaching notes for a course on HTML5 and CSS3.
#2 of HTML and CSS3
- 1. Learn HTML5/CSS3part 2By:-AhmedYousefCo-founder DEVMIX teamBy:AhmedYousef
- 3. HTML5 Web StorageHTMl5 storting data on the Client.
- 4. HTML5 uses twonew objects for storing data on the client :-local Storage :- stores data with no time limit.session Storage :- stores data for one session.By:AhmedYousef
- 5. The local Storage ObjectHow to writeIt (General) :-
- 6. <script type="text/javascript">localStorage.lastname=ÂŤÂ ahmed";document.write("Last name: " + localStorage.lastname);</script>By:AhmedYousef
- 7. Con. The local Storage ObjectExamble:- count # of visits,
- 8. <script type="text/javascript">if (localStorage.pagecount){ localStorage.pagecount=Number(localStorage.pagecount) +1; }else{ localStorage.pagecount=1; }document.write("Visits: " + localStorage.pagecount + " time(s).");</script> <p>Refresh the page to see the counterincrease.</p><p>Close the browser window, and tryagain, and the counterwill continue.</p>By:AhmedYousef
- 9. The session Storage ObjectHow to write It (General) :-
- 11. Con. The session Storage ObjectExamble:- count # of visits,
- 12. <script type="text/javascript">if (sessionStorage.pagecount){ sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; }else{ sessionStorage.pagecount=1; }document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");</script> <p>Refresh the page to see the counter increase.</p><p>Close the browser window, and try again, and the counter has been reset.</p>By:AhmedYousef
- 13. HTML5 Input TypesHTML5 New Input Types:-
- 14. Email.
- 15. Url.
- 16. Number.
- 17. Range.
- 18. Date pickers (date, month, week, time, datetime, datetime-local)
- 19. Search.
- 21. Con. HTML5 Input TypesInput Type â email:-
- 22. It isusedwith input fieldsthatcontain e-mails.
- 23. The value of the email field is automatically validated when the form is submitted.
- 25. Con. HTML5 Input TypesHow E-mail Works??
- 26. <!DOCTYPE HTML><html><body><form action="#" method="get">E-mail: <input type="email" name="user_email" /><br /><input type="submit" /></form></body></html>By:AhmedYousef
- 27. Con. HTML5 Input TypesInput Type â Url:-
- 28. It isusedwith input fieldsthatcontainUrl.
- 29. It is automatically validated when the form is submitted.
- 31. Con. HTML5 Input TypesHow URL Works??<!DOCTYPE HTML><html><body><form action=ÂŤÂ #" method="get">Homepage: <input type="url" name="user_url" /><br /><input type="submit" /></form></body></html>By:AhmedYousef
- 32. Con. HTML5 Input TypesInput Type - number
- 33. It isusedwith input fieldsthatcontainnumeric value.
- 34. set restrictions on what numbers are accepted?!
- 36. Con. HTML5 Input TypesHow NumberWorks??
- 37. <!DOCTYPE HTML><html><body><form action="#" method="get">Points: <input type="number" name="points" min="1" max="10" /><input type="submit" /></form></body></html>By:AhmedYousef
- 38. Con. HTML5 Input TypesInput Type â numberattributs:-By:AhmedYousef
- 39. Con. HTML5 Input TypesInput Type â range:-
- 40. It isusedwith input fieldsthatcontainvalue from a range of numbers.
- 41. set restrictions on what numbers are acceptedď
- 43. Have the sameattribute of Number.By:AhmedYousef
- 44. Con. HTML5 Input TypesHow Range Works??<!DOCTYPE HTML><html><body><form action=" #" method="get">Points: <input type="range" name="points" min="1" max="10" /><input type="submit" /></form></body></html>By:AhmedYousef
- 45. Con. HTML5 Input TypesInput Type - Date Pickers:-
- 46. There are several wayes to write Date:-date - Selects date, month and yearmonth - Selects month and yearweek - Selects week and yeartime - Selects time (hour and minute)datetime - Selects time, date, month and year (UTC time)datetime-local - Selects time, date, month and year (local time)By:AhmedYousef
- 47. Con. HTML5 Input TypesHow Date PickersWorks??<!DOCTYPE HTML><html><body><form action="#" method="get">Date: <input type="date" name="user_date" /><input type="submit" /></form></body></html>By:AhmedYousef
- 48. Con. HTML5 Input TypesInput Type - Date Pickers:-
- 50. Con. HTML5 Input TypesInput Type â search:-
- 51. The search field behaves like a regular text field.
- 52. The search type is used for search fields.
- 54. Con. HTML5 Input TypesHow Search Works??<form><input type="text" name="q" size="15" maxlength="255" value="" placeholder="Search"/><input type="submit" value="GO"/></formBy:AhmedYousef
- 55. Con. HTML5 Input TypesInput Type â color:-
- 56. It isusedwith input fieldsthatcontain a color.
- 57. Hint:-in Operaappearcolorpicker but in chrome support onlyheaxa values.
- 59. Con. HTML5 Input TypesHow Color Works??
- 60. <!DOCTYPE HTML><html><body><form action="#" method="get">Color: <input type="color" name="user_color" /><input type="submit" /></form></body></html>By:AhmedYousef
- 61. Project2Registerform for DEVMIX mini Course HTML5/CSS3By:AhmedYousef