[willpower935]

Hey guys,

It's been bugging me lately whenever I see forms that have rollover capabilities . (Such as Adobe) This is b/c I have no idea on how to do it, I've tried searching Google, but nothing comes up. Also, how is it possible to have a form's text disappear when you click it e.i.(www.adobe.com). I'm sure this is just another stupid question, but I've been DYING to know .

Thanks,
Will

[HaXXor's]

It a input field with javascript function that change the value of the field when you click on the field.

<input name="search_bar" type="text" id="search_bar" maxlength="100"  onClick="if(document.getElementById('search_bar').value=='Search...') document.getElementById('search_bar').value='';" onblur="if(document.getElementById('search_bar').value=='') document.getElementById('search_bar').value='Search...';" value="Search..."/>

You can make function with javascript and call it on a particular event like : onDblClick, onFocus, onMouseOver, onBlur, etc...

hope you understand my poor english

[seen.to]

To clear the default value add this to your head (or an external js):

function clearDefault(el) {
  if (el.defaultValue==el.value) el.value = ""
}

And add this to your text input:

onfocus="clearDefault(this)"

This will clear whatever is set as the 'value' of your text input field. You'll also want to add some validation to ensure that the form isn't submitted with the default value present or with a null value.

Not quite sure what you mean by the mouseover effect but if you mean the submit button then it's a real simple CSS styling.

[HaXXor's]

I can agreed more with seen.to. Nice function. Small and effective

[willpower935]

Both of these are Great! Thank you so much.

How would I accomplish making the form's outline color change, like with a rollover.

The rollover is meant by this, look at Adobe's search bar: Adobe

[WEWT]

You'd change that with your CSS, for example.

input {
border: 1px solid #000;
}

input:hover {
border: 1px solid #FFFF00;
}

[pgo]

Yeah, they're using the CSS wewt posted. Notice how it doesn't work in IE6.

[willpower935]

Thank you guys so much, I finally replicated their search bar and, more importantly, I understand it! I thought I'd post the code I used for anyone else who had this same problem:

"head of my HTML doc:"

<script>
//Clearing the search form's text
function clearForm(searchForm)
{
if(searchForm.defaultValue == searchForm.value)
{
searchForm.value = "";
}
}

//Setting the form's text back to default
function setToDefault(searchForm)
{
if(searchForm.value == "")
{
searchForm.value = searchForm.defaultValue;
}
}
</script>

"HTML body:"

<input name="searchForm" type = "text" id="searchForm" onfocus = "clearForm(this)" onblur = "setToDefault(this)" value = "Search for..." maxlength="100"/>

"External CSS:"

#searchForm {
border: 1px solid #CCCCCC;
padding-left: 3px;
}
#searchForm:focus,
#searchForm:hover {
border-color: #000000;
}

Thank You!