Yes! We've made it 💪. We've pretty much made it to the end. What I want to do now, is I want to add a..
submit button, and then I want to talk to you a bit about how that works.
So, how do we do that?
Well, it's as easy as adding a button.
It really, really is.
So let's go...
to our text editor.
And as always, we have to write our button in HTML, before we can style it.
And let's copy our heading here...
as I keep saying, it's always good to label your code, otherwise you're going to come back to it in 5...
months time, and you're not going to know what you were doing.
So here we go, adding a submit button to our form.
Starting point, as always, I'm like a broken record, broken record, broken record, but I keep saying...
this we need to wrap all our form widgets in a wrapper, so let's do it in a DIV, and let's give it a...
form-row class. Within here...
all we need is a button, and that we can have as, I don't know, "Update" or "Submit" or "Login" or whatever the form is you're creating.
That's what we can call it.
And of course, if we got our browser, we've added this very cool button.
But as Gerald 🦒 pointed out earlier, in many things I've done, that just looks hideous 🤢.
It looks horrible! Which is why we should quickly style it.
Let's go back to text editor...
here, let's go to the styles. Checkbox styling.
Let's go here...
Button styling.
And the starting point is, of course, let's actually float this to the left and to the right, so you can...
see what we're doing...
the starting point is we have to grab the button.
So we start with the parent class, which is that...
form-row.
And within there, we know we've got the button.
We can change the font-size...
to 1em, just to make it fit the rest of our entire page font-size. Let's give it a bit of a bold...
weight, so font-weight let's give it bold.
It's getting there.
Let's effect its color.
How does that look?
I know you can't see it. We're going to give it a background, background-color...
rgb, I don't know, 231, 2, 2.
I think that's what I had. RGB.
I knew something wasn't quite right there 🤦‍♂️.
Let's just scroll down a bit, and you can see, I mean, the default button in the browser is to give it a...
border and very square edges.
So let's remove the border.
There you go.
Let's change those, that border....
I don't like it square. I like it's slightly rounded.
So we know that that's border-radius and we've defined a variable called --border-radius.
It's already starting to look better.
Let's give padding to the top and bottom and the left and right, so padding, 10 pixels, 40 pixels...
I think that looks pretty good.
Remember, with the padding, the 10 pixels affects the bottom and the top, and the 40 pixels affects...
the padding on the left and the right.
It's just a shortcut method rather than writing...
top right...
bottom left.
Whew, okay. Let's move on.
The other thing I want to change is when we hover our mouse over this update, nothing happens.
So of course, let's just go "cursor: pointer".
There we go, at least now when you hover over it, your mouse is converted to that little hand symbol so...
people know it's a button.
It's all these little things that matter. And I also want to now give it margin to the left, I want to push...
that update button so it's aligned with all the otha otter ... man, I can't talk today 😆 ... I want to push that update button...
to the right so it's aligned with all the other form widgets.
So in order to do that, and we've seen this before I mean, we've done it with others, is we give this...
a margin-left, and we've defined a variable...
margin, what was it called, label.
Aw, beautiful 🌺. Man, this is fun. Now, when I hover over yes, it goes to a pointer, but I want to change...
the style, the hover style, and for that we've got to use pseudo-classes again 😱.
Don't worry, it's very, very simple.
Again, let's target our button.
We know we start at the parent...
we then look at its button descendant, and we want to effect it styling when the user hovers over it.
And here we can just change our background-color...
to, I don't know, 255, I just want it, you know, I just want it a bit lighter. You see that...
it's subtle, but it's nice.
It's nice to have subtle styling.
Don't go overboard with styling.
It's all these things that make a difference.
I think that's fine for now.
I think that's all we need to do.
I think it's looking pretty good.
Let me expand this.
I mean, I don't know about you, but I think this is awesome.
You know what I haven't done? I haven't background styled and put a box-shadow around all of our widgets...
so let me actually just quickly do that now, before we finish this lecture.
Alright...
so how do we change, just going back to the browser quickly...
how do we change the background of this?
Well, we know that we've wrapped all our widgets and we've put them all within a form.
If we go back to our code here, and the HTML, and we scroll up, there's our form. We've given it a class of "profile-form".
Form right. We've wrapped everything within this form, so all we need to do, let's actually do this...
at the top. We should have done this right at the beginning, actually.
Um, here, before even this.
Let's go here, form styling.
And let me float this to the left, and float that to the right, so you can see what's going on. And it's going to be very...
simple.
We just have to grab our class "profile-form"...
background-color...
can be...
241, 238...
238.
How does that look?
We can give it a border, 1px solid rgb(186, 189, 190).
There you go.
Border radius, as you know, it's not that nice to have square borders.
We've defined a variable called --border-radius.
It's starting to take shape. Box shadow...
0, 1, 2....
0,0,0.5. We've already done this before.
And, of course, to finish it off, let's just give it some padding.
Um...
did we define padding at the top?
Yes we have, --main-padding.
Um, adding ... oh, we've done it before here, padding lets just copy that. Paste that.
Save. There we go, and there we have it.
How awesome does this look?
You've literally created your very first form! And don't take it for granted...
what you've learnt. You've learnt how to create text input boxes, radio buttons, checkboxes, select...
dropdown menus, as well as submit buttons...
I mean, if this doesn't blow your mind 🤯, I don't know what will! But because this lecture has dragged on a...
bit, I won't discuss now what happens when we submit this data.
But let me do that in the next lecture.
OK, so hold tight and I'll see you soon 👋.