Posts

Showing posts from December, 2018

How to Create a Password visibility in JS.

-
Image
Password visibility  Code below here.. Step-1 :-   Create a  HTML Page . 1-  index.html Step-2:-  Write the Code of (Index.html) Page. <!DOCTYPE html> <html> <body> <h2>password visibility:</h2> Password: <input type="password" value="123abc" id="myInput"><br><br> <input type="checkbox" onclick="myFunction()"><img src="download.png" width="2%"> <script> function myFunction() {   var x = document.getElementById("myInput");   if (x.type === "password") {     x.type = "text";   } else {     x.type = "password";   } } </script> </body> </html> Thanks
Post a Comment
Read more

How to Create a Auto Complete Form In Html

-
Image
Auto Complete Form Code below here.. Step-1 :-   Create a  HTML Page . 1-  index.html Step-2:-  Write the Code of (Index.html) Page. <!DOCTYPE html> <html> <head> <meta name=viewport content="width=device-width, initial-scale=1.0"> <link rel=stylesheet type=text/css href=style.css> </head> <body> <h2>Autocomplete</h2> <p>Start typing:</p> <form autocomplete=off action=/action_page.php> <div class=autocomplete style="width:300px;"> <input id=myInput type=text name=myCountry placeholder=Country required> </div> <input type=submit> </form> <script>function autocomplete(c,a){var f;c.addEventListener("input",function(k){var h,g,j,l=this.value;b();if(!l){return false}f=-1;h=document.createElement("DIV");h.setAttribute("id",this.id+"autocomplete-list");h.setAttribute(...
Post a Comment
Read more

How to Create a Multi Step form in HTML.

-
Image
Multi Step Form Code below here.. Step-1 :-   Create a  HTML Page . 1 -  index.html Step-2:-  Write the Code of (Index.html) Page. <!DOCTYPE html> <html> <meta name=viewport content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel=stylesheet> <link rel=stylesheet type=text/css href=style.css> <body> <form id=regForm action="#"> <h1>Register:</h1> <div class=tab>Name: <p><input placeholder="First name..." oninput="this.className = ''" name=fname></p> <p><input placeholder="Last name..." oninput="this.className = ''" name=lname></p> </div> <div class=tab>Contact Info: <p><input placeholder=E-mail... oninput="this.className = ''" name=email></p> <p>...
Post a Comment
Read more

How To Create a Zoom Image in html

-
Image
Zoom Image Code below here.. Step-1 :-   Create a  HTML Page . 1 -  index.html Step-2:-  Write the Code of (Index.html) Page. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <script> function imageZoom(imgID, resultID) {   var img, lens, result, cx, cy;   img = document.getElementById(imgID);   result = document.getElementById(resultID);   lens = document.createElement("DIV");   lens.setAttribute("class", "img-zoom-lens");   img.parentElement.insertBefore(lens, img);   cx = result.offsetWidth / lens.offsetWidth;   cy = result.offsetHeight / lens.offsetHeight;   result.style.backgroundImage = "url('" + img.src + "')";   result.style.backgroundSize = (img.width * cx) + "px " + (...
Post a Comment
Read more

How to Create a Website Footer.

-
Image
Website Footer Code below here.. Step-1:-   Create a  HTML Page . 1 -  index.html Step-2:-  Write the Code of (Index.html) Page. <!DOCTYPE html> <html> <head> <title>Footer</title> <link href=style.css rel=stylesheet type=text/css media=all /> </head> <body> <div class=a2> <div class=a3> <div class="footer one"> <h3> About Us</h3> <p>this company are provide the improved condition on his based the condition check system for every movent. that can be informed the way of the following instraction of the condition. for every movent condition.</p> </div> <div class="footer two"> <h3>Social media</h3> <ul> <li><a class=f href=#><i></i>Facebook</a></li> <li><a class=t href=#><i></i>Twitter</a></li> <li><a class=g href=...
Post a Comment
Read more

How to Create a Image Gallery

-
Image
Image Gallery Code below here.. Step-1 :-   Create a  HTML Page . 1 -  index.html Step-2:-  Write the Code of (Index.html) Page. <!DOCTYPE html> <html> <head> <meta name=viewport content="width=device-width, initial-scale=1"> <link rel=stylesheet type=text/css href=style.css> </head> <body> <div class=main> <h1>MYLOGO.COM</h1> <hr> <h2>PORTFOLIO</h2> <div id=myBtnContainer> <button class="btn active" onclick="filterSelection('all')"> Show all</button> <button class=btn onclick="filterSelection('nature')"> Ppc</button> <button class=btn onclick="filterSelection('cars')"> Shirt</button> <button class=btn onclick="filterSelection('people')"> Seo</button> </div> <div class=row> <div class="column nature"...
Post a Comment
Read more