What is the difference between the "placeholder" and "value" attributes and when should they be used?

What is the difference between the “placeholder” attribute and the “value” attribute in a form element?

When should you use either of them and when should you leave the value of the value attribute empty, as in one of the form lessons?

Hey there @noblekc and welcome to the Codecademy community!! :grinning:

The value attribute puts actual content inside of a form, so if you want to change it you have to delete it first.

While the placeholder attribute puts an image of content inside of a form, so when you click on the box and start typing it disapears. It is used more so to specify what the input box is for, were as the value will give a default value.

Another interesting thing is that you can set a input box with a type="number" to have a placeholder that is letters, were as you cannot set it value to be anything other than a number.

I find you usually can leave the value empty, but it is not useless…

Suppose you have a website were a user is regularly submitting billing information, with their permission of course, you could save their information to be a default value, and save them the time of typing in credit card numbers every time they make a purchase.

I hope this helpful, let me know if you have any more questions :slight_smile:

1 Like

Great! Thanks and thanks a lot for the response.

Are there cases where the “value” attribute and the “placeholder” attribute can be used within the same element?

Yes, so long as the value attribute is left empty.

placeholder="Enter your name" value=""

The value attribute need not even be there. The browser will insert it when the user starts typing in the input field.

2 Likes