YouTip

## HTML <textarea> placeholder Attribute The `placeholder` attribute of the `` element specifies a short hint that describes the expected value of the text area (e.g., a sample value or a brief description of the expected format). The hint is displayed in the text area when it is empty and disappears as soon as the user starts typing. --- ## Quick Example Here is a simple text area with a placeholder hint: ```html <textarea placeholder="Enter your description here..."> ``` --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | *text* | Specifies a short hint that describes the expected input of the text area. | --- ## Browser Support The `placeholder` attribute is widely supported across all modern web browsers: * Google Chrome * Mozilla Firefox * Safari * Opera * Microsoft Edge / Internet Explorer 10+ *Note: Internet Explorer 9 and earlier versions do not support the `placeholder` attribute on the `` tag.* --- ## Detailed Examples ### 1. Basic Usage This example demonstrates a standard feedback form text area with a placeholder. ```html <form action="/submit-feedback" method="POST"> <label for="feedback">Your Feedback:</label><br> <textarea id="feedback" name="feedback" rows="4" cols="50" placeholder="Please let us know how we can improve our service...">
``` ### 2. Styling the Placeholder with CSS You can customize the appearance of the placeholder text (such as changing its color or font style) using the `::placeholder` pseudo-element. ```html ``` --- ## Important Considerations * **HTML5 Feature:** The `placeholder` attribute is a feature introduced in HTML5. It was not available in HTML 4.01. * **Do Not Use as a Label:** The `placeholder` attribute should not be used as a replacement for a `` element. Placeholders disappear when the user types, which can cause usability and accessibility issues for users who forget what input was expected. Always pair your `` with a proper `<label>`. * **Empty Value Requirement:** The placeholder text will only be visible if the `<textarea>` is completely empty. Ensure there are no accidental whitespaces or line breaks between the opening `<textarea>` and closing `` tags in your HTML source code, as browsers treat whitespace as actual value content. *Correct (Empty):* ```html ``` *Incorrect (Contains whitespace, placeholder will not show):* ```html ```