Form Elements Do What ?

1

Screen Shot 2020-12-18 at 10.04.16 AM

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

So I don’t quite get what this form element is supposed to do. I get that the placeholder is the text that is displayed in the box but beyond that, I am puzzled.
The box is not a clickable link. The viewer can enter his own text into the box but to what end? The code contains a URL but there doesn’t seem to be any way to get to that URL from the box so what’s the point?

2

If you hit enter in an input field in a form, it will automatically submit that form.

Using form elements can also be used to get easy access to FormData objects. By having the form, you can easily create a FormData with the data of all the fields inside that form. Ex:

<form id="catForm" action="https://freecatphotoapp.com/submit-cat-photo">
  <input name="url" type="text" placeholder="cat photo URL" value="mycat.jpg">
</form>

<script>
const form = document.getElementById('catForm')
const data = new FormData(form)
console.log(data.get('url')) // mycat.jpg
</script>

Of course if you’re not using the submit action of a form, and using it only for data like this, you’ll need to make sure submit requests get blocked for things like when someone hits enter in a text field. Even if you don’t supply an action, it will default to submitting the form to the current page if you don’t block it.

<form onsubmit="event.preventDefault()" ...

Given the setup of this form, it seems like they expect the form to be submitted rather than using it for something like FormData. And even if the field wasn’t able to submit the form, it could be submitted somewhere else through JavaScript.

3

I certainly don’t pretend to understand all of what you said - hopefully I will get to the stage where I’m conversant with all the terminology in your reply - but for now, it’s very helpful to know that hitting Enter submits the contents of the form back to the server. One small step at a time!

4

Haha that’s fine. The rest is just about having an easier way to collect data from the HTML/user input in a page, that’s all :wink: