HTML5 Demo ISYS 350
HTML 5 http://www.the-art-of-web.com/html/html5-form-validation/#.UdytIOLn_zc http://diveintohtml5.info/forms.html https://www.w3schools.com/html/html5_intro.asp
New INPUT types http://www. w3schools. com/html/html_form_input_types INPUT type="number" :will check for digits only INPUT type="range” INPUT type=“date” : show a date picker Other types: email, url, tel, etc Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br> Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">
'required' attribute Example: Your Name: <input type="text" name="name" required>
‘placeholder’ Attribute Placeholder attribute which lets us display a prompt or instructions inside the field. Example: Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">
HTML 5 Form Demo <form> Your Name: <input type="text" name="name" required><br> Email Address: <input type="email" name="email" required placeholder="Enter a valid email address"><br> Website: <input type="url" name="website" required pattern="https?://.+"><br> Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br> Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3"><br><br> <input type="submit" value="Submit" name="btnSubmit" /> </form>
Date Control <script> function showDate() { alert(document.getElementById("bday").value); } </script> <body> <h1>Show a date control:</h1> <form> Birthday: <input type="date" id="bday" name="bday"> <input type="button" value="Show Date" onclick="showDate()"> </form>
JavaScript Date Objects https://www.w3schools.com/js/js_dates.asp Creating Date Objects new Date(): creates a new date object with the current date and time Ex. currentDate=new Date; new Date(date string) Ex. myDate=alert(document.getElementById("bday").value; new Date(milliseconds):JavaScript stores dates as number of milliseconds since January 01, 1970, 00:00:00 new Date(year, month, day, hours, minutes, seconds, milliseconds)
Defining Objects <script> function showDate() { alert(document.getElementById("bday").value); myDate=new Date(document.getElementById("bday").value);alert(myDate.toString()); alert(myDate.toString()); currentDate=new Date(); alert(currentDate.toString()); } </script> <body> <h1>Show a date control:</h1> <form> Birthday: <input type="date" id="bday" name="bday"> <input type="button" value="Show Date" onclick="showDate()"> </form>
Date Methods getFullYear() Get the year as a four digit number (yyyy) getMonth() Get the month as a number (0-11) getDate() Get the day as a number (1-31) getHours() Get the hour (0-23) getTime() Get the time (milliseconds since January 1, 1970) getDay() Get the weekday as a number (0-6)
Date Methods Demo Days to July 4th (days between 2 dates) <script> function showDate() { myDate=new Date(document.getElementById("date").value); currentDate=new Date(); daysToJuly4th=(myDate.getTime()-currentDate.getTime())/(24*60*60*1000); alert(daysToJuly4th.toFixed(2) + " days to July 4th"); } </script> <body> <h1>Show a date control:</h1> <form> Birthday: <input type="date" id="date" name="bday"> <input type="button" value="Show Date" onclick="showDate()"> </form>
How old are you? <script> function showDate() { myDate=new Date(document.getElementById("date").value); currentDate=new Date(); yourAge=(currentDate.getTime()-myDate.getTime())/(365*24*60*60*1000); alert("You are: "+yourAge.toFixed(2) + " years old!"); yourAge=currentDate.getFullYear()-myDate.getFullYear(); } </script> <body> <h1>Show a date control:</h1> <form> Birthday: <input type="date" id="date" name="bday"> <input type="button" value="Show Date" onclick="showDate()"> </form>
HTML 5 Form fieldset https://24ways Like a GroupBox http://www.w3schools.com/tags/tag_fieldset.asp Try It Yourself
HTML5 Multimedia: Video,Audio,Youtube,Etc. http://www. w3schools
Adding New Elements to HTML http://www. w3schools <head> <title>Creating an HTML Element</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <myHero>My First Hero</myHero> </body>
HTML5 Geolocation Demo: http://www. w3schools The navigator.geolocation.getCurrentPosition() method returns an object with latitude, longitude and other properties. Latitude Logitude Static map
HTML5 Geolocation Demo <script> var x; function getLocation() { x = document.getElementById("demo"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; </script> </head> <body> <p>Click the button to get your coordinates.</p> <button onclick="getLocation()">Try It</button> <p id="demo"></p>
Displaying the Result in a Map Demo: https://www. w3schools
Google Maps https://www.w3schools.com/graphics/google_maps_intro.asp Maps basic Maps overlays