Home » Webmaster Tools and Resources » Software & Scripts » JavaScript » Forms » [*TITLE HERE*]

Highlight Form Elements Script

This JavaScript highlights the field of the form where mouse cursor is located.

Sample:

Insert this code before </head>

<script type="text/javascript">
var highlightcolor="#FFFFD8"

var ns6 = document.getElementById && !document.all
var previous=''
var eventobj

//Regular expression to highlight only form elements
var intended=/INPUT|TEXTAREA|SELECT|OPTION/

//Function to check whether element clicked is form element
function checkel(which)
{
	if ( which.style && intended.test(which.tagName) ) {
		if (ns6 && eventobj.nodeType == 3)
			eventobj = eventobj.parentNode.parentNode
		return true
	}
	else
		return false
}

//Function to highlight form element
function highlight(e)
{
	eventobj = ns6 ? e.target : event.srcElement

	if (previous != '')
	{
		if (checkel(previous))
			previous.style.backgroundColor=''

		previous = eventobj

		if (checkel(eventobj))
			eventobj.style.backgroundColor=highlightcolor
	}
	else {
		if (checkel(eventobj))
			eventobj.style.backgroundColor=highlightcolor
		previous = eventobj
	}
}

</script>

Insert this code before </body>

<form action="#" onclick="highlight(event)">
<table border="0" cellspacing="2" cellpadding="2" align="center">
    <tr>
      <td width="15%">Text 1: </td>
      <td>
        <input type="text" size="40" maxlength="40">
      </td>
    </tr>
    <tr>
      <td class="maintext">Text 2: </td>
      <td>
        <input type="text" size="40" maxlength="40">
      </td>
    </tr>

    <tr>
      <td align="left" valign="top">Text 3:</td>
      <td>
        <textarea cols="40" rows="7"></textarea>
      </td>
    </tr>
    <tr>
      <td>List:</td>
      <td>
        <select name="select" size="1">
          <option>Example List Item 1</option>
          <option>Example List Item 2</option>
          <option>Example List Item 3</option>
          <option>Example List Item 4</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <input type="submit" name="Submit" value="Submit">
      </td>
    </tr>
  </table>
</form>

Modify the table style to fit you website.

Related Resources:

Text 1:
Text 2:
Text 3:
List: