We help IT Professionals succeed at work.

how to get caption in the textbox in css or javascript or php

javeedabdul
javeedabdul asked
on
102 Views
Last Modified: 2016-04-20
Hi Everyone,
I have attached 3 sample images . i would like to understand how to have caption text in the textbox and when cursor inserted in the text box it vanished.

And a search button inside the textbox itself. you may notice ee also using it .(check the image)
further more if the textbox is not filled up correctly you notice(" ! ")inside the textbox.. (check the images attached )

is that done via css or  html or javascript .or php. need example so i can implement

Thanks
how-to-get-this.jpg
how.jpg
-mark-if-its-not-field-correctly-or-left
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
for search input you have a couple options. you could go with html5, but it only works in modern browsers (ie10+) and the appearance will be dictated by the browser.
<input id="mysearch" type="search" />

or, you write it with css and use a background image of a magnifying glass inside the input.

for the exlamation marks, that's called validation, and you can do it clientside via javascript. if you're using jquery, then the validate plugin is the most ubiquitous. the appearance of erroneous fields (incldung the !) is set via css.

if you. eed a more specific solution, please post a link to your page

Author

Commented:
Please provide me example or sample code.. in jquery and CSS for 3 issues..

Thanks
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
there are plenty of examples on the web. you need to find something that is close to what you want to acheive, create a page or a jsfiddle, and share the link. as the asker of the question it is your responsibility to do the leg work.
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
at an absolute minimum, you need to provide a page with input fields, and a reference to jquery, as well as the icons you would like to use fir the search field and the error states. jsfiddle.com makes this very easy.

Author

Commented:
Kyle/Gary thanks

got one issue resolved.
https://mathiasbynens.be/demo/placeholder

search (zoom logo)and its functionality still couldn't work out.
and plus the (!) as mentioned in the pic..

yes i am working on it.. design just finished now i am on the coding side ..
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
The zoom image is just a simple image placed after your input box - it's nothing special
And Kyle has already told you about the jquery validations for indicating a field is wrong.

Author

Commented:
Gary,
I am looking for coding.. thought the zoom is the image thing. i am unable to figure out how to code the background image to work as search query when clicked.

validation is cool too but if i see the code of an existing one or plugin perhaps i can use it on the site

i am unable to post the link as its for personal customer where i am working on design and try to get in coding done.it may take some time to understand once i know how .

appreciate your input
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.