HTML placeholder attribute specifies a short hint that describes the expected value of an input field/text area. The short hint is displayed in the field before the user enters a value.
Syntax:
<element placeholder="">
HTML placeholder Attribute Examples
Example 1: HTML <input> placeholder attribute specifies a short hint or example text displayed in an input field before the user enters a value. It helps users understand the expected input format or content.
<!DOCTYPE html> <html>
<body>
<h3>
HTML placeholder Attribute Example
</h3>
<!-- HTML placeholder attribute used in input tag -->
<form action=" ">
<label for="First Name">Enter your first name:</label>
<input type="text" name="fname" placeholder="First name">
<br>
<br>
<label for="First Name">Enter your last name:</label>
<input type="text" name="lname" placeholder="Last name">
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
|
Output: In this example, we demonstrate placeholder attributes in input elements. Two text input fields for first and last names. Placeholder text guides user input, improving form usability.
HTML placeholder Attribute Example Output
Example 2: HTML <textarea> placeholder attribute is used to specify the expected value to be displayed before user input in textarea element.
<!DOCTYPE html> <html>
<body>
<h3>
HTML placeholder Attribute Example
</h3>
<!-- HTML placeholder attribute used in textarea tag -->
<textarea rows="4" cols="50" placeholder="Describe yourself here...">
</textarea>
</body>
</html>
|
Output: In this example we demonstrates placeholder attribute in textarea elements. We have a text area with in which user can write their introduction
HTML Placeholder Attribute with Textarea Example output
HTML placeholder Attribute Related Questions
1. How to use placeholder attribute in HTML ?
Here the placeholder attribute is used to define a hint of what value has to be entered on the input and textarea field.
2. How to align Placeholder Text in HTML ?
To align we can use text-align property to set the text alignment in the placeholder.
3. When to use the placeholder attribute and the label Element ?
The placeholder attribute and the <label> serve different purposes in providing hints and information for form fields.
Supported Browsers: