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 == ""){
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>