Web Development Training System

Custom HTML Form Input Programming Tutorial

In this 2 part custom HTML form field video lesson we will be demonstrating how to design in the first video, then program custom form fields in this second video. <!DOCTYPE html> <html> <head> <style> body {background-color:#5B5B5B; margin:20px;} #myFormContainer{ width:270px; height:32px; background-image: url("images/sfFocus.png"); background-repeat: no-repeat; background-position: left top; } #myForm{ background-image: url("images/sbOver.png"); background-repeat: no-repeat; } #sf{ background:url(images/sfNorm.png); background-repeat: no-repeat; border:none; height:30px; width:230px; outline:none; background-color:transparent; color:#CCC; padding-right:7px; padding-left:7px; } #searchFieldBox{float:left; width:240px;} #searchBtnBox{float:left; width:27px;} </style> <script> function fieldSwap(image){ var sf = document.getElementById('sf'); if(sf.value == ""){ = "url(images/"+image+") no-repeat"; } } function buttonSwap(image){ var sb = document.getElementById('sb'); sb.src = "images/"+image; } </script> </head> <body> <h2>Custom Form Components Tutorial</h2> <div id="myFormContainer"> <form id="myForm" action="parser.php" method="post"> <div id="searchFieldBox"> <input type="text" id="sf" name="query" onfocus="fieldSwap('sfFocus.png')" onblur="fieldSwap('sfNorm.png')"> </div> <div id="searchBtnBox"> <input type="image" src="images/sbNorm.png" name="submit" id="sb" alt="Btn" onmouseover="buttonSwap('sbOver.png')" onmouseout="buttonSwap('sbNorm.png')"> </div> </form> </div> </body> </html>
Table of Contents Terms Of Use Subscribe Top ↑