Improve company productivity with a Business Account.Sign Up

x
?
Solved

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

Posted on 2014-12-20
10
Medium Priority
?
64 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
0
Comment
Question by:javeedabdul
  • 3
  • 3
  • 2
8 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40511041
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40511258
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
0
 
LVL 6

Author Comment

by:javeedabdul
ID: 40511553
Please provide me example or sample code.. in jquery and CSS for 3 issues..

Thanks
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40511562
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.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40511564
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.
0
 
LVL 6

Author Comment

by:javeedabdul
ID: 40511865
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 ..
0
 
LVL 58

Expert Comment

by:Gary
ID: 40511874
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.
0
 
LVL 6

Author Comment

by:javeedabdul
ID: 40517437
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
0

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

595 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question