How to fix: There is no attribute "placeholder"

Most Likely Cause and Fix

You have used a placeholder attribute on an <input> or <textarea>element in a non-HTML5 document.

The placeholder attribute was introduced in HTML5 and is not valid for previous versions of HTML.

Remove this attribute or switch to a HTML5 document type.

What This Error Means

There is a defined set of attributes for each HTML element. You may choose to omit some but you cannot choose to add further attributes beyond those defined.

This error is simply saying that the attribute placeholder cannot be used where you used it.

How To Fix It

For non-HTML5 documents

You have used a placeholder attribute on an <input> or <textarea>element in a non-HTML5 document.

The placeholder attribute was introduced in HTML5 and is not valid for previous versions of HTML.

Remove this attribute or switch to a HTML5 document type.

Check your doctype

Make sure you're using the version of HTML you intended to use.

If you are transitioning from an older to a newer version of HTML, check that the attributes you are using are still valid.

The use of some attributes may become deprecated over time if they're found to not be as useful as intended. Some attributes may be removed entirely.

Check the document type declaration used in your markup. Fix this if not correct.

If you are using HTML5 custom data attributes of the form data-*, make sure you are using the HTML5 doctype: <!DOCTYPE html>,.

Simply remove the attribute

You have used the attribute placeholder on an element where the element does not allow an attibute of that name.

The specific error message you encountered will refer to a line and column number. This will guide you to the exact point in your markup to which the error relates.

You should remove this attribute for your markup to be valid.

Use a HTML5 custom data attribute

Are you making up attributes merely as a means of storing data?

Whilst the following is invalid HTML, the invalid attributes could still end up in the DOM and be accessible via JavaScript:

<img src="http://example.com/image.png" alt="Desc" placeholder="jon" />

HTML5 custom data attributes are intended exactly for this purpose. Give it a go if relevant to you.

<img src="http://example.com/image.png" alt="Desc" data-placeholder="jon" />

Discuss, Comment and Improve

Did this help you? Can this page be improved? Let us know!

comments powered by Disqus