I want us now to take a step back from the theory, and before we start getting really advanced into the
different types of form widgets, what they all mean, it really does get advanced, I want us just to code a form together.
I don't want you to get bored in this section, but I thought it was very useful for us to now at least
code together a form, so you can kind of get at least a feel for how we set one up.
We are going to be going on a few tangents.
For example, we're going to be obviously coding up some CSS.
We're going to be looking at flexbox,
the box model, box shadows ... really, this course isn't about CSS,
so if you are lost, if you don't fully understand what CSS is about, don't panic.
That's not what this course is about.
And in fact, in future videos, we're going to be, or I'm going to be explaining some of these CSS attributes
in a lot more detail.
So that's kind of, call it, bonus footage.
But anyway, I just wanted you to be aware that this is what we're going to be doing now. We're just
going to build a form. And I'm going to build it from scratch.
I'm going to do the HTML with you.
I'm going to do the
CSS with you.
And I'm going to be kind of giving you a bit of hints, a bit of advanced tidbits now and again, when
we look at the different form widgets. But really the remainder of this section is not meant to be
advanced, okay.
We just kind of coding together,
we're having a bit of fun.
If you are very familiar with forms, know how to set them up,
you know a lot about CSS, then you can skip this section entirely and continue the course on the next
section.
But really, if you can, stick with me, because you obviously learn a lot when you code with me and
yeah, you pick up something new every time. But enough of this jibber jabber,
let's get started.
Let's get coding.
So let me show you what the form is going to look like
so you kind of have a visual representation of what we are doing before we actually start with the lectures.
So let me hop into the computer, and show you the form we are going to code.
Alright, enough looking at peacocks.
Let's quickly, quickly go through this form because this is what we're going to build together.
Like I said, we're going to be building it from scratch.
We're going to write the HTML and the CSS together.
And I'm doing this just to give you an introduction as to how to build a form
and some of the very simple form widgets. Trust me, it does get a lot more complicated.
But anyway, what are we building?
Well, you can see we have a header here, Personal Profile, and then we have a few widgets below.
So we've got the first name
and of course, it's pretty stock-standard.
We've got an email here, which you can see kind of like a text input
but now we've got placeholder text.
We've got text that we haven't written.
That's just default.
Now, if we start writing, let's just say our name is Tom, you can see that we've got red text,
which indicates to the user that it's not quite complete.
There's an error.
And, of course, when we finish typing this out,
gmail.com, the red text goes away.
The next line is this "Allow push notifcations?". We've defaulted it to
yes, but it's a toggle of some sort. Then now
we've got some sort of selection box where we can choose a profile color, blue, green, dark and light.
Now, I haven't linked this up, so if you click dark, nothing happens, but this course is not about
CSS so I don't want to harp on about that.
I just wanted to show you a different type of widget.
We've got this profile description, which is, you know, we've all seen this, it's just a textbox.
And, of course, you know, you can change the size of this box, up and down.
And then here at the very end, we've just got a checkbox, you know, I'm generally a happy person.
Well, yes I am ðŸ˜Š.
And then we can just update this form, and all that data gets sent somewhere.
Anyway, that's what we're going to be building together.
Enough talk, enough jibber jabber.
I'll see you in the next lecture.