YouTip

## HTML `` placeholder Attribute The `placeholder` attribute specifies a short hint that describes the expected value of an input field (for example, a sample value or a short description of the expected format). This hint is displayed inside the input field before the user enters a value, and it automatically disappears as soon as the user starts typing. --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | `text` | Specifies a short hint describing the expected value or format of the input field. | --- ## Supported Input Types The `placeholder` attribute is not applicable to all input types. It is designed for text-entry fields and is supported by the following `` types: * `text` * `search` * `url` * `tel` * `email` * `password` --- ## Code Examples ### Example 1: Basic Usage This example demonstrates two text input fields with placeholder text to guide the user on what to enter. ```html

First Name:

Last Name:

``` ### Example 2: Styling Placeholder Text with CSS You can customize the appearance of the placeholder text (such as changing its color or font style) using the CSS `::placeholder` pseudo-element. ```html

``` --- ## Browser Support The numbers in the table specify the first browser version that fully supports the `placeholder` attribute. | Attribute | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **`placeholder`** | 10.0 | 10.0 | 4.0 | 5.0 | 11.0 | --- ## Important Considerations & Best Practices * **HTML5 Standard:** The `placeholder` attribute is a feature introduced in HTML5. It is not supported in HTML 4.01 or older specifications. * **Not a Substitute for ``:** The `placeholder` attribute should **never** be used as a replacement for the `` element. Once the user starts typing, the placeholder text disappears. Without a visible ``, users may lose context of what information the input field requires. * **Accessibility (A11y):** Screen readers read the `` element to describe form controls. While some screen readers can read the `placeholder` attribute, relying solely on it makes your forms inaccessible to visually impaired users. Always pair your inputs with proper `` elements. * **Contrast Ratio:** Default browser placeholder text often has low color contrast, which can be difficult for users with visual impairments to read. If you style your placeholders using CSS, ensure they meet WCAG contrast guidelines while still looking distinct from actual user-entered text.