Hello:

I am having a problem trying to find the correct syntax to this form. 
I wish to place the text "Search" within the box contained on this
page:

http://www.respree.com/scstore/sitepages/formtest.html

When the user clicks on the box (its a search box), the word "Search"
will then disappear, allowing the user to enter the search phrase.

Here is the HTML that controls this page.  Please tell me the correct
syntax to do this.  Thanks in advance for your help.  HTML appears
below.

<FORM STYLE="margin-bottom:0;"
ACTION="/cgi-bin/SoftCart.exe/cgi-bin/pdbsearch.pl%%softcart.session%%"
METHOD="POST">
<DIV ALIGN="left"> 
<INPUT TYPE="hidden" NAME="addtocart_page"
VALUE="/scstore/scpages/showcart.html">
<INPUT TYPE="hidden" NAME="results_page"
VALUE="/../pagegen/sresults.html">
<INPUT TYPE="hidden" NAME="max_results" VALUE="12">
<INPUT TYPE="text" SIZE="20" NAME="keywords">
<INPUT TYPE="image" img SRC="/scstore/images/btn-go3.gif" HEIGHT="14"
BORDER="0" VALUE="Search" WIDTH="21" ALIGN="MIDDLE" NAME="image">
<!-- END HEADER -->
<!-- Search results will be inserted below this line -->
<!-- BEGIN FOOTNOTE -->
</DIV>
</FORM>

---

Request for Question Clarification by gan-ga on 22 Nov 2002 15:52 PST

Hello respree,

I will be able to help you with this,
if you are happy to use some javascript
code which I will give you, in addition to
your HTML.

Are you happy for me to proceed along these lines
as an answer?

Best regards,

gan.

---

Clarification of Question by respree-ga on 22 Nov 2002 16:17 PST

Java wouldn't be my first choice. I'd prefer an HTML solution, if there is one.

---

Request for Question Clarification by gan-ga on 22 Nov 2002 16:36 PST

Hi again respree.

It is possible to use pure HTML to insert
the text into the input box very easily,
however as far as I am aware, some form
of scripting would be necessary in order to
clear the text upon the user clicking on
the box.

The script used is extremely short and simple,
and fits easily within your existing HTML.

You will want to wait some time for other possible
responses addressing the issue in pure HTML,
however I will be happy to post and demonstrate
working code for you, as an answer, if required.

best regards,

gan.

---

Request for Question Clarification by leep-ga on 22 Nov 2002 16:52 PST

respree, the solution mentioned involves JavaScript not Java.  Those
two are much different and aren't the same thing.  The JavaScript
method involves putting in a few lines of the scripting code on your
page.

---

Clarification of Question by respree-ga on 22 Nov 2002 17:02 PST

Yes, thank you for the clarification (Java vs Javascript).  I realized
my typo (and the difference) after I hit the Post Clarification button
(but then of course it was too late).

