Now that we covered all those base elements and
configurations for these elements,
before we explore validation and showing
the user some feedback,
if some entered input value is incorrect.
Before we do that,
let's have a look at the HTML code
we've got here for this form.
And let's talk about semantics here
because you learn HTML is all about semantics,
and we want to describe our content as good as possible
so that, we, as a developer
always have a good time working with our code,
since it's nicely structured.
And of course also so that users with assistive technologies
and search engines
understand our content as good as possible.
Now for that having a label,
which is connected through the four attribute,
is one of the most important things.
And we are already doing that.
But we can also add more markup
to make this page and this form more meaningful.
For example, we could have an h1 element
above the form
where we set a main heading for the overall page.
Of course, often your form will just be a part
of the overall page
and not as here, the main part,
but nonetheless, having such an H one tag
could make a lot of sense.
So here I'll just say,
demo form because that is what it is.
And of course we can wrap this in a header.
We don't have to, but we can.
And we can put the form into a main element.
Again, that's not mandatory here,
but it doesn't hurt
since we know that main element anyways,
we now make it very clear that the form in this case
is the main part of this page.
But now let's talk about semantics inside of that form.
I got a bunch of inputs here,
and this code is a bit hard to read for us as a developer.
Now, if we have a look at our form,
we could think about different sections,
which we identify in this form.
We could say that we have a section with the core data
about us, maybe our name, the email, and the password.
Then we could have a section
with the extended personal data,
the age and the birth date
and the favorite color maybe.
And then we could have a section with this message.
And then we could have a section with our
verification and contact details,
and last but not least a section
about agreeing to the terms.
And therefore I'll add a couple of sections here,
inside of this form.
I'll add the section element there for
and then move this username label and input in there,
and also moved the email address label and input in there.
And then I'll also move the password label and input
into this section here.
And now every label input combination could also be
included into some wrapper element.
For example,
we could say that this technically,
if we think about it,
is a list of personal details data.
So we could add an unordered list
or an ordered list,
if you think that the order matters here,
but I would say the order is not that important.
And then we have various list items in there
and we move our label input combinations
into those list items.
Again, that's not something you have to do,
but it might improve to semantics
of our form a little bit.
And then it is definitely something
which we could consider doing.
And for demo purposes, I am doing it here.
Now thereafter,
I have second section here,
with our personal details,
like the age.
And again,
I'll have an unordered list in here
and a move my age label input into this first list item.
Then add a second list item with the birth date,
let's say.
Of course, theoretically,
we could calculate the age from the birth date,
but I'll keep the age input field around
so that we also have an example for the number input field.
And then last but not least,
I'll add a list item with my dropdown here,
and it's label.
Like this.
Then we can have another section,
which only has one element in there maybe.
That message here,
because it is just about getting that message.
Now I'll remove that hr element,
because now we don't need that separator anymore.
And instead,
I'll add yet another section
where we talk about this account verification.
So here I can grab this h2 tag
and all those divs here,
though,
once inserted into the section,
I actually want to replace the divs with list items
and move that into a list as well,
because having list items makes more sense semantically
than having divs.
So let's use LI instead here,
and let's move the other radio buttons
also into this unordered list
and replace the div with LI here as well.
Just like that.
Now we might have another section regarding
those contact details.
And hence here, I'll grab these two divs
and add them into this section
or
to be precise,
revert this and add an unordered list first,
and again, use list items here instead of divs.
So list item,
and list item,
and list item.
And then last but not least,
I'll have one last section here with that,
or the almost last section with that
agree to terms,
label and checkbox.
And here I'll keep that div as a wrapper,
since I have only one input in this section,
having a list makes no sense here.
Now we can also create a separate section
for the button if we want to
and move that in there.
Now we can also add some titles to those sections
if we want to.
And again, I really want to emphasize that none of that
has to be done, but you can do it
if you want to add these extra semantics here
and maybe improve the
overall semantics of your form therefore.
The titles, of course are optional.
If you don't want to display a title in your form,
then you shouldn't add one.
But here we could say your personal details
in the first section as a title,
in the second section,
we then say,
more details because I'm extremely creative here.
Then in the third section,
we could actually omit this h2 tag
since we only have one input here anyways,
and the label describes pretty clearly
what this text area is about.
In the next section, we already have a title.
And then here
in this section with these contact details,
we could say,
'how should we contact you' as a title.
So as a h2 element.
And then down here in this section,
I'll omit the title again,
because agreeing to the terms is quite straightforward here.
And I also don't need a title here for this button.
With that of course, it now looks very different.
We have all these bullet points for example here,
and I don't want those bullet points.
This age one title also is very hard to read.
And therefore, of course,
we also want to work on this styles again.
For example, on the h1 element,
I'll align the text in the center,
with text align center, and set the color to white,
to make this text easier to read.
And then I also want to target all unordered lists
on this page
and set the list style to null,
to remove these bullet points
and set margin to null and
padding to null as well,
to remove all indentation
so that we have the lists for semantic reasons,
but we don't get any visual effect from these list items.
With that, the form looks basically as it did before,
just with some extra titles in there.
And I would argue that these new elements
and these new titles especially,
did not just improve to semantics off the form,
but actually also make the form a bit easier
to digest as a user as well.
It's now more structured than before.
Now I want to have a separator between
the contact check boxes and the agree to terms check box
and for that here we can bring back this hR element
if we want to.
And that with this, we've got this horizontal line again.
Not a must do, but something you can consider doing here.
And with that,
that form is looking good from a
styling perspective.
And I would say now also from a semantic perspective,
if we have a look at the raw HTML code.
And here we also can really see how
these better semantics also help us as a developer.
Because now if we compare this to the previous form
of this form,
it's way easier to identify the individual input items
and to work on that code.
It's more structured. And that also helps us as a developer.