HTML5 Demo ISYS 350
HTML 5 http://www.the-art-of-web.com/html/html5-form-validation/#.UdytIOLn_zc http://diveintohtml5.info/forms.html http://24ways.org/2009/have-a-field-day-with-html5-forms/ http://www.w3.org/TR/html5/forms.html
New INPUT types http://www. w3schools. com/html/html_form_input_types INPUT type="number" INPUT type="range” 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>
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 http://www.w3schools.com/html/html5_geolocation.asp 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>
Google Maps http://www.w3schools.com/graphics/google_maps_intro.asp Maps basic Maps overlays
Static Map Image <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; var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>"; </script> </head> <body> <p>Click the button to get your coordinates.</p> <button onclick="getLocation()">Try It</button> <p id="demo"></p> <br> <div id="mapholder"></div> </body>
Google Maps http://www.w3schools.com/googleapi/default.asp <script src="http://maps.googleapis.com/maps/api/js"></script> <script> var myCenter=new google.maps.LatLng(51.508742,-0.120850); function initialize() { var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker=new google.maps.Marker({position:myCenter,}); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); function newLocation(lat,lng) myCenter=new google.maps.LatLng(lat,lng); initialize(); function getLocation() newlat=parseFloat(window.prompt("Enter Latitude:")); newlng=parseFloat(window.prompt("Enter Longitude:")); newLocation(newlat,newlng); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> <input type="button" value="NewLocation" name="btnClick" onclick="getLocation()"/> </body> </html>