HTML placeholder Attribute
Last Updated :
01 Apr, 2024
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.
HTML
<!DOCTYPE html>
<html>
<body>
<h3>
HTML placeholder Attribute Example
</h3>
<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.
HTML
<!DOCTYPE html>
<html>
<body>
<h3>
HTML placeholder Attribute Example
</h3>
<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
Here the placeholder attribute is used to define a hint of what value has to be entered on the input and textarea field.
To align we can use text-align property to set the text alignment in the placeholder.
The placeholder attribute and the <label> serve different purposes in providing hints and information for form fields.
Supported Browsers:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...