Dear sir,
I started one page that has one input option. For your kind consideration the page link is: http://dot.kr/Q/input.php
I want to make it in such a way that, if someone starts typing something in the box, the value(name) should be disappeared.
For instance: In case of https://www.sitepoint.com/community when I go for starting a new topic I find the input box “What is the discussion about in one brief sentence?”
You can do that with no scripting at all. It is called the placeholder attribute. Read about it at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
1 Like
It’s actually the placeholder attribute.
1 Like
Edit, placeholder, thank you.
I shouldn’t respond from the phone while watching the news of Britain leaving the EU
2 Likes
I thought you must have been distracted. :-)
Dear sir,
Thanks a lot for your replay! Actually, what I mean is to remove the input value automatically while someone starts typing.
Yes, that would be the placeholder; the browser will typically render that value in some sort of light grey and it will disappear on typing.
1 Like
Dear sir,
Thank you again. In practice, I am very new student in coding. I hardly know the placeholder. Would you please provide me the code!
Sure, it goes like
<input type="text" placeholder="Text goes here..."/>
1 Like
Don’t forget to keep some indication of what the field is for still visible—such as a label. It totally sucks to hide the purpose of the field completely. People often forget what it’s for. Designers like this idea because it seems cool and fancy, but it’s an utterly stupid idea—sol I encourage you not to get sucked in by it.
So by all means use the placeholder attribute if you like, but also have a visible label.
1 Like
I’ll move this thread to the HTML forum, as no scripting is taking place here.
Don’t forget to keep some indication of what the field is for still visible—such as a label. It totally sucks to hide the purpose of the field completely. People often forget what it’s for. Designers like this idea because it seems cool and fancy, but it’s an utterly stupid idea—sol I encourage you not to get sucked in by it.
So by all means use the placeholder attribute if you like, but also have a visible label.
Here is an alternative for reminding users what an input is without a label showing at all times (though it wouldn’t pass for accesibilty). It shows the label anytime it has focus or is moused over while the placeholder isn’t showing. If the placeholder is showing, the label won’t show.
2 Likes
If you omit the while the placeholder isn’t showing part, you might use plain CSS for this… kinda tooltip style. Also, if you’re using opacity instead of the display property it would make for better accessibility (I think). Like
But then again, why not show the labels from the start. ^^
3 Likes
I’ve seen all sort of clever solutions to this—such as just showing labels when the placeholder is absent … But as @m3g4p0p, the question really is What’s the point? This seems like a problem we don’t need to have. 
1 Like
I guess it might make sense if screen real estate is at a premium, such as mobile view.
But I think if things are that cramped the are other design considerations of more concern than whether or not there’s a label…
In fact, having a label could be a good thing especially for mobile as it increases the amount of area available to get focus to an input.
This sounds like a “because we can” and not a “because we should” thing to me.
1 Like
Meh, I think people are just getting so lazy nowadays that a little finger flick is too much effort. In my experience, labeling is even more important on mobiles, as it’s even more distressing to forget what an input is for in that environment—with keyboards jumping around all over the place etc.
Designers get an idea in their head about what looks pretty, and sacrifice all else for that, no matter how impractical and annoying. Even big companies like Apple seem to be powerless to resist the urge to make everything pretty but unusable. (Many of their apps are just so laughably bad I can’t bear to use them at all.)
4 Likes
Hi there ralphm,
perhaps its time to invite “deathshadow” back to “sitepoint”. 
He is a passionate, sweet natured champion of “accessibility”. 
coothead
That’s a nice demo but the problem with this approach is that once the form is completed and a user wants to revise the form before submitting then they have no idea if the data they have entered is the correct data for the form because there are no labels to tell them what the data should have been (unless they then re-focus on every field). They may have inadvertently entered the wrong data into one of the fields especially if like me they spend more time looking at the keyboard than at the screen.
A better approach is to use actual labels by default and then if js is available slide the labels over the input to appear as placeholders and then when focussed just slide them up and above the input. This make the form appear clean on first look and then as you complete it the labels get fixed in place above each input.
However as already mentioned forms are hard enough on mobiles anyway so having more space and a bigger target area via an ever present label is more desirable.
5 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.