I guess if there is no HTML solution at current, the JavaScript will
do.  This will eventually run on a live page that actually already has
Javascript running (which is the reason I was inclined to prefer an
HTML solution. Does this present a problem?.  If not, the JavaScript
solution is acceptable.  Please paste the code in your response.

Thanks for your help!

Hi respree.

Here is the code you will need in order to
insert the text 'Search' into your input
box, and have it clear when a user clicks
on the box:

<INPUT id="box" TYPE="text" SIZE="20" NAME="keywords" value="Search"
onClick="document.forms[0].box.value=''">

This is to replace the same line number 21, that you already
have in your example source code at:
http://www.respree.com/scstore/sitepages/formtest.html 

(Corresponding to line 10 in your code posted in your 
question, here.)

The id= statement attaches an identifying label to your
input box, calling it 'box'. If the existing javascript
on your page already uses this identifier, you can try a
different one. 'box2', 'datain', would be valid choices.

Just alter the label to reflect the identifier you use, in
the statement later on in that line as well, that says:
document.forms[0].box.value

Occasionally code posts in such a way as to introduce errors,
so you can see a working demonstration of your code at the
following page also:
http://www.beginnerprogrammer.com/respree.html

(use your browser's 'view > source' menu to view the
source code.)


Search Strategy:
Existing knowledge


I hope this solution allows you to move on with the design
of your page. If you have any queries, please do not hesitate
to use the 'request answer clarification' feature before
rating my answer - I will be pleased to assist you further.

Best regards,

gan.

---

Request for Answer Clarification by respree-ga on 24 Nov 2002 10:46 PST

Thanks, once again.  I understand completely about my (BTW) question
to be out side the scope of the original question and will try to
refrain from similar questions in the future.

I'm pleased to be a part of the program.  For the most part, I have
found virtually all the researchers to be of top notch quality and
'beyond the call of duty' helpful and professional (even when handling
the $2 "What is the maning of life" question, where I felt the poster
was intentionally trying to provoke the researchers into saying
something they would later regret).  Google has screened its
candidates well and, in my view, upholds its reputation for being the
best.

---

Clarification of Answer by gan-ga on 25 Nov 2002 05:47 PST

Thank you for your kind comments, respree.

As you can see, there exists more than one
way to accomplish your aim - this is a
recurring theme in programming.

Looking forward to helping you
again in the future, should you need us,

Best regards,

gan.

Awesome!  That worked wonderfully!  Thank you so much.

I would modify the code for best results as noted below...

<INPUT TYPE="text" SIZE="20" NAME="keywords" value="Search"
onclick="if(this.value=='Search')this.value=''"
onblur="if(this.value=='')this.value='Search'">

This solution doesn't bother with the ID attribute and just uses the
simpler "this" attribute instead. It preforms a check to make sure the
text is still the default value before reseting it (so that one can
enter terms, click elsewhere on the page and return) and it also
resets it to "Search" if the box is left empty :).

Seems rather bothersome to have it keep coming back - especially if
you lose focus on *accident*. It works great, just seems a tad bit
like overkill.

It seems smart to have an id attribute, in case you want to add the
same effect to other forms etc... It will help you keep track of
everything easier.

One thing is for certain - the search logs for this would show alot of
searches for 'Search' :-)

Good comment!

Thank you darthcow for your comment.  However, it doesn't work exactly
how I imagined.  When you click into the box, I'd like the text to
disappear so the user is free to type their search term.  Your
solution forces the user to manually erase the text "Search" before
entering their search term, which I think is bit cumbersome. 
Additional comments/solutions are welcome. Thanks.

Respree - be sure that you've edited the "Search" value withing the
javascript to exactly the default value of the input box. So looking
at the example on your site, the code would actually look like this:

<input type="text" size="20" name="keywords" value="Search Products" 
onclick="if(this.value=='Search Products')this.value=''" 
onblur="if(this.value=='')this.value='Search Products'"> 

Just to make sure I hadn't made a silly mistake in my code, I put it
on a test page and it worked just as I anticipated it (in the IE 6
that I'm running at least, though I don't see why that would be
different for other browsers).

Darthcow:  My apologies and thanks.  I made a silly typo, when I
altered the text from "Search" to "Search Products," which lead me to
the wrong conclusion.

Both yours and gan's solution seem to work equally well.  I'm not sure
I understand your explanation about how yours performs a check before
resetting it.  When you say click elsewhere on the page and return, do
you mean return to that page using the back button?  If so, wouldn't
the search term be there anyway, since the back button would display a
cached page (with the search term entered) just before the click away
from it?

If you'd be so kind to explain. Thank you for your help.

respree,

The input area *checks itself* for the word Search in your case. If
the word Search is present when the person clicks inside the search
box, it will be replaced with the value of nothing :

if(this.value=='Search')this.value=''  <-- Note the value of '' or
nothing

He's actually manipulating the value of the form value name :

Reference to the value -->    value="Search Products"


In your case you already know that the value on initial page load will
be 'Search'. You have no need to use a conditional statement (if) to
check the form value. He was just showing another possibility, and it
works great.


There's probably quite a few more ways you could do it as well :

<INPUT NAME="respree" value="Search" TYPE="text" SIZE="20"
NAME="keywords" onFocus="respree.innerText=''">


