Text Field, Placeholder, Form

What is the difference between
[Create a Text Field]
<input type="text">
[Add Placeholder Text to a Text Field]
<input type="text" placeholder="cat photo URL">
[Create a Form Element]

<form action="https://freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">

The top one is easy enough - just a box for the viewer to type into
The middle one is a bit more difficult to figure out - now there’s text in the box but the viewer is supposed to type over what’s already there?
And the bottom one is the real puzzler - we have the input box with text, the viewer then types something into the field and is then taken to the page specified in the form tag?

Hello there,

Placeholder text is very useful, and is used to give users more information about the input. for example, the submission inputs on freeCodeCamp projects:
Quality Assurance Projects - Metric-Imperial Converter | Learn | freeCodeCamp.org

The placeholder indicates a common expected URL for submission.

As for your final example, I suggest you read more about the form tag: - HTML: HyperText Markup Language | MDN (mozilla.org)

The behaviour used in your above example is not quite what someone would expect, because usually the user would remain on the current page/site, and all the action attribute does is perform some sort of POST request with the form data.

Hope this helps

1 Like

Yes it definitely does - help, that is and I will look carefully at the information about the form tag - thanks!