Text Field, Placeholder, Form

HTML-CSS
1

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

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

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?

2

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
3

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