Now that's it for these input fields
which display input fields like this.
I got two other input types, and then a couple of other
interesting input elements we could use,
but let's start with those other types.
And the first one is the radio type.
Let's say we have a multiple choice value.
And for this here, I'll add this hr element,
to render a little horizontal line.
That's basically all this does,
it displays such a horizontal separator.
And below this hr element here,
which I only added for visual purposes,
I'll add yet another input element,
but now I'll set the type to radio.
And the special thing about the radio type,
is that we typically use it
to display multiple options,
where only one of them should be picked.
Let's say we're building a form
where a user creates an account, and we now want to have
the user choose how the account should be verified.
For this we could offer three options.
We send a text message, we call the user,
or we send an email.
And hence, we might wanna show these three options,
where only one of them can be picked at the same time.
For this, I'll first of all add a little title here,
a h2 title maybe, because we could have a main h1 title,
somewhere above, we don't have it here,
but we could have such a h1 title.
So here I'll add this subtitle then, where I say,
how should we verify your account?
And then I wanna have three options,
so I'll display three radio buttons.
Now every input needs it's own label,
because of course I wanna describe
what this button represents.
So for this, I'll now add my label,
and I'll actually now add it after the input,
so that I first have the button and then the label.
And here I'll say, via text message, SMS.
Copy that, and on the next radio button I say,
via a phone call, and then on the third input I say,
via an email.
Now we need to connect this,
and hence I'll give these three inputs different IDs.
Here I'll say, verify, dash text, dash message.
Of course, the ID is up to you, but that sounds like
a fitting identifier for this first input.
And hence on this label, we can say for,
verify text, dash message.
Here on the next input we could set an ID of,
verify phone, and of course therefore set the for attribute
to verify phone here.
And on that last input we say, verify email,
and set for equal to verify email.
Now we got this connected,
but I also wanna set the name attribute now,
so that we have that field, that identifier,
which we can use on the server, later,
to get and extract that entered data.
And now here's the special thing which is very important,
to ensure that the browser forces the user
to only pick one of these options,
all these options must have to same name.
So they have different IDs, but the same name.
And that's also why name and ID is not the same thing,
name can be used to group multiple inputs together,
and that is something which we use
when we work with radio buttons.
Now we got one identifier,
that will be submitted to the server,
but the concrete value will be one of three possible values.
And here I'll just set the name to verify,
though of course the value is up to you,
and I'll add that same name, attribute value pair,
to all my three radio inputs here.
With that, if I save this,
you'll notice that the styling of course, isn't that great
because the input is a block element,
and hence, not in the same line as this button here,
we'll fix this in a second.
But if I click in there,
and I then choose a different option,
you see that the first option automatically got deselected.
And that's that behavior which I meant,
we can only select one of these options,
and the other option is then unselected automatically.
And that's this radio button feature in action,
but we're not done with the radio buttons.
For one to styling is of course broken,
but in addition,
the radio buttons are also not configured correctly yet.
I mean, I said that we set one name
for all three radio buttons,
and that then the value would differ
based on which button is selected.
But what is the value that will be submitted to the server?
We could think that it's our label here,
but that actually should just be a human readable label.
Later on the server, when we parse and extract that data,
we typically wanna have short, clear identifiers,
for these different inputs.
We're not interested in the human readable message.
And therefore, we can add another attribute on the input,
and that's the value attribute.
The value attribute allows us to set a value for that input.
And we could use it on all inputs,
also on the other inputs up here.
If I go to that username input, and enter a value,
and enter Max here, you'll notice that if I save this,
Max is pre entered here.
This can also sometimes be useful,
sometimes you want to have default values
which are filled in out of the box.
The user is still able to overwrite that by the way.
But you can enter such a default value,
by setting that value attribute.
But I don't need it here,
I do need it for these radio buttons though,
because those work a bit differently.
Here the user doesn't enter anything,
instead the user selects something.
And to then have a machine readable value,
that will be sent to the server, based on that selection,
we have to set this value, which is a value the user
will never see for these radio buttons.
So here we could have a value of verify text,
or just, text message maybe, let's use that.
On the second radio button input here,
I'll set a value of phone.
And on the last one, I'll set a value of email.
And then I'll press this auto format shortcut,
which makes it a bit more readable.
If we now save this,
the radio buttons look exactly as they did before,
and they work as they did before,
but now this value, which is not shown to the user,
will actually be sent if that form is submitted.
And you can see this, if I click submit in that URL up here,
you see that verify equals phone pair here.
And verify of course,
is my name which I used for this input group.
So for all the inputs here, for all the radio inputs.
And then phone is that value of that input
which I had selected.
I selected the second input before,
hence if I submit this, verify is set to phone.
If I select the email radio button here and submit this,
verify is set to email.
And that will be the data
which we later can extract on the server.
Now with that, let's fix the styling though,
because we now know how radio buttons work,
and it's definitely a nice feature,
but the styling is not the styling we wanna have.
Now when it comes to styling radio buttons,
there are different ways of doing that.
I will go there and add a div,
which is a semantically meaningless element,
but a block element which I can use to group other elements
to then apply some styling,
and that's exactly what I wanna do here.
And I'll then take this first input label combination
and move that into this div.
And I'll repeat that for my other input label combinations.
Only for the radio buttons here though.
So I'll grab all those label input,
radio button combinations here and move them into divs,
and then press the auto format shortcut.
And then on these divs,
I'll add some CSS classes with the class attribute.
And the class name is up to you,
I'll name it form control inline.
But again, this is up to you,
I'll then just copy this class attribute
and add it on the other divs as well.
And now we can target this form control inline
class selector in the style CSS file,
with that class selector syntax here,
dot and then the class name, to apply some styles.
And what I wanna do here is, I will just use flexbox,
with display flex to put these labels
and inputs back into one line.
And then I'll also target the input element,
inside of that div with a class of form control inline,
and set the width back to auto,
so that the width is just based on the content,
and not set to this fixed width of 100%
of the parent container.
Now this looks better.
And then I'll just give as input
in that form control inline div,
a margin to the right of dot five REM, maybe.
Like this, and that's looking better.
Now we got that style set up,
and we've still get the same behavior as before of course.
And these are radio buttons in action,
now let's have a look at checkboxes next.