Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsIf the text in an email field disappears when you start typing, it is probably placeholder text—not a persistent label. Add a visible <label> linked to the input. The label stays on screen after entry; a placeholder can remain as an optional example.
Why does the text disappear when you type?
A placeholder is a short hint displayed inside an empty form control. Once the field has a value, that hint disappears. MDN advises, “Do not rely on placeholder text, because it disappears as soon as the user starts typing.” Placeholder text is not a persistent field name, and screen readers do not announce it by default.
As an Amazon Associate I earn from qualifying purchases.
Use a label to tell people what information the field expects. W3C’s WCAG Success Criterion 3.3.2 says that “Labels or instructions are provided when content requires user input.”
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →What HTML keeps the email label visible?
Give the input an id, then set the label’s for attribute to exactly the same value:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" placeholder="[email protected]">Here, “Email” remains visible while the person types. The explicit label association also lets users select the label to activate its control and gives assistive technology the associated label text. The placeholder is only an optional example, not the field’s name.
Keep name="email" if the form submits the value under that name, and use autocomplete="email" when collecting an email address. The placeholder attribute is appropriate for a brief hint about expected data, but not as a replacement for a label. MDN also notes that placeholder text has lower default contrast than ordinary field text.
Where should the label go?
Above or beside the field
A conventional visible label above or beside the input is straightforward to recognize and remains available during entry. Keep it visible rather than relying on a prompt inside the empty field.
Free tools Windows power users keep installed
One-click scans. No signup required.
In a floating-label design
A floating treatment can work if it retains a real label and keeps the label-to-input association intact. Do not hide the label once the field has a value or implement the prompt as placeholder-only text. A visual style by itself does not establish WCAG conformance.
Common fixes that do not solve the problem
- Adding only a placeholder: it still disappears when the field contains text.
- Adding only
titleoraria-label: these do not give sighted users a visible field label. - Mismatching
forandid: the label must point to the intended input, and each input’sidmust be unique on the page. - Putting essential instructions in the placeholder: users may need to refer to accepted formats or other guidance while filling in the field. Put necessary instructions outside the placeholder.
Why use an explicit label association?
W3C WAI’s H44 technique documents using a <label> element to associate text with HTML form controls, including input type="email". It is a documented sufficient technique, not the only possible route to meeting WCAG. For this common HTML implementation, matching for and id values make the relationship clear in the markup.
Quick Recap
Best Value
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
