⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Custom HTML Form Input Programming Tutorial

Published : November 16, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
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>
▲