If you enter a field with a default value in it, your input could be appended, which might be unexpected behavior and even more confusing than a placeholder that vanishes if you enter something else.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I think @codingsafari
meant you should use a real world example of valid input as your placeholder text.
I would say you are both right depending on the circumstances.
So for a search box "Search...." might be applicable (a generic instruction) whereas for a "first name" field it might be better to have "e.g. Mike, Sarah etc." as the placeholder (providing an example of valid input).
For a normal input field, the following is "the ideal" Markup
<labelfor="dob">Your Date of Birth</label><pid="dob-instructions">Please enter your Date of birth in the format DD/MM/YYYY</p><inputid="dob"type="text"aria-describedby="dob-instructions"placeholder="e.g. 17/01/1994">
As the instructions are visible and clear in the <p>, which is correctly read after the label for screen readers using aria-describedby and we have linked the label to the input correctly (so you can click it to focus the input and screen readers get the info) the placeholder is ideal for an example of valid input.
Also as I said in the article, using old school for attributes on the label is more robust due to issues with voice control software and implicit (wrapped) labels!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
If you enter a field with a default value in it, your input could be appended, which might be unexpected behavior and even more confusing than a placeholder that vanishes if you enter something else.
I think @codingsafari meant you should use a real world example of valid input as your placeholder text.
I would say you are both right depending on the circumstances.
So for a search box "Search...." might be applicable (a generic instruction) whereas for a "first name" field it might be better to have "e.g. Mike, Sarah etc." as the placeholder (providing an example of valid input).
For a normal input field, the following is "the ideal" Markup
As the instructions are visible and clear in the
<p>, which is correctly read after the label for screen readers usingaria-describedbyand we have linked the label to the input correctly (so you can click it to focus the input and screen readers get the info) theplaceholderis ideal for an example of valid input.Also as I said in the article, using old school
forattributes on the label is more robust due to issues with voice control software and implicit (wrapped) labels!