25
Learn HTML5/CSS3 part 2 By:-AhmedYousef Co-founder DEVMIX team By:AhmedYousef
| Date post: | 12-May-2015 |
| Category: |
Technology |
| Upload: | ahmed-yousef |
| View: | 1,201 times |
| Download: | 0 times |
Learn HTML5/CSS3part 2
By:-AhmedYousefCo-founder DEVMIX team
By:AhmedYousef
Project 1
Surprise
By:AhmedYousef
HTML5 Web Storage
HTMl5 storting data on the Client.HTML5 uses two new objects for storing
data on the client :-1. local Storage :- stores data with no time limit.2. session Storage :- stores data for one session.
By:AhmedYousef
The local Storage ObjectHow to write It (General) :-
<script type="text/javascript">localStorage.lastname=« ahmed";document.write("Last name: " + localStorage.lastname);</script>
By:AhmedYousef
Con. The local Storage Object
Examble:- count # of visits, <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 counter increase.</p><p>Close the browser window, and try again, and the counter will continue.</p>
By:AhmedYousef
The session Storage ObjectHow to write It (General) :-
<script type="text/javascript">sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);</script>
By:AhmedYousef
Con. The session Storage Object Examble:- count # of visits, <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
HTML5 Input TypesHTML5 New Input Types:- Email. Url. Number. Range. Date pickers (date, month, week, time, datetime,
datetime-local) Search. Color.
By:AhmedYousef
Con. HTML5 Input TypesInput Type – email:- It is used with input fields that contain e-mails. The value of the email field is automatically validated
when the form is submitted.Browser Support:-
Input type IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
By:AhmedYousef
Con. HTML5 Input TypesHow E-mail Works?? <!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
Con. HTML5 Input TypesInput Type – Url :- It is used with input fields that contain Url. It is automatically validated when the form is submitted.Browser Support:-
Input type IE Firefox Opera Chrome Safariurl No 4.0 9.0 10.0 No
By:AhmedYousef
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
Con. HTML5 Input TypesInput Type - number It is used with input fields that contain numeric value. set restrictions on what numbers are accepted?!Browser Support:-
Input type IE Firefox Opera Chrome Safarinumber No No 9.0 7.0 No
By:AhmedYousef
Con. HTML5 Input TypesHow Number Works?? <!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
Con. HTML5 Input TypesInput Type – number attributs:-
Attribute Valuenumber max
number min
number step
number value
By:AhmedYousef
Con. HTML5 Input TypesInput Type – range:- It is used with input fields that contain value from a
range of numbers.set restrictions on what numbers are acceptedBrowser Support:-
Have the same attribute of Number.
Input type IE Firefox Opera Chrome Safarirange No No 9.0 4.0 4.0
By:AhmedYousef
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
Con. HTML5 Input TypesInput Type - Date Pickers:- There are several wayes to write Date:-I. date - Selects date, month and yearII. month - Selects month and yearIII. week - Selects week and yearIV. time - Selects time (hour and minute)V. datetime - Selects time, date, month and year (UTC time)VI. datetime-local - Selects time, date, month and year (local time)
By:AhmedYousef
Con. HTML5 Input TypesHow Date Pickers Works??<!DOCTYPE HTML><html><body><form action="#" method="get">Date: <input type="date" name="user_date" /><input type="submit" /></form></body></html>
By:AhmedYousef
Con. HTML5 Input Types
Input Type - Date Pickers:-
Browser Support:-
Input type IE Firefox Opera Chrome SafariDate pickers No No 9.0 10.0 No
By:AhmedYousef
Con. HTML5 Input TypesInput Type – search:- The search field behaves like a regular text field. The search type is used for search fields.Browser Support:-
Input type IE Firefox Opera Chrome Safarisearch No 4.0 11.0 10.0 No
By:AhmedYousef
Con. HTML5 Input Types
• How Search Works?? <form><input type="text" name="q" size="15" maxlength="255" value="" placeholder="Search"/> <input type="submit" value="GO"/>
</form
By:AhmedYousef
Con. HTML5 Input TypesInput Type – color:-It is used with input fields that contain a color.Hint:-in Opera appear color picker but in chrome
support only heaxa values. Browser Support:-
Input type IE Firefox Opera Chrome Safaricolor No No 11.0 12 No
By:AhmedYousef
Con. HTML5 Input TypesHow Color Works?? <!DOCTYPE HTML><html><body><form action="#" method="get">Color: <input type="color" name="user_color" /><input type="submit" /></form></body></html>
By:AhmedYousef
Project2
Register form for DEVMIX mini Course HTML5/CSS3
By:AhmedYousef
