Here we are.
We've got a blank file open and you'll see we've got a blank browser.
Okay.
But, there's nothing in here, obviously.
Let's create an HTML template.
Here we want a body. In the body
we want to start with our form.
We don't need an action.
We're not submitting this form.
And let me put the browser side by side so you can see what's going on.
So what is the first step?
How do we create that border around the group of controls?
That's right.
We use the fieldset element. And if we even save this, we can see that on the browser
it's already created that box. And that box styling is there
by default. We can change it.
But for now that's not what I want to concentrate on.
I want to build those controls and I want us to have a heading.
I just want us to start off simple.
So what's next?
How do we choose ... or how do we add that heading,
"Choose your favorite fruit"
That's right, my dear Students => legend.
I'm glad you've been listening to me.
And of course we can just go "Choose your favorite fruit".
How's that?
Man, that's already starting to look good.
All right.
And then the next question is, how do we create those selections?
Remember, I gave you a clue that the input type must be set to radio? Forms, as we mentioned, are
just HTML markup
so we have a lot of flexibility as to how to do this.
And you may not have done it the same as me, and that's entirely okay.
I'm just going to use a paragraph tag to wrap everything in it.
The reason I use paragraphs quite often, by the way, is that by default, browsers apply a display
property of block.
So it just means each new input widget will be on its own line, and also some nice margins are applied to
a paragraph.
So it just makes it look better,
and I don't have to bother by, you know, styling it myself in CSS.
Okay, well, let's put a label element now because that's just good practice.
I'm going to do something slightly different.
We're going to be talking about the label element shortly, but I'm going to now wrap our entire input
between the label tags.
This is where I want to put my input, and I want it to be a ratio
as I mentioned. If we save this, you can already see the radio.
If I hover it, I check it.
And that blue kind of highlight is the default.
That's what the browser does.
Quite interesting.
The name of all the radio buttons have to be the same. Again,
we haven't done this yet, but we're going to look at this later on in the course.
And then each value that's sent to the server needs to be unique.
So in this case, let's say this fruit is cherry and of course we need a label.
So there you go.
A benefit with having a label is if the user clicks on cherry, the actual radio button gets selected.
So you can see how easy this is, right?
And all we have to do to duplicate this process is copy and paste this paragraph.
There we go.
Cherry 🍒.
Remember, the names have to stay the same, so I'm going to keep names, fruit.
But of course, the next fruit is not going to be cherry.
It's going to be banana 🍌.
Banana.
(song: banana)
Bah bah bah bah bah bah bah bah bah bah bah bah bah bah bah bah.
And the last one can be,
strawberry 🍓.
Let's have a capital S here.
Save that.
And there we go.
And what's cool, when we set the same name attribute in our example as fruit for each one, it toggles
the selections of each radio button.
So here we go.
This is what it looks like in the browser.
You can see that it's stretched across the entire screen.
So we're not quite done, are we?
No.
Let's go to our
code here.
In the very top, in the head section,
let's style up a few things.
And the most simple, simple thing I want to style is this fieldset element.
We want to make its width 50%, right?
And if we go back to our browser, you can see now it's 50%, but we want to center it.
So we go back here.
All we do is we add a margin of zero and auto. Let's go back to our browser and boom 💥, there we go.
And if you got to this point, well done, right?
I just wanted to re-emphasize the fieldset and legend, how useful and how quick it can be for us to
design cool looking forms.
Aren't you excited?
So well done.
If now you want to understand the CSS behind making these really funky, there's a few things we've
got to do.
Firstly, we have to design our own toggles literally from scratch.
You don't have to continue watching the remainder of the solution
if you don't want to learn about CSS or if you know CSS already.