The placeholder attribute provides a short hint in input fields. It appears faintly and disappears when typing begins, supported in text, email, tel, search, and textarea elements. Use it to show examples like "example@email.com", but not as a replacement for labels. Labels ensure better accessibility and usability. Avoid placing critical instructions or validation rules only in placeholders. Keep the text brief and clear. For password fields, avoid placeholders to prevent exposing formatting hints on public screens. This small feature enhances form clarity when used correctly.

The placeholder attribute in HTML5 is used to provide a short hint or example inside an input field, giving users an idea of what kind of value they should enter. This text appears faintly within the input box and disappears when the user starts typing.

Basic Syntax

To use the placeholder attribute, simply add it to your input, textarea, or other text-based form elements:

This displays "Enter your name" in light text inside the input until the user types something.

Supported Elements

The placeholder attribute works with several form controls, including:

• text inputs:
• email fields:
• tel fields:
• search boxes:
• textarea elements:

Best Practices

Use placeholders to offer helpful examples—not as a replacement for labels. They should not be the only way you explain what a field requires.

• Avoid using placeholder text as a substitute for the label element—labels improve accessibility and usability.
• Don’t put critical instructions or validation rules solely in the placeholder.
• Keep placeholder text short and clear—e.g., "example@email.com" for an email field.
• Be cautious with password fields—showing placeholder text may expose sensitive formatting hints on public screens.

Basically just add the placeholder attribute with a brief, helpful message. It's a small detail that can make forms easier to understand at a glance.

The above is the detailed content of How to use the placeholder attribute in HTML5 forms?. For more information, please follow other related articles on the PHP Chinese website!