I Have seen this before in other apps (maybe there is a name) where there is some directions in the input text tag that is blanked out when a user enters data. I have some JS that is doing this nicely but the problem is I don’t want to save the directions if the user enters nothing. I could do this on the back end but I was wondering if there was a better way?
Thanks.
I found placehoder in the HTML5 spec. That works on Chrome but not on Firefox 3.6 or IE 8. Maybe that will be good enough.
There is NOTHING better than handling it on the back end - because the first rule of dealing with forms is ALL user input is suspect – the javascript for example, what if it’s disabled… the HTML5, what if the user’s browser doesn’t support it?
Even if you use the client side verifications, you should ALWAYS have the server side check in place AS WELL… which lately for me has left me saying “then why bother with doing it client side in the first place?” – and the only answer I seem to find is this rampant paranoia people seem to have about page loads.
Thanks deathshadow60. I agree that all data needs to be validated on the back end. It will not be too big an issue to delete the directions before saving. Placeholder will works well but not all that useful until the rest of the browsers catch up.
Jim: the placeholder attribute in HTML5 is indeed not supported in older browsers.
You have a label, correct? Placeholders are not meant to replace labels, but to add some extra nice instruction.
People used to use Javascript for these, and you still can. You can test, with Javascript, if the browser supports placeholders. If the browser supports placeholders, return (do nothing), but if the browser doesn’t, you can add placeholder text to the inputs until the user focusses on them (or whatever your rules are).
Recently I’ve been seeing more and more sites do something weird: the placeholder remains in the input even after I focus on the input, so I start hitting the backspace key thinking I need to remove it. Instead, they remove it once I start typing. I don’t like this, because it’s disorienting compared to the traditional behaviour I’ve been trained on (yeah, we users get trained to expect certain behaviour).
Scripters too lazy to set it onfocus instead of onchange… yeah, that annoys me too… Though honestly I’m getting sick of that cutesy effect – just give me a useful label next to the input and skip the goofy scripted effect garbage.
Amen. And unfortunately, while even the HTML5 spec states placeholders are not to be used in lieu of labels, that’s exactly what people are using them for. Designers think labels are fugly.
On an unrelated note, it seems those complaining about Wikipedia’s blackout are Javascript users. I feel no pity. They allowed it themselves.
I was a little taken aback by them letting the normal page load, then using a javascript redirect ‘onload’ – talk about a half-assed way to do it. I’d say I was shocked, but this is the same site that pisses on it’s usability by turning off underlines in flow text links so…
Designers… You mean PSD jockeys not qualified to be designing jack ******* **** for the Internet… the people who wouldn’t know usability from the hole in the Adobe DVD, think it’s ok to use megabyte+ images on a page, and cannot grasp even the simplest of concepts like “not everyone has the same size screen, same size window on the same size screen, same default fonts, or even the same font renderer”, right?
…and yes mods, I self censored
Yup.
Read the comments here (needs JS to get plain text, go figure). People didn’t like the focus outline because it was ugly, so it was removed.