Jump to content


Photo

Help adding field box text to Search Form


  • Please log in to reply
11 replies to this topic

#1 Chrisj

Chrisj

    Advanced Member

  • Members
  • PipPipPip
  • 217 posts

Posted 28 October 2013 - 05:03 PM

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">&nbsp;&nbsp;
<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



#2 Barand

Barand

    Sen . ( ile || sei )

  • Gurus
  • 14,420 posts
  • LocationCheshire, UK

Posted 28 October 2013 - 05:09 PM

Are you talking about a 'placeholder'

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

moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts
|baaSelect| generate js and php code for dynamic linked dropdowns

 


#3 Chrisj

Chrisj

    Advanced Member

  • Members
  • PipPipPip
  • 217 posts

Posted 29 October 2013 - 08:48 AM

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



#4 cyberRobot

cyberRobot

    Advanced Member

  • Gurus
  • 1,758 posts

Posted 29 October 2013 - 09:27 AM

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.mo...L/Element/Input


Blogging about PHP and other web development topics at ScorpBytes.com

#5 Chrisj

Chrisj

    Advanced Member

  • Members
  • PipPipPip
  • 217 posts

Posted 29 October 2013 - 10:54 AM

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.



#6 cyberRobot

cyberRobot

    Advanced Member

  • Gurus
  • 1,758 posts

Posted 29 October 2013 - 12:21 PM

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.mo...L/Element/Input


Blogging about PHP and other web development topics at ScorpBytes.com

#7 Chrisj

Chrisj

    Advanced Member

  • Members
  • PipPipPip
  • 217 posts

Posted 31 October 2013 - 12:17 PM

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



#8 cyberRobot

cyberRobot

    Advanced Member

  • Gurus
  • 1,758 posts

Posted 31 October 2013 - 12:48 PM

You can use CSS to change the color:

https://www.google.c...put 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.c...ext color style


Blogging about PHP and other web development topics at ScorpBytes.com

#9 Chrisj

Chrisj

    Advanced Member

  • Members
  • PipPipPip
  • 217 posts

Posted 31 October 2013 - 12:58 PM

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.



#10 cyberRobot

cyberRobot

    Advanced Member

  • Gurus
  • 1,758 posts

Posted 31 October 2013 - 01:13 PM

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.phpfre...hp-freelancing/


Blogging about PHP and other web development topics at ScorpBytes.com

#11 .josh

.josh

    .josh

  • Staff Alumni
  • 14,830 posts

Posted 31 October 2013 - 01:29 PM

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.

Did I help you? Feeling generous? Donate to me! || Donate to phpfreaks!
Please, take the time and do some research and find out how much it would have cost you to get your help from a decent paid-for source. A "roll-of-the-dice" freelancer will charge you $5-$15/hr. A decent entry level freelancer will charge you around $15-30/hr. A professional will charge you anywhere from $50-$100/hr. An agency will charge anywhere from $100-$250/hr. Think about all this when soliciting for help here. Think about how much money you are making from the work you are asking for help on. No, we do not expect you to pay for the help given here, but donating a few bucks is a fraction of the cost of what you would have paid, shows your appreciation, helps motivate people to keep offering help without the pricetag, and helps make this a higher quality free-help community :)

#12 boompa

boompa

    Advanced Member

  • Members
  • PipPipPip
  • 251 posts
  • LocationMassachusetts

Posted 01 November 2013 - 07:29 AM

fixed.


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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com