Do we still need a label element for an input element if we don’t want a text associated with the latter?
I’ve added my code without a label element.
<section id="insider-program">
<h2>Keep up with History!</h2>
<div>Join the Age Insider Program to keep up on all Age of Empires titles.</div>
<form action="https://www.freecodecamp.com/email-submit" method="post"bid="form">
<input type="email" name="email" id="email" placeholder="Your email" required />
<input type="submit" value="Sign Up" id="submit" />
</form>
</section>
There’s really no best practice., it’s really a design thing. You never want your user to be guessing what to insert, otherwise you risk them just leaving page.
One of the main benefits for labels are for checkboxes and radio buttons. Labels also allow a user to click the label themselves which places the cursor inside their respective input box.
Don’t use placeholders as replacements for labels. A placeholder should only ever contain supplementary (nonessential) information, such as format. For example:
Doing something a certain way 100 times doesn’t make it the best way to do it. For that matter, even big companies doing something doesn’t make it the best way to do it.
With that said… have you tried examining the user interactions and viewing the DOM implementation for all of the examples you posted? In the Gmail one for example, no placeholder attribute is used at all. No label element is used either, but they use the aria-label attribute as a substitute (which is valid). Finally, what looks like a placeholder is actually implemented as a div with aria-hidden.
The interaction from the user point of view is also different: the text remains visible (moves above the input) when focused or when user input is present.
See this article for more details about why the naive placeholder implementation is bad from a UX/accessibility point of view:
So you’re comparing “Nielsen Norman Group”'s suggestions to what Google, Twitter, Instagram, Yahoo, Reddit, LinkedIn, Ebay, Netflix, PayPal implement on their own sites?
Come on dude. I’m not even naming all of them…
My entire argument is that it’s a design choice.
How can something be confusing if most people are already using it?
Yes. None of those companies are immune to criticism. Nor am I saying that all of them do it wrong (e.g. in the Gmail case, it looks like the implementation has no problems).
As I mentioned, I’m talking about markup/DOM implementation and user interactions rather than the color or placement of text. Color/placement is generally a pure design choice, though it can also have UX/a11y considerations (e.g. if insufficient contrast is used).
Poor design can propagate due to becoming enshrined in convention. Just look at the US date format (MM/DD/YYYY), or to a lesser extent, any other date format that isn’t YYYY-MM-DD,
And if you return to the original discussion., the OP has one-time field.
So short-term memory (described in your article) is not a problem. The user wouldn’t be updating the field at a later date in time. It’s simply a signup form.
I see nothing wrong with the US date format. Everyone says our country’s formats, measurements are all wrong, yet we have the strongest military, and largest economy in the world.
If you knew US history behind date formats., you might get why the USA stuck with MM/DD/YYYY.
That’s a fair point, but using a label instead of a placeholder is still better for accessibility, and you don’t lose anything by using accessible markup. Note that your Gmail example is also a single field, and they do follow the best practice as far as markup/interaction goes.
Interesting debate going on here
Thanks for examples, @kerafyrm02.
@lionel-rowe, so with accessibility in mind, what would be the correct way to do it without a label text? I don’t see the label text serving any real purpose here:
<section id="insider-program">
<h2>Keep up with History!</h2>
<div>Join the Age Insider Program to keep up on all Age of Empires titles.</div>
<form action="https://www.freecodecamp.com/email-submit" method="post"bid="form">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Your email" required />
<input type="submit" value="Sign Up" id="submit" />
</form>
</section>
Probably the simplest way would be to add an aria-label attribute to the input element, with the same value as the placeholder. With that, you wouldn’t need a separate label element at all (for this specific use case of a single field).
