OK, so here we are, here's our site, and you know what, actually, if I zoom in here, I've noticed
these are not aligned.
Let me just get rid of this.
Can you see we're not quite aligned here?
Those two inputs are not quite aligned?
Why? Well,
let me just quickly show you, um here, if we inspect this,
let me just zoom out.
Have a look here.
We haven't defined a width of our label yet.
And you can see here that this name label has a width of 62.68px, and of course,
email is just slightly less in size,
in width.
And that's why these two are not aligned.
And if we look at our header, we can see we've given it a width of 600px.
So maybe what we should do is just give our labels here a width of, let's say 200px, then
at least it's a third of the size.
So let's quickly do that, and then they're aligned, and they also will be centered.
So it'll actually look quite nice.
So here we go. Here's our code. And all I want to do is I want to grab our label,
actually we are right here - that's very handy.
And we want to define a width.
Width, and we want that to be set to, um what did we define it, um --label-width. Remember at the top of our file,
if I scroll up here,
we've defined a "--label-width" for each one of our labels in the form
so then it's uniform. Very very cool hey! And we've already done it as 200px.
We actually did that right at the beginning.
So there we go, let's scroll back down.
Let's save.
Let's go back to our browser.
(sound effect: Wow)
Isn't that beautiful 😍?
So now if I zoom in 🔎,
you can see that these are exactly the same width.
If we inspect this element here, you can see firstly that I've pushed all the labels to the right.
It's exactly, if we go back to our code,
it's exactly why we've text-aligned it to the right ➡. That's all we've done.
You might be wondering why I aligned items to "flex-start"?
All that means is I'm wanting to align items,
I want to push all the items to the start of each of its container.
That's all that that means.
I know these things can be quite confusing when you're beginning, but don't worry,
again, I'm going to be talking a little bit more about the box model and these flexes a bit later in
the course.
For now, I just kind of want to build a form.
I want you to get a feel for how this works and how we go about doing it.
Enough on all this CSS, and enough on our existing page, let's add this radio button right now.
So let's go to our file here, our HTML.
And now let's add, um, "adding our radio button".
That's what we're going to do now. And, of course, we get rid of myself so you can see the screen
better and concentrate on what it is you're doing.
Adios 👋.
Remember what I said we should do?
We should wrap our radio buttons within a group, and we do that using the fieldset
element.
(sound WHAT!) (music starts playing)
And I want to give this fieldset element a class, just so we can style it nicely.
Let's give it a class, and let's call this class radio-form-row, for example.
What am I doing?
This class needs to be in here.
There we go.
So there is kind of our wrapper. Then remember what I said we need to do?
We need to give our group a name.
And that's what we're going to be putting into this legend element.
Let's just, for example, ask the user if they want to allow push notifications sent to them.
That's all we're doing.
If we see what this looks like now. Let me just actually put both ... let me delete this ...
up to the screen, it looks terrible, but we're going to start building this up, so don't worry,
but that's what we have in our browser so far.
Now, what I want to do, is I want us to code the first selection, which is going to be "no".
How would we go about doing that?
Well, very simply, it's almost exactly the same as what we did for our text inputs. The first thing
I want to do, is I want us to have an input.
But this time the input has a type set to "radio", remember?
And the name has to be the same with every single one of the radio types in the group, so let's just
give this a "push-type" name. The ID we can call it anything we want,
the ID here, let's just say is "push-type-1", which we know is "no".
And of course, the value of this is going to be "no". Very very simple. If I save this, we've literally got
that radio now on the screen. Let me zoom in so you can just see it a bit better. Is that better?
You can see it there.
But now there's no label, is there?
So let's add a label.
And the "for" is "push-type-1". Remember, that "for" attribute has to be the same as the ID.
That's exactly why I've done that.
And then I want to give this a class, because we can style it up nicely.
I want this to be a radio-label,
and of course, we're giving this the value of "no". Don't worry about styling yet.
We just getting everything set up.
That's our first selection, which is "no".
Now we can just copy and paste this entire code, and of course, this is going to be "yes"
and this is going to be the second selection.
The type is radio.
The name has to be the same,
it's going to be push-type.
Its ID is going to be push-type-2
and the value, of course, is "yes". And the label has to be the same as the ID, which needs to be
2.
And we can have exactly the same class and of course, the value of "yes".
Let's save that, got our browser, and there we go.
Here are our radio buttons. Now
check this out - if we click no, it's selected.
If we click yes, the "no" is automatically unselected and the yes
becomes selected.
That's exactly why everything has to be within a group.
Is this kind of making sense?
I hope so.
I hope it's becoming more intuitive.
I know this is a very simple example, but we're going to be getting more into it a bit later.
If we hadn't labeled each radio with the same name attribute,
what do you think would happen?
Let me show you what would happen. Let me go back to our code, and let's say the first one, instead of calling
it push-type, we go "push-type-rebel", because it's being a rebel, it's not the same name as the other
type.
If we do that and we go back to our browser, what happens is it allows the user then to select more
than one radio button at a time.
In effect, this is not really then a radio button, is it?
Remember, radio buttons only allow the user to select ONE within the group.
And now because we've got different names, the browser doesn't know that both of these radio buttons
are part of the same group.
So that's exactly why we have to have the same name attribute for every radio button within the same
group.
There we go.
That's what you'd expect. And what's really cool with all of these input types in HTML is that we
have certain attributes available to us straight out of the box.
For example, often you'll have a default selected type, or checked type, and we can specify what that
is. So say here,
we wanted the default push notification selection to be "yes", all we'd have to do is go to our code
and within the input type, we introduce a attribute called "checked". And this "checked" is literally
just a boolean value.
It doesn't have to equal anything,
it's either there or it's not.
And if we go to the browser now and look at that, the "yes" is automatically checked.
So if there's one thing I want you to remember from this, its that with radio buttons, the user cannot type
in their own value.
And this is why it's so important that each radio button needs to have the own unique "value". And that
information will be submitted to the server when the user submits this form.
But before we move on, I just want to quickly recap this radio button in another lecture, and then we will
continue to style this, and we'll continue to build this awesome form. See you in the next lecture.