Hosting Solutions
mobile_logo Table of Contents

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>

HTML Videos

Form Components

Color Picker Input TutorialSlider Tutorial Javascript Function ProgrammingNumeric Stepper Form Input TutorialDate Time Form Input Type TutorialProgress Bar Progressive Javascript Events ProcessingAutocomplete Text Input Datalist List Attribute TutorialAutofocus Form Input Attribute TutorialPlaceholder Form Field Input Attribute TutorialRequired Form Field Input Attribute Tutorialfieldset and legend Elements Form Area Containers TutorialCustom HTML Form Input Programming Tutorial