Now, regarding the inputs
that we want in this form,
this form has various elements
and also various sections
into which we can group these elements in the end.
For this, you're inside of this form element.
I'll remove this dummy text,
and instead add a new section
with that section element here.
And then add a title where I'll say,
"How can we help you?"
Because after all, it's a contact form.
And then here, we, first of all,
want to get some basic information about the user,
and then, of course, the message
that the user wants to send us,
which answers to question how we can help.
And for this, I'll render a unordered list of inputs,
which are related because they all belong into this section
where every input has a label
and then the input element itself.
And that's, of course, the same pattern
we used in this module.
After all, this is the practice project for this module.
So here for the first input,
we can add a label where we say,
"Your Name," and below that,
add an input of type text with an id of username,
for example, and with a name attribute,
which holds this identifier
that can be extracted on the server
when the form is submitted
(something we'll do later in the course)
which could also be username,
but it can also be a different value.
It doesn't have to be the same as the id.
Now you did learn that labels
should be connected to inputs
with help of that for attribute,
which points at that id of the input
to which the label is related.
So in this case username,
since that's the idea of the input
to which this label belongs, like this.
Then, I'll add another list item here, like this.
And they will basically have the same format.
So I'll copy that label input combination,
but here I want to get the email address of the user.
So we could say, "Your E-Mail Address,"
and the type of the input, therefore is email.
And therefore, of course, the id
and the name value also should be different.
Here we can also use email in all these places,
or any other identifier of your choice.
Then, we also want to get the phone number here,
so I'll copy that list item,
and add another label input pair
where we say, "Your Phone Number,"
and here we can use input type we have not seen thus far.
We haven't covered it up to this point.
And therefore, if you did not use that type,
that's of course, no problem,
but maybe you also saw that type
in the IDE auto-completion or in MDN.
There is the tel type,
which we can also assign to inputs
to display an input, which is optimized for phone numbers.
Which matters especially when we visit
and use this form through a mobile phone.
Then on a smartphone, we will get a keyboard
that makes entering phone numbers easier.
That's why this tel type is important.
And then here we can use phone as an identifier.
And as you see here,
I will always use the same value for name and id,
though you could also use different values.
Now then, I'll add one last list item here,
and that will actually then be the actual message
the user wants to send.
So I'll say, "Your Message," on the label
and target an element, and input element
with an id of message.
But here, I will not use a regular input element,
but instead that text area element,
which is the proper element
for longer text that's entered.
And here you learned that unlike the input element,
the text area element is not self-closing,
it's not a void element.
Instead you have an opening and a closing tag here,
and that is just something you have to remember.
And then we can give this an id
and also a name, of course, like this.
Now with that, I'll then add a second section
in this form because now we got those basics.
We got the basic data.
If you will recall that finished version which we want,
which has showed you in the last lectures,
when I gave you that challenge.
There, we did not just fetch this basic information,
but we also want to find out how the user found us.
And we want to get that reply to that question
with help of a dropdown.
So therefore here in this section,
I'll add another label where I say,
"How did you find us?"
And then I'll not use an input,
not use a text area,
but instead create a dropdown
with help of the select element here.
And then you learned that select works such
that you have various options inside of it.
And every option can have a human-readable text
between the opening and closing tag
and a machine-readable value optionally
with the value attribute.
And here I'll use both.
I'll give this a value attribute where I say search
and a human-readable text of, "Web Search."
And then I'll add another option here,
where I set the value to word of mouth,
and also use "Word of Mouth" here.
And last, but not least,
add another option where I set the value
to other and say, "Other" here,
as a human-readable text.
Now just like the other input elements,
input, and text area,
select also gets a name,
which then would be used on the server site
to extract that selected value
and also an id to select it to the label.
So here I'll just use channel as a name
and also id as a channel,
as an id, I mean,
And for the label, we set the for attribute
and point at channel, therefore.
And that's it for this second section here,
where we did add to this dropdown.
Now we got a couple of other sections left here,
one section with radio buttons
where users can select how we should contact them.
One section with a checkbox,
for accepting the terms.
And then also a section with the buttons.
So let's now tackle that.