From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/attributes%2Fplaceholder.html | 137 +++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 devdocs/html/attributes%2Fplaceholder.html (limited to 'devdocs/html/attributes%2Fplaceholder.html') diff --git a/devdocs/html/attributes%2Fplaceholder.html b/devdocs/html/attributes%2Fplaceholder.html new file mode 100644 index 00000000..d5cb64e8 --- /dev/null +++ b/devdocs/html/attributes%2Fplaceholder.html @@ -0,0 +1,137 @@ +

HTML attribute: placeholder

+

The placeholder attribute 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.

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 <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.

The placeholder attribute is supported by the following input types: text, search, url, tel, email, and password. It is also supported by the <textarea> element. The example below shows the placeholder attribute in use to explain the expected format of an input field.

Note: 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.

+
+

Example

+ +

HTML

+
+

html

+
<form action="/en-US/docs/Web/HTML/Attributes/placeholder">
+  <label for="name">Enter your name:</label>
+  <input type="text" id="name" name="name" placeholder="e.g. Mike Shinoda" />
+  <button type="submit">Submit</button>
+</form>
+
+
+

Result

+
+ + +
+

Specifications

+
+ + +
Specification
HTML Standard
# attr-input-placeholder
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
placeholder412410≤12.15≤37184≤12.151.0
line_breaks3612591023No373659NoNo3.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
placeholder312410≤12.14≤37184≤12.13.21.0
+

html.elements.input.placeholder

+

BCD tables only load in the browser

+

html.elements.textarea.placeholder

+

BCD tables only load in the browser

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder +

+
-- cgit v1.2.3