Editable search box?

anna

New Member
How can I build a search box that has text i.e. "search" and when you click on it, it becomes editable?

Any suggestions?

Thank you! :D
 

LouTheDesigner

New Member
Here you go:

Code:
<INPUT type="text" value="Search" onfocus="if
(this.value==this.defaultValue) this.value='';">

Hope this helps,

-Lou
 

anna

New Member
Ok, here's an image of what I'm attempting to do.
indexImage.jpg

I built that search box as an image in my fireworks file. Is that the right way to do it? It can't be.

If it is, how do i use the code to make that box editable? If it's not, how do I use that code to build what I am showing you.

Obviously, I'm a front end developer who has been given the task of being a back end developer as well. I'm so lost!
 

LouTheDesigner

New Member
Well the code would have to go in your HTML page. I've never used Fireworks, but doesn't it just generate an image and/or slices? I don't think you can make an image turn into a text field by clicking on it. I think you may just have to play by HTML's rules and generate your search box that way. You could always have the image of the magnifying glass placed directly before the search box like this (http://www.mabel.ca/)

-Lou
 

anna

New Member
Yeah I know the code goes in my html page, Lou, I'm not that stupid. Thanks for your suggestions, I finally got what I wanted.

Thanks again!
 

bcee

New Member
Even better is the HTML5 placeholders. <input type="text" placeholder="Search" />

What Lou posted is a great example that will toggle the placeholder text for all browsers that have JS support.
 
Top