How to Add Placeholders to Form Fields in HTML

In this article, we show how to add placeholders to form fields in HTML.
Placeholders are text that appears in a form field but that disappear when the user clicks on the field and begins typing.
Placeholders are normally placed into HTML form fields to give a user some idea of what goes into the field.
For example, if a form field is asking a user for his/her first name, you may put the placeholder, First name, in the field.
If another form field is asking a user for his/her email address, you may put the placeholder, email, in the form field.
Placeholders are commonplace in forms all over the web, including professional forms, so knowing how to put them in with HTML is important.
So putting placeholders in forms in HTML is very simple.
You just use the attribute, placeholder and set it equal in single or double quotes to the value that you want it to be.
Below is a form asking a user for his/her first name, last name, and email, with
placeholders.
First name:
Last name:
Email:
The code for this above form is shown below.
For the first name text field, the placeholder attribute is set equal to "First name". This is what shows in text field until the user clicks in the field and begins typing.
For the last name text field, the placeholder attribute is set equal to "Last name", which is what you can see above.
For the email text field, the placeholder attribute is set equal to "Email", which is what you see above.
This is all that is needed to create placeholders in form fields in HTML.
Placeholders can be placed in any HTML form fields that accept typed user input.
Related Resources
How to Embed an Image in an HTML Page
How to Create Links to Within the Same Page in HTML
How to Create a Popup Title When a User Hovers Over a Link in HTML
How to Create a Definition List in HTML
How to Create a Table in HTML
How to Create a Table with Rows of Alternating Colors Using HTML and CSS
How to Add a Class or ID to an Anchor Tag in HTML
How to Change the Name of a Submit Button in HTML
How to Create a Reset Button in HTML
How to Create a Text Box that a User Cannot Type Inside Of
How to Create a List Box in HTML
How to Create a Multi-line Text Input (Textarea) in HTML
How to create a drop down list in HTML
How to Play an Audio File Using HTML
How to Display a Video Using HTML