diff options
Diffstat (limited to 'devdocs/html/attributes%2Fplaceholder.html')
| -rw-r--r-- | devdocs/html/attributes%2Fplaceholder.html | 137 |
1 files changed, 137 insertions, 0 deletions
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 @@ +<header><h1>HTML attribute: placeholder</h1></header><div class="section-content"> +<p>The <code>placeholder</code> 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.</p> <p>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 <a href="../element/label"><code><label></code></a>. As the placeholder is not visible if the value of the form control is not null, using <code>placeholder</code> instead of a <code><label></code> for a prompt harms usability and accessibility.</p> <p>The <code>placeholder</code> attribute is supported by the following input types: <code><a href="../element/input/text">text</a></code>, <code><a href="../element/input/search">search</a></code>, <code><a href="../element/input/url">url</a></code>, <code><a href="../element/input/tel">tel</a></code>, <code><a href="../element/input/email">email</a></code>, and <code><a href="../element/input/password">password</a></code>. It is also supported by the <code><a href="../element/textarea"><code><textarea></code></a></code> element. The <a href="#example">example</a> below shows the <code>placeholder</code> attribute in use to explain the expected format of an input field.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The <code>placeholder</code> 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.</p> </div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>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 <code><label></code> element; doing so harms accessibility and user experience.</p> <p>The <code><label></code> 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 <code><label></code>, focus is moved to the the label's associated form control.</p> <p>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.</p> +</div> +<h2 id="example">Example</h2> + +<h3 id="html">HTML</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="4NUwyJ+AwnTlWvC4oCctLcsL+h659fLzEGV+zq4OZ/o=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/en-US/docs/Web/HTML/Attributes/placeholder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter your name:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>e.g. Mike Shinoda<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Example sample" id="frame_example" width="150px" height="150px" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/placeholder/runner.html?id=example" loading="lazy"></iframe> +</div></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder">HTML Standard <br><small># attr-input-placeholder</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody> +<tr> +<th><code>placeholder</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>line_breaks</code></th> +<td class="bc-supports-yes">36</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">59</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">23</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">36</td> +<td class="bc-supports-yes">59</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">3.0</td> +</tr> +</tbody> +</table></div> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody><tr> +<th><code>placeholder</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h3 id="html.elements.input.placeholder">html.elements.input.placeholder</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.textarea.placeholder">html.elements.textarea.placeholder</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>HTML <a href="../global_attributes/title"><code>title</code></a> +</li> <li>CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown"><code>:placeholder-shown</code></a> pseudo-class selector</li> <li>CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder"><code>::placeholder</code></a> pseudo-element selector</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder</a> + </p> +</div> |