Whoohoo!
Well done.
I cannot believe it, we've only just started, but man, let's just do a quick recap about what we...
have learned about forms already.
Firstly, we know form is made up of one or more form controls, aka. widgets.
And in this sections we've looked at the most common types of form widgets.
In fact, we now have a whole lot of tools available for collecting user data such as input-text,
input-type email, input-type radio, input- type checkbox, select, and options, textareas...
and even buttons.
So take a step back.
This is actually a phenomenal amount.
We saw how just changing the 'type' property of that input element can really transform the look and feel...
of a particular form control.
We saw, for example, the input type of text is literally a input box for text, whereas input type...
checkbox gives you a completely different UI result.
And although there are a ton more 'type' attributes to this input, which we're going to see in the next...
and upcoming sections, for now, just take a step back and you should be pretty comfortable with the...
HTML and CSS required to build a beautiful form, even just with these elements.
But, making these forms functional requires a little bit more skill that we haven't yet learned, which
is coming up in the upcoming sections.
So, hang in there is what I'm trying to say.
Okay, but let's now just put that all aside.
We've learned a few very crucial elements, but what do we do with all of the data you might be thinking?
And that is a great, great question.
The last part, and perhaps the trickiest, is to handle the data in some way.
And this is usually done on the server,
right.
And remember, we wrap our form within a <form> element and that form element defines where and how to...
send the data thanks to the "action" and "method" attributes.
We've seen this already.
And don't forget about that name attribute...
remember how important it was?
The name attribute on each widget is important for both the client, and the server side.
They tell the browser which name to give each piece of data, and on the server side, of course, they...
let the server extract those values and handle each piece of data by that name.
Because remember, the form data is sent to the server as name:value pairs.
And of course, to give an item a name, we use the name attribute on each form widget.
Okay, that makes sense.
And how does the server side code work?
Well, the way the server side script handles the data is purely up to you, and it very much depends...
on your server side language, PHP, Python, Ruby, Java, C#, etc etc.
Each of those languages have their own mechanisms of handling form data.
And yes, it's a bit beyond the scope of this entire course to go into much detail on the server side...
code.
But we are going to touch on it in a bit more detail later on in this course. "Alright Clyde, well, where to ...
next?
What are we going to be doing?"
Well, I want to start by saying we've only touched the tip of the iceberg ðŸ§Š.
It's now time for us to start taking a bit of a deeper look.
Forms are complex, and they have way more power than what we've seen here.
And the other sections in this course, of course, will help you master the rest.
Remember, forms are complex.
In fact, the flexibility of forms, the amount of things we can do with them, in my opinion, makes...
them the most complex structure in HTML.
You can build any kind of basic form using dedicated form elements and attributes, but using the correct...
structure when building an HTML form will help ensure that the form is both usable and accessible by...
all users.
So without further ado, let's jump into more detail around the functionality of different widgets, around...
the different form controls in detail, studying all the different options available to collect different...
types of data.
We're going to be looking at the original set of form controls available in browsers since the early...
days of the Web.
And of course, we're going to be digging into the newer widgets that have recently been introduced.
But perhaps before we even get onto widgets, I just want to discuss this <form> element in a little bit...
more detail.
Well actually, in quite a bit more detail.
I want you to understand why we have to wrap all of our widgets in that <form> element ðŸ¤”.
But I'm super excited.
I hope you are too. Stay motivated and I'll see you in the next section.