Simple use of HTML5, simple use of HTML5

Simple use of HTML5, simple use of HTML5
Smart form Color Filter

<Input type = "color" name = "myColor" id = "shitColor"/>

$(function () {

            $("#shitColor").change(function () {

                alert($(this).val());

            });

        });

 

 

 

Date selection box

<H3> date

<Input type = "date" name = "now"/>

 

 

 

Datalist

<H3> datalist

<Input type = "text" name = "txtDataList" list = "nameList"/>

<Datalist id = "nameList">

<Option lable = "lanwhy" value = "Tlanwhy"> lanwhy </option>

<Option lable = "709" value = "T709"> 709 </option>

</Datalist>

 

 

 

Placeholder

<Input type = "text" name = "placeholder" placeholder = "Enter the verification code"/>

 

 

 

Automatic completion

<Input type = "text" autocomplete = "on" name = "demoAutoComplete" list = "autoNames"/>

<Datalist id = "autoNames">

<Option value = "509"> T5 </option>

<Option value = "709 V"> V7 </option>

<Option value = "709X"> X7 </option>

</Datalist>

 

 

 

Intelligent input

Url: <input type = "url" placeholder = "Enter the url" name = "url"/>

Email: <input type = "email" name = "email" placeholder = "Enter your registered email address"/>

Time: <input type = "time" name = "time" required = ""/>

Number: <input type = "number" value = "2" name = "number" step = "3"/>

<Input type = "tel" placeholder = "input phone" name = "phone"/>

 

 

 

 

 

Progressbar

<Progress id = "pbar" value = "30" name = "pbar" max = "100"> <span >%</span> </progress>

<Input type = "button" value = "Set value" onclick = "document. getElementById ('pbar '). value + = 10;"/>

 

<Input form = "frmdemo" type = "text" name = "demoOtherForm" autofocus = "autofocus"/>

 

File operation API

<Input type = "file" multiple = "multiple" name = "fileDemo" id = "fileDemo"/> <br/>

<Input type = "button" value = "Get File Name" id = "btnGetFile"/>

 

 

<Input type = "file" name = "fileDemo" id = "fileDemo"/>

<Input type = "button" value = "readAsDataURL" id = "readAsDataURL" onclick = "showDataByURL ();"/>

<Input type = "button" value = "readAsBinaryString" id = "readAsBinaryString" onclick = "showDataByBinaryString ();"/>

<Input type = "button" value = "readAsText" id = "readAsText" onclick = "showDataByText ();"/>

<Div id = "result">

</Div>

 

<Script type = "text/javascript"> if (typeof FileReader = "undified") {alert ("your old browser cannot work! ");} Function showDataByURL () {var resultFile = document. getElementById ("fileDemo "). files [0]; if (resultFile) {var reader = new window. fileReader (); reader. readAsDataURL (resultFile); reader. onload = function (e) {var urlData = this. result; document. getElementById ("result "). innerHTML + = "

 

 

 

Local Storage

<Input type = "text" name = "demoData" id = "demoData"/> <br/> SessionStorage <input type = "button" value = "add to session cache" onclick = "addDataToSessionStorage (document. getElementById ('demodata '). value); alert ('OK'); "/> & nbsp; localStorage <input type = "button" value = "added to the local cache" onclick = "addDataToLocalStorage (document. getElementById ('demodata '). value); alert ('OK'); "/> & nbsp; <br/> cache data <input type = "button" value = "Refresh local cache data" onclick = "refreshData (); "/> <br/> session cache <table id =" tblSession "> <tr> <th> key </th> <th> Value </th> </tr> </table> <br/> local cache <table id = "tblLocal"> <tr> <th> key </th> <th> Value </th> </tr> </table>

 

<script type="text/javascript">        function addDataToSessionStorage(data) {            window.sessionStorage.setItem(new Date().getTime(), data);            //sessionstorage;        }         function addDataToLocalStorage(data) {            localStorage.setItem(new Date().getTime(), data);        }         function refreshData() {            var tblSession = document.getElementById("tblSession");            var tblLocal = document.getElementById("tblLocal");             tblSession.innerHTML = "";            tblLocal.innerHTML = "";            var i;            var key;            var value;            for (i = 0; i < window.sessionStorage.length; i++) {                key = window.sessionStorage.key(i);                value = window.sessionStorage.getItem(key);                tblSession.innerHTML += "<tr><td>" + key + "</td><td>" + value + "</td></tr>";            }             for (i = 0; i < localStorage.length; i++) {                key = localStorage.key(i);                value = localStorage.getItem(key);                tblLocal.innerHTML += "<tr><td>" + key + "</td><td>" + value + "</td></tr>";            }        }    </script>

 

 

 

Audio and video

<Video controls = "controls">

Html5 video not supported

<Source src = "Small Island la .mp4" type = "video/mp4"/>

</Video> <br/>

<Audio controls loop = "loop">

<Source src = "lanwhy-tears" type = "audio/mpeg"/>

</Audio>

 

 

Local Database

<Table> <tr> <td> User Name: </td> <input type = "text" name = "txtName" id = "txtName" required/> </td> </tr> <td> title: </td> <input type = "text" name = "txtTitle" id = "txtTitle" required/> </td> </tr> <td> message: </td> <input type = "text" name = "txtWords" id = "txtWords" required/> </td> </tr> </table> <input type = "button" value = "save" id = "btnSave"/> 
 
<Script type = "text/javascript"> function initDatabase () {// initialize the database var db = getCurrentDb (); if (! Db) {alert ("your browser does not support HTML5"); return;} db. transaction (function (trans) {trans.exe cuteSql ("create table if not exists Demo (uName text null, title text null, words text null)", [], function (trans, result) {}, function (trans, message) {alert (message) ;}) ;}, function (trans, result) {}, function (trans, message) {}) ;}$ (function () {initDatabase (); $ ("# btnSave "). click (function () {var txtName = $ ("# TxtName "). val (); var txtTitle = $ ("# txtTitle "). val (); var txtWords = $ ("# txtWords "). val (); var db = getCurrentDb (); // insert data into the database. transaction (function (trans) {trans.exe cuteSql ("insert into Demo (uName, title, words) values (?,?,?) ", [TxtName, txtTitle, txtWords], function (ts, data) {}, function (ts, message) {alert (message );});}); showAllTheData () ;}) ;}; function getCurrentDb () {// open the database, or directly connect to the database parameter: Database Name, version, Overview, size var db = openDatabase ("myDb", "1.0", "it's to save demo data! ", 1024*1024); return db;} function showAllTheData () {$ (" # tblData "). empty (); var db = getCurrentDb (); db. transaction (function (trans) {trans.exe cuteSql ("select * from Demo", [], function (ts, data) {if (data) {for (var I = 0; I <data. rows. length; I ++) {appendDataToTable (data. rows. item (I); // json object for retrieving data of a row }}, function (ts, message) {alert (message ); var tst = message;}) ;});} function appendDataToTable (data) {// display data in the table // uName, title, words var txtName = data. uName; var txtTitle = data. title; var words = data. words; var strHtml = ""; strHtml + = "<tr>"; strHtml + = "<td>" + txtName + "</td> "; strHtml + = "<td>" + txtTitle + "</td>"; strHtml + = "<td>" + words + "</td> "; strHtml + = "</tr>"; $ ("# tblData "). append (strHtml) ;}</script>