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.

First name: <input type="text" name="firstname" placeholder="First name"/><br><br> Last name: <input type="text" name="lastname" placeholder="Last name"/><br><br> Email: <input type="text" name="email" placeholder="Email"/><br><br>

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