Now for that to get our hands dirty,
I have a brand new project and empty folder again,
in which I wanna start from scratch.
So you can also just create such an empty folder
and follow along.
And in there, I'll do something
which we did many times already.
I will create a new HTML file, because of course,
we're going to write some HTML code.
After all, we're talking about important HTML elements here,
when it comes to building forms.
Now I will again name this index.html, though you do know,
that this name is in the end, up to you.
And in there, in this index.html file,
I will create this basic skeleton by entering
an exclamation mark and hitting tab.
And then, I'll just clean it up a little bit
and get rid of this line here and change the title
to HTML Forms, though of course, the title is up to you.
And now, here in the body section,
I wanna get started with some forms
and with some form elements.
And for that, I wanna get started with that
most important or most common HTML element I mentioned,
the element like this.
The important thing to note about the element
is that it's a void element.
So you don't have opening and closing tag here.
You don't have that.
You just have that opening tag.
Even written like this, or as you know,
self-closing with that forward slash.
Both is possible for those void elements.
The only important thing is that you have no content
between opening and closing tag,
so that you have no closing tag therefore.
And with that, if I save this,
if I open this page with my live server,
if I zoom in a bit, I see this element here.
Now it's totally unstyled and maybe a bit hard to see,
but you should have this element on your page.
Now to make it a bit easier to see,
let's add some styling right away.
And for this, I'll add an extra CSS file,
the styles.css file.
And then I'll add this link here
and I can just type link and hit tab
to get some auto completion and then import styles.css.
And in styles.css, I then wanna target the body
first of all, and give this body some background color.
And here I want to use some dark color.
So I'll use black as a starting point here
with zero, zero, zero and then choose
a dark gray color here, like this.
And I'll also ramp up that margin and set that margin
to 8rem here.
Rem is a new unit you'll learn about
in the responsive websites course section.
And I'll then save this, and with those changes made,
now this is a bit better to see,
because it's not in the top left corner
and it now is in a contrast color to the background.
And that's our form input.
And in there I can enter, for example,
my name or anything else.
We can enter some text in here.
And that's important, we can enter some text in here,
any kind of text, because the default type
of this element is that it expects some plain text.
So any kind of text.
And I did mention, that you can configure this type
with the type attribute.
And in most cases you will specify the type
to make it very clear, which type of input
you are expecting.
And even if you are expecting some standard text,
it's still a good idea to set type="text",
which is the identifier for expecting standard text
to make your intentions super clear.
And with that, with the type attribute set to text,
we have this standard text input
where we can enter anything we want,
and as much text as we want.
And you see, it automatically scrolls.
And of course, we can also scroll in there
and change that text, and so on.
Now we might want to change the styling
of this element as well,
maybe to make it a bit wider.
And of course, that's also something we can do.
In styles.css, we can also target the element
with that type selector, or we give it an ID
or a class and target it by that.
So we target it like any other HTML element,
and then we can basically also style it
like any other HTML element.
There are a couple of interesting styles
or interesting features to which I'll come back,
but for a start, we can style it however we want.
And here I'll therefore give this a fixed width
of let's say 20rem.
And if I save this, you see it now is wider.
And that's an element where setting a fixed width
makes a lot of sense, because it has a width out of the box.
As you saw, it has a certain width and in most websites,
that's probably not the width you wanna use,
but instead you wanna set your own width
and that's what we're doing here.
Now, you can also style other things as well.
The size of the text in there with font size, the border,
the background color, all of that is possible,
but all of that is something I'll do a little bit later.
For the moment, I instead wanna explore
other elements first and in general,
how you set up a form and then we'll build a complete
example form with proper styling from start to end
later in this course section.