<INPUT TYPE="text" SIZE="20" NAME="keywords" value="Search"
onFocus="this.value=''" >

Both of those work too :-) Choices, choices, choices....

Thanks sgtcory for the clarification and additional choices.  BTW, do
you happen to know if there is a way to control the font color and
font type (and size) in these solutions for the text "Search
Products?"  I tried using the obvious font tags, but it didn't seem to
work.  Maybe my placement was wrong.

Hello respree -

You would typically want to use CSS to control the layout of the fonts
within the form.

<INPUT style="color: #FF0000; font-family: arial" NAME="respree"
value="Search" TYPE="text" SIZE="20"
NAME="keywords" onFocus="respree.innerText=''">

Where the added part is :

style="color: #FF0000; font-family: arial"

To explain this would take a *little* more than a paragraph. You could
pose another question to the researchers to get a full explanation. (I
would do my best to ensure I answered your question)

I hope you understand that I am not trying to draw you in for another
question, although that would be great.

Our guidelines dictate that we should be as helpful as possible, and
at the same time keep the answer at hand in focus. I hope you can
relate - as I think you are one of the better customers of the
program. Thanks for all the questions!

SgtCory

Ok, let me explain why I think my code excerpt is the best by
explaining how it works line by line.

<input type="text" size="20" name="keywords" value="Search Products"

The part you already had.

onfocus="if(this.value=='Search Products')this.value=''"  

This performs a check to see if the value of the field is "Search
Products" when the box is selected (note that I changed the code from
onclick so that it also works when the box is tabbed to :)). Since
that's the default value when the page is loaded, you want clicking on
it to clear the box. However, if it isn't the default value, then it
means that the user has changed the value of the input box. It could
be an annoyance if somebody enters some text, then the input box uses
focus (e.g. the user goes to another window) and when they try to
enter the rest of the text, it clears the text they tried to svae.

onblur="if(this.value=='')this.value='Search Products'">  

What this checks for is "onblur", when the user leaves the input box
to click on something else. If someone clicks on the search box
(thereby clearing it) and then clicks away, it's best to have the box
return to say "Search" so the purpose of it is known. The if check is
there to make sure the box is blank before replacing it with "Search",
because otherwise the user could be saving it for something. I don't
see any reason why not to use this code because the box still becomes
blank again when it's clicked on if the value is "Search".

Play around with clicking on the text box and leaving, and entering
text in it, and you'll understand how it works.

sgtcory has some interesting alternate solutions, but I would
recommend against using the one repeated below because the innerText
attribute has limited compatability with older browsers (most notably
Netscape 4.x):

<INPUT NAME="respree" value="Search" TYPE="text" SIZE="20"
NAME="keywords" onFocus="respree.innerText=''">

A decent guide to style properties, can be found here -
http://www.htmlhelp.com/reference/css/properties.html

You can also try a google search for CSS (cascading style sheets) or
style sheets.

Style sheets can be a useful part of web design, but I would recommend
against relying on them too heavilly because of limited support in
older browser (again, mainly netscape 4.x). Just using it to
manipulate the way a form item looks is fine though.

Great comments darthcow! I really respect alot of the information you
have been giving.

Of further note with the Netscape issues -

I knew this existed, but the truth is in the numbers. Less than 1
percent of all visitors to *most* sites use this browser version or
under. I'm not saying we should count them out at all, but we
shouldn't design a site based around them either.

I think this is indeed where style sheets are effective. You can have
one style for IE, and one for Netscape.

Again - thanks for the comments. You show some impressive internet
skills.

Respree - I really like your site. I'm impressed with the overall
theme and layout. Keep it up!

SgtCory

That's OK... I hate Netscape too :D. If I could, I would ignore it,
but you always know that some poor fool is still using it.
Fortunately, at least Netscape can display most pages (just don't rely
completely on CSS for everything possible or it will be completely
unreadable in Netscape).

Researchers:  Thanks so much for your comments.  Your helpfulness and
willingness to share your knowledge with the 'technically challenged'
is appreciated. I wasn't expecting my $5 to get so much mileage, but
am happy I did.