New page: placeholder attr description #28511
Conversation
|
Preview URLs Flaws (1)URL:
(comment last updated: 2023-08-26 01:09:46) |
There was a problem hiding this comment.
Take a look at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder which explains the purpose of placeholders well. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholders_are_not_accessible is also better.
| <div class="group"> | ||
| <label>Without placeholder:</label> | ||
| <input type="text" /> | ||
| </div> |
There was a problem hiding this comment.
Use implicit (nested) or explicit (for attribute) labels. The way this is marked up is not valid.
Also, favor semantic HTML, like a paragraph, over non-semantic elements with a class name, which doesn't provide semantics. The added bonus is a paragraph will add margins between adjacent examples.
|
|
||
| ### Result | ||
|
|
||
| {{EmbedLiveSample('Placeholder')}} |
There was a problem hiding this comment.
The first parameter must match the a parent header, in this case the # examples. The two other parameters are width and height. I guessed at 150px.
| {{EmbedLiveSample('Placeholder')}} | |
| {{EmbedLiveSample("Example", "", "150")}} |
| </div> | ||
| <div class="group"> | ||
| <label>With placeholder:</label> | ||
| <input type="text" placeholder="Enter your name" /> |
There was a problem hiding this comment.
This example is the exact opposite of what developers should be doing. A placeholder should be a short hint, not the label. It disappears on data entry. This example is inaccessible (and it's not associated with its label)
|
|
||
| ## See also | ||
|
|
||
| - [HTML attribute: title](/en-US/docs/Web/HTML/Global_attributes/title) |
There was a problem hiding this comment.
| - [HTML attribute: title](/en-US/docs/Web/HTML/Global_attributes/title) | |
| - HTML [`title`](/en-US/docs/Web/HTML/Global_attributes/title) attribute |
| ## See also | ||
|
|
||
| - [HTML attribute: title](/en-US/docs/Web/HTML/Global_attributes/title) | ||
| - [CSS selector `::placeholder`](/en-US/docs/Web/CSS/::placeholder) |
There was a problem hiding this comment.
| - [CSS selector `::placeholder`](/en-US/docs/Web/CSS/::placeholder) | |
| - CSS {{cssxref(":placeholder-shown")}} pseudo-class selector | |
| - CSS {{cssxref("::placeholder")}} pseudo-element selector |
There was a problem hiding this comment.
Can I know why are the links as {{cssxref(":placeholder-shown")}} preferred?
|
|
||
| {{HTMLSidebar}} | ||
|
|
||
| The **`placeholder`** attribute specifies a short hint ,a word or phrase, that describes the expected value of an input. A hint could be a sample value or a short description containing the format of the expected value. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters. |
There was a problem hiding this comment.
Maybe something like this:
The **`placeholder`** defines the text displayed in a form control when the control has no value. The placeholder text provides a brief hint to the user as to the expected type of data that should be entered into the control.
The placeholder should be a word or short phrase that hints at the expected data type, not an explanation or prompt. The placeholder should not be used instead of a {{HTMLElement("label")}}. As the placeholder is not visible if the value of the form control is not null, using `placeholder` instead of a `<label>` for a prompt harms usability and accessibility.
and then moving the whitespace information to a note. the parts about it only appearing when there is no value and disappearing when there is, and not using it to replace a label are more important than the LF or CR. The LF/CR note should not be a copy paste from the spec. instead, explain what happens (the placeholder value gets clipped)
|
|
||
| The **`placeholder`** attribute is supported by the following input types: `{{HTMLElement("input/text", "text")}}`, `{{HTMLElement("input/search", "search")}}`, `{{HTMLElement("input/url", "url")}}`, `{{HTMLElement("input/tel", "tel")}}`, `{{HTMLElement("input/email", "email")}}`, and `{{HTMLElement("input/password", "password")}}`. It is also supported by the `{{HTMLElement("textarea")}}` element. | ||
|
|
||
| > **Note:** For a longer hint, or other advisory text, the title attribute is more appropriate. |
There was a problem hiding this comment.
title attributes are not accessible and not a replacement.They should be using a label.
These mechanisms are very similar but subtly different: the hint given by the control's label is shown at all times; the short hint given in the placeholder attribute is shown before the user enters a value; and the hint in the title attribute is shown when the user requests further help.
|
Thank you for the suggestions @estelle. I will proceed to fix them. |
Fix HTML semantics, EmbedLiveSample, link formatting and added further explanations regarding placeholder attributes
| <form action="/form_action.php"> | ||
| <label for="name">Enter your name:</label> | ||
| <br> | ||
| <input type="tel" id="name" name="name" placeholder="e.g. John Doe"> | ||
| <br><br> | ||
| <input type="submit"> | ||
| </form |
There was a problem hiding this comment.
- the action should be the page itself, as it creates an iframe, and we don't want an error.
- All MDN examples need to show best practices. Therefore the HTML should be semantic. (
<br>is for poetry or addresses), - On MDN, we add a slash at the end of void elements . https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/HTML
- type="tel" produces a numeric keypad on devices with dynamic keyboards
- opt for
<button>for buttons (i don't think we have a rule on that, but buttons are easier to style so seem to be the standard) - John Doe? Consider all our readers when choosing examples; this example is over used and not inclusive.
|
|
||
| {{HTMLSidebar}} | ||
|
|
||
| The **`placeholder`** defines the text displayed in a form control when the control has no value. The placeholder text provides a brief hint to the user as to the expected type of data that should be entered into the control. |
There was a problem hiding this comment.
| The **`placeholder`** defines the text displayed in a form control when the control has no value. The placeholder text provides a brief hint to the user as to the expected type of data that should be entered into the control. | |
| The **`placeholder`** defines the text displayed in a form control when the control has no value. The placeholder text should provide a brief hint to the user as to the expected type of data that should be entered into the control. |
|
|
||
| The **`placeholder`** defines the text displayed in a form control when the control has no value. The placeholder text provides a brief hint to the user as to the expected type of data that should be entered into the control. | ||
|
|
||
| The placeholder should be a word or short phrase that hints at the expected data type, not an explanation or prompt. The placeholder should not be used instead of a {{HTMLElement("label")}}. As the placeholder is not visible if the value of the form control is not null, using `placeholder` instead of a `<label>` for a prompt harms usability and accessibility. |
There was a problem hiding this comment.
| The placeholder should be a word or short phrase that hints at the expected data type, not an explanation or prompt. The placeholder should not be used instead of a {{HTMLElement("label")}}. As the placeholder is not visible if the value of the form control is not null, using `placeholder` instead of a `<label>` for a prompt harms usability and accessibility. | |
| Effective placeholder text includes a word or short phrase that hints at the expected data type, not an explanation or prompt. The placeholder must not be used instead of a {{HTMLElement("label")}}. As the placeholder is not visible if the value of the form control is not null, using `placeholder` instead of a `<label>` for a prompt harms usability and accessibility. |
| > **Note:** The attribute, if specified, must have a value that contains no line feeds (LF) or carriage returns (CR) characters. If the value contains either LF or CR characters, the value will be clipped. | ||
|
|
||
| > **Note:** For a longer hint, or other advisory text, the {{HTMLElement("small")}} should be used. | ||
|
|
||
| > **Warning:** Placeholders should only be used to show an example of the type of data that should be entered into a form; they don't replace a proper label as they are not semantically useful. This harms many users who are either older or people with disabilities. For example, older users may not understand that the placeholder text disappears when they start typing, and users with cognitive impairments may not understand that the placeholder text provides a hint. |
There was a problem hiding this comment.
| > **Note:** The attribute, if specified, must have a value that contains no line feeds (LF) or carriage returns (CR) characters. If the value contains either LF or CR characters, the value will be clipped. | |
| > **Note:** For a longer hint, or other advisory text, the {{HTMLElement("small")}} should be used. | |
| > **Warning:** Placeholders should only be used to show an example of the type of data that should be entered into a form; they don't replace a proper label as they are not semantically useful. This harms many users who are either older or people with disabilities. For example, older users may not understand that the placeholder text disappears when they start typing, and users with cognitive impairments may not understand that the placeholder text provides a hint. | |
| The `placeholder` attribute can't include any line feeds (LF) or carriage returns (CR). If either is included in the value, the placeholder text will be clipped. | |
| ## Accessibility concerns | |
| Placeholders should only be used to show an example of the type of data that should be entered into a form; never as a replacement for a `<label>` element; doing so harms accessibility and user experience. | |
| The `<label>` text is visually and programmatically associated with its corresponding form control. Screen readers don't announce placeholder content by default, but they do announce label content; it's the label that informs assistive technology users what data should be entered in the control. Labels also improve user experience for users of pointing devices: When a user clicks, touches, or taps a `<label>`, focus is moved to the the label's associated form control. | |
| Placeholders can not be relied upon as a replacement for a label even for those not relying on assistive technology. Placeholder text is displayed at lower color contrast than the default form control text. This is by design, as you don't want users to be confused by what is placeholder text versus what is a filled-in form field. However, this lack of contrast can cause issues for low-vision users. Additionally, placeholder text disappears from form fields when users start entering text. If the placeholder text contains instructional information or examples that disappear, it can be confusing to users with cognitive issues and can make the form inaccessible if the placeholder contained the label. |
There was a problem hiding this comment.
To include the small text comment, we should link to the resource explaining how to write effective longer hints and advisory text
There was a problem hiding this comment.
Yay! We did it! Thank you for all your work.
For future PR reviews, let us know when you are ready for a re-review.
To send us a notification, click on the icon next to the reviewer's name in the top right of the page (widescreen) or after the last comment (narrow screen). (The id of the section is #reviewers-select-menu if you can't find it). When the icon is clicked, it changes from an icon with two arrows to a brown dot and the reviewer gets a notification.
|
Thank for your support and guidance @estelle. Yeah next time I'll be sure to send the notification when I'm ready. |
Description
The placeholder attribute is fundamental for input and textarea types in html form elements.
This PR provides documentation for the placeholder attribute and its use cases with relevant examples.
Motivation
To help readers understand placeholder attribute better and saving readers time as well.
Additional details
W3 placeholder attr
W3 schools placeholder attr
Related issues and pull requests
Relates to #28375