All right, before we start coding, I just want us to talk a little bit more about forms, and we know
that forms are just HTML elements that let you collect data.
Pretty simple, but what exactly is a form ðŸ“°?
How is it constructed ðŸš§?
How does it work?
Well, the starting point is to understand that a webform is made up of one or more form controls. Now
don't get intimidated.
Developers love using fancy words.
Sometimes they call these form controls "form widgets" or just "widgets".
A form control or a widget is just an item in your form.
Pretty simple, right?
So a form widget or form control could just be a text field or a button or checkboxes or radio boxes,
etc etc.
We're going to be learning about a ton of widgets in this course, a lot more than just these, but
that's all a form control is.
And sometimes you can enforce certain values or formats of those widgets, of those controls.
And this is known as form validation.
We're going to be looking at this in the course as well.
"But all right, Clyde, this is getting a bit boring.
How do we create a form?
Just tell me already."
OK, well it's pretty simple.
All forms start with a <form> element like this. (typing sound effect)
And this element formally defines a form.
It's a container element, just like a tag or a section or a footer element, but specifically for containing
forms.
Pretty simple.
It's just the word "form" wrapped in tags.
And this element formally defines a form.
OK, that was a very long, roundabout way of saying that we should contain all of our form widgets,
our form controls within a form element. And this form element is very powerful.
And before we even get into the form controls and form widgets, let's just look at this form element
in a bit more detail.
This form element can take many different types of attributes to configure the way the form behaves.
All of its attributes are optional, but it's pretty standard practice to always set at least the "action"
and "method" attributes. Whew,
"okay Clyde, well what are these action and method attributes?"
What do they mean?
Well, firstly, let's look at this action attribute.
The action attribute defines the action that you want your form to take when the data is submitted.
In other words, it defines the URL that will process the form data.
You know, it's where the input collected by the form is sent
when the user clicks on the submit button. And you normally send your data to a special URL defined
by your web server that knows how to process the data.
And what this means is that you obviously need server side code to handle this information.
You can write this code in Node, PHP, Ruby on Rails, etc etc.
And just FYI, if you leave this action attribute blank, the form is just going to submit the data
to the same URL that it's on.
Pretty straightforward.
"OK, Clyde, what about this method attribute?"
Well, even semantically, you can kind of think about it as the same as the English meaning. A method kind-of
is how you do something.
So when it comes to forms, the "method" attribute defines how the form is submitted.
And usually you have two values, a GET or a POST.
And as I mentioned, both of these define HOW the form is submitted to the backend server. And which
one you use, largely depends on how you want your web server to handle the form.
But the general rule is that you should use POST when you want to change data on the server and reserving
GET for when you're only getting data.
So this was just a very, very high level summary of forms in general, how we make them up, why we
even have to use the form element.
Hope you're starting to get a feel for all of this
but we are only just beginning.