In this 2 part custom HTML form field video lesson we will be demonstrating how to design in the first video, and and then program Elite custom form fields in this second video. Part 1 is here: http://www.developphp.com/view.php?tid=1231
<!-- WATCH THE VIDEO FOR LINE BY LINE DISCUSSION OF THIS CODE -->
<!-- SCRITP BY ADAM KHOURY @ WWWW.DEVELOPPHP.COM -->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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 type="text/javascript" language="javascript">
function fieldSwap(image){
var sf = document.getElementById('sf');
if(sf.value == ""){
sf.style.background = "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>
Creating Custom HTML Form Fields Tutorial Programming Process