So let's work on that next section of inputs
for this all.
Add a new section here and give this a title
with h2 tag where I say, how should we reply?
Now in here, I then wanna have an unordered list again
with multiple list items
where every list item holds a label input combination.
But here, I'll now render a couple of radio buttons.
Hence I'll have to input first and set the type to radio.
And then I'll add the label there after.
And for the first radio button,
I'll say call me as a preferred way of replying.
And I'll give that input a name of reply.
The name here will be the same one
for all the radio buttons that belong to this group,
but I'll then also give it an id of reply-phone
and the ids will be unique.
Every radio button has its own unique id.
I will also add the value attribute
to set this machine readable value,
which will actually be submitted to a server
when that radio button is selected,
because you learned that if we don't set this,
there actually is no value that would be submitted
because this is not a input
where a user types something into a input field.
The label text is definitely not submitted
and hence without the value attribute here,
nothing would be sent to a server.
So we absolutely want that.
And here, I'll use phone as a value
that should be sent to a server
if this first radio button is selected.
And now as a last step, I'll set the for attribute here
on the label and point at the reply-phone radio button,
so at this id.
And then we can copy this
and create a second radio button
where we say, send me an email.
And here the name is still reply because as mentioned,
they all belong to the same group, all those radio buttons.
But the id here is reply-email and the value is email.
And therefore the for value is reply-email as well.
And then I'll copy this again.
Create another radio button where we can say don't reply.
So we're sending a message, but we don't want a response.
And here did, could be reply-none,
the value could be none and here
for the for attribute we point at reply-none.
Name as mentioned, still is reply
so that all these radio buttons belong
to the same group.
And only one of them can be checked at the same time.
Now, I'll add one more section here,
which will hold a checkbox,
which we can use to accept the terms.
And for this- in this section here,
I'll also display a input of type checkbox here now,
and then the label after this input
and later we'll style it such that it sits in the same line.
And then here, I'll just say, accept terms.
And on this input,
we can give this a name which is accept terms maybe,
and an id, which could be accept terms.
And it's this id at which we now point
with that for attribute.
So we're doing the same thing over and over again
in the end.
And that is very common of course
when you're building forms because after all,
you are just dealing with a bunch of user input.
And now last but not least, here in this form,
I'll add a last section with my buttons.
And here I wanna have two buttons
because I had two buttons on this challenge,
which I showed you earlier.
And here, I want to have a button that clears the form.
We can achieve this by setting the type
to reset as you learned,
and add a button that submits the form.
And here we could set the type to submit,
or we omit the type that would also work
because then the default behavior of a button in a form
is that it does submit that form.
But with that, with all that added,
we wrote a bunch of HTML code.
And now we got this form.
It's not pretty, but it there and it also would work.
We could use it.
However, of course the styling is missing
and I also then want to configure it a little bit.
I wanna make sure that it's submitted in a certain way.
And I also wanna add some validation.