Help adding field box text to Search Form

[Chrisj]

I have this Form code that works successfully to Search a web site (below).

How can I add text in the field/box that will disappear when the field/box is selected to add search keywords to?

Also, how can I widen the field/box?

Any help/examples/suggestions will be appreciated.

<form method="get" action="search.php">
<div id="siteSearch">
Enter Search Words <img src="themes/default/images/arrow-red.png">  
<input type="hidden" name="type" value="videos"/>
<input type="text" name="keyword" id="sbi1" value="" onfocus="if(this.value==this.defaultValue) this.value='';">
<input type="image" align="middle" src="images/search.png"  name="sa" value="Search" id="mySearch"/><br/>
</div>
</form>

Thanks

[Barand]

Are you talking about a 'placeholder'

<input type="text" name="keyword" id="sbi1" size="20" placeholder="Enter keywords" />

[Chrisj]

^{Thanks for your reply, however I tried this and it didn't affect the Form at all:}

 

<input type="text" name="keyword" id="sbi1" size="20" placeholder="Enter keywords" value="" onfocus="if(this.value==this.defaultValue) this.value='';">

^{Any additional help will be appreciated}

[cyberRobot]

Which browser are you using to view the form? Note that the placeholder attribute doesn't work in older browsers like IE9. More information can be found here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

[Chrisj]

Thank you for your reply.

Well, I'm looking for another solution then, if the placeholder doesn't work on all browsers.

Any additional help will be appreciated.

[cyberRobot]

It looks like you already have the JavaScript in place. It could be modified as follows:

<input type="text" name="keyword" id="sbi1" value="default value" onfocus="if(this.value=='default value') this.value='';">

You would just need to change both instances of "default value" to whatever you need the default value to be.

 

 

To answer your other question, the input field can be widened with the "size" attribute. More information about the <input> tag and its attributes can be found here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

[Chrisj]

Thanks for that reply and link. Much appreciated.

 

Can you please tell me how I can change the font color of the text that replaces: "default value" ?

 

Thanks again

[cyberRobot]

You can use CSS to change the color:

https://www.google.com/search?q=html+input+value+color

 

Of course, that will change the color of any text entered in the input filed. If you only want the placeholder text to be a certain color, you can change it dynamically with JavaScript:

https://www.google.com/search?q=javascript+text+color+style

[Chrisj]

Thanks, but with all due respect, I could research this on line via google, but I am hoping to get some specific code help here, on this forum, regarding changing the color of the placeholder text only for this specific line code.

 

Thanks again for any specific help.

[cyberRobot]

The Google links provide examples on how to accomplish what you're asking. If you try it out and it doesn't work, feel free to post again with the updated code.

 

Otherwise, perhaps someone else is willing to write the code for you. I honestly don't have the time. You could also consider posting something in the Freelancing forum.

http://forums.phpfreaks.com/forum/20-php-freelancing/

[.josh]

Thanks, but with all due respect, I could research this on line via google, but I am hoping someone can just write my code for me (for free) so I don't have to make an effort at doing my own work.

 

Thanks again for any specific help.

fixed.

[boompa]

fixed.

And its corollary, "I learn better by example so please provide revised code."