So we get this first input here.
This first input certainly allows the user
to enter some text,
but it's actually not creating a complete form yet.
This input is not submittable right now.
We can enter content in there.
We can hit the enter button thereafter if you want,
but that won't submit the form.
And there also is no visible button,
which we could click to submit the form.
And therefore we should add
one other HTML element, at least.
One element, which you will also need in basically any form
you're building -- a button to submit the form.
And therefore, maybe below the input here,
I'll add this special button HTML element.
And this is now not a void element,
but an element, a standard element
with an opening and closing tag,
because between those tags,
you enter the caption of the button.
So, the text which shows up on the button.
And here we could say "submit",
but we can say whatever we want.
We can say, "save" or "add user" or whichever kind of form
we're building.
I'll just say, "submit" here.
And if I save this, you now see there is this submit button.
And here's one interesting thing,
which we can see right away.
Both the input element,
as well as the button seemed to be inline elements.
Otherwise, there would be a line break after the input.
And we can, of course, confirm this
by inspecting our elements here.
If I inspect the input element,
we see that there are a bunch of browser,
default styles applied.
Most of them are fine,
but of course, you can also override them as you learn.
And one thing you see in here,
is that display is set to inline block,
which means it behaves like an inline element,
but regarding the margin and padding and so on,
it also has characteristics of a block element.
But it behaves like an inline element in general.
And it will only wrap into a new line, as it does here,
if there's not enough space on the screen.
But if there is enough space,
both elements sit in the same line.
And they sit in the same line
because not just the input element is an inline element,
but the button is as well.
If I inspect the button here, I see that there,
we also have display inline block for the button
as a default style.
And that's just something to note.
And of course you can change that by setting
the display CSS property to block in your own CSS code.
If you want to have these elements treated
as block elements, you simply overwrite that default.
And that is something which I will do here.
I'll go back to my styles and I set my input element
to be display block,
so to act and behave as a block level element.
And I'll do the same for the button.
I'll set it to display block.
Though, theoretically setting the input element
to display block would suffice here,
because that would already force a line break
after the input, since the input will then take
the full available space.
But with those changes made,
now we see the button in the new line.
And of course we now might want some spacing
and therefore on that input,
I'll actually add a margin bottom here of,
let's say, one REM.
And if I saved that, then we have that spacing here.
Now, that's all nice and good.
Now we have the input element where we can enter anything,
and we have that button,
but clicking that button does nothing.
I can hammer this button and nothing changes.
And the reason for that is,
that yet another extremely important HTML element,
which we need for any form we're building is missing.