Instructor: In this video, we are going to work
with form elements for the very first time.
So this is gonna be really interesting and important.
So let's get started here.
But before we work with the actual form elements,
let's first place some other content here,
in this cta-text-box.
And first of all, we have I think some paragraph here.
So here, this is the section
where we actually get the instructions,
so create a simple form for users to sign up.
And then here is like some text,
and this here what looks like a heading.
So let's grab this and use it as a secondary heading.
So h2,
and so here we will again use the heading-secondary,
but this time without using first the subheading,
because here we do not have enough space for that.
Okay? And then below that,
we have some paragraph,
let's call it cta-text,
where we can then place this.
So basically one final text to try to convince the user.
Now we offer a free sample meal,
sounds a little bit boring,
so let's try something else.
Get your first meal for free,
right?
So let's check that out.
And whenever we change the HTML,
it then jumps back up on the page.
But anyway, here is what we have so far,
and, well, first of all,
we need to add some padding here inside of this box.
And then what I can see immediately is
that this text here looks a little bit unnatural
on this background color,
and specially this one here.
But even here it is a complete gray of course,
and to contrast with this background color is not perfect.
Now, we could leave it like this,
it would be no problem at all.
But I want to actually show you something here,
that we talked about in the color design lecture way back.
So what I mean is that we can use a very dark shade
of the background color for the text, basically.
So instead of it being a completely unrelated gray color,
alright?
So let's do that and grab one of these colors here,
and let's maybe try this one.
Alright, so let's set the color here on the cta-text-box,
and so then the cta-text will inherit it,
but not this heading-secondary,
because heading-secondary does actually override that.
So what I'm gonna do here is to use the descendant selector,
and say,
a heading-secondary
that is inside of the cta,
should also have that color.
Alright.
And now since we're here,
let's also add some padding here.
So 6.4 rem, maybe.
Okay?
And we can also dramatically reduce the margin to the bottom
that the default heading-secondary has.
So let's say just two or 3.2 rem just like this,
and that already looks a lot better, right?
So it would be quite acceptable like this,
but maybe it is still a tad to dark here.
So I mean like this,
it almost looks like black or still a normal gray.
So let's try the next one here.
So replace that in both places, and...
Well, maybe before we do that,
let's also increase the font size here,
because that will also help it make it look more normal.
So let's actually select the cta-text,
and give it the font size of 1.8 rem,
and line height of 1.8 as well.
And we are using this here so many times,
the combination of these two,
that we could almost make it into its own class, right?
But let's not overcomplicate things here.
Just keep it like this.
And beautiful.
So this looks really cool, I think.
The color now is nicely integrated
into this background here.
Let's just see if this is also okay
in terms of the color contrast.
So getting this one here for the text.
And then the background,
well, it's kind of this one here at the top,
so let's just try that one.
And yeah, that is pretty good.
And even if it was here a little bit darker,
then we would still be fine.
So that is in short,
and so now here we have this working beautifully.
Let's just remove some of the space in the top here,
because having the big heading here gives it the impression
that there is more space than there actually is.
So we can reduce that a little bit on the top,
where, ah, right here.
So we can step it down a little bit here.
So the top, we can go one down to 4.8 rem,
and then the others will leave them at 6.4,
all of them.
Okay? Nice.
And so now it's time to actually start working
on that form here.
So again, that's going to be the very first time,
so let's take care of that now.
So right here after the text,
we will now introduce the form element.
Now the form on its own doesn't really look
like anything special.
It's really just a box, basically,
for the input elements that we're gonna use next.
So we still need to format it.
So let's give it a class of cta-form.
Alright, let's close down the sidebar here again.
And so now it's time to start using some real input fields.
And for that we can use exactly the input element.
So input,
and then the most important attribute that we need
to set here is the type.
So VS Code automatically gives us here a couple
of different types.
So probably that's actually all the available types,
and the most common one is text.
But you see that we have different types
for password, for numbers,
for uploading files, for emails.
And so we're gonna use a couple of these as we go here.
But for now, let's use a regular text input field,
which is the most common one.
Okay, let's do another one.
Input.
Let's try email now.
Then next we can also add a button,
and we can do that in two ways.
First, we can use input of the type submit like this,
but I actually prefer to use a regular button.
So if we just use a regular button here,
and then click that button,
the form will automatically be submitted.
So let's just use the one that we already have used before,
and let's say sign up now.
Alright?
Now of course when we click on this button here,
at some point, then nothing will happen.
So usually we will need some code on our server,
that is then ready to receive a submitted form.
So with HTML, we can actually only collect the data,
but we cannot like send data anywhere,
and we cannot receive it anywhere.
So with HTML, we can only collect some data,
but we cannot receive it anywhere.
Alright, so really on the HTML side here,
this is just for receiving and for sending the data.
And to send the data,
we can define the action tag here or the action attribute,
and then we can set the URL of the place
where the data should be sent to.
And again, you would then need some code on your server
that is ready to receive this data,
and which has a URL where you can send it to.
But for now, let's just set it like this.
But actually by the end of the course,
I will show you a great solution,
where we can actually make this form work.
So without having to write any code on our backend,
so on our server.
Okay? But anyway, let's just take a look
at what this very, very simple form looks like in HTML now.
So in the browser.
So indeed, we have two input forms where we can write,
and we have a button.
And then as we click this here,
you see that we get this warning.
And so that is because the browser knows
that here we should have written an email.
And the reason for that is that in our HTML code,
we defined this as the type of email, right?
And so that is very, very helpful then.
Now here we can also make a couple of different things.
So for example, we can define a placeholder.
So placeholder, and then it is common,
as a placeholder, to display kind of the format
of the data that we want.
So let's say John Smith.
Now what many people do here in the placeholder is
to actually give a label to the input.
So instead of writing here, John Smith,
we could write also your name,
Right? Then here it would become more obvious
what you need to write here in this field.
Then of course, as you write something,
that will override the placeholder.
But again, it is actually a better practice
to here write the format of the data that you expect,
and write the actual label into the label element.
So in HTML, we do have an actual label element,
which we use exactly for this.
So let's say here we want the full name.
Okay?
So the label element is actually like a complete element
with a opening tag, a closing tag, and content.
While the input element, as you might have noticed,
only has the opening tag, but it has no content.
So that's why it has this closing slash right here.
Okay, let's try another label here.
So email address.
So let's actually also put a placeholder here,
like me@example.com.
Alright, so there we go.
We have our label here.
And then besides that, we have the input field,
and they are all side by side,
because they are all inline elements,
so by default, all of them will not create a line break,
and will simply be placed one after another.
Great. Now, another thing that we can do with labels,
which is something that maybe you have experienced before,
while using the web,
is that we can click on them
and then the input field that belongs to it
will become active like this.
So that is something very common,
and it makes a lot of sense to implement this.
So let me show you how.
So here in the input, we can define an ID.
So remember way back when we actually used ID,
to also select elements in the HTML,
but we can use IDs for other things.
For example, for what I'm gonna show you now.
So let's call this one here, full name,
and let's call this one here, email.
So not a class, but an ID.
And so now here we can define the for attribute.
So yet another new attribute.
And so that's why learning forms
can be a little bit of work,
because there's a lot of new stuff here all at once.
But anyway, here now we can write that exact ID
that we used here.
And so with this,
we basically link this label to this input.
Alright, and here, let's do the same thing.
So this now is for the element that has the ID of email.
And so again, with this, we linked these two together.
And so now when we click on this label,
then you see how it automatically selected
the corresponding input field.
And the same here with the email address.
Okay?
And now let me just show you some more here,
even though we are not going to need them,
but I will still show you how they look like,
for example, a checkbox, that's a very popular one
or also number.
So here we have a checkbox, just as expected,
and then we can also create a label for that.
And then when we click on the label,
it will automatically turn the checkbox on and off.
Then here when we have a number,
you see we have these small arrows here.
And when we try to input a letter,
well, that shouldn't work,
and it doesn't work with most numbers,
but with E it does work because
that's a special mathematical constant.
Alright. Now let's turn these two off here with comments
and move them down here,
because next what I want to do is something different,
which is a select box.
So let's write select like this,
and then in there we can define multiple options.
So for that, we use the option element.
So more and more elements here.
But anyway, this select here, I want to use it
for the user to tell Omnifood
where they heard about them.
So actually let's create first a label here.
Oh, that's not what I wanted.
So a label, where did you hear from us?
And again, here we can give it an ID.
Let's say select-where,
and then to connect them,
we say for, select-where.
So here, let's then add a couple of options,
like friends and family.
And maybe that content is also here.
No, it's not.
So I'll just come up with it here.
But before I write the next one,
we also need to define a value here.
Okay? So I will explain a bit later why that is,
when we actually submit the form here.
But essentially, here the value of this input field
will very simply be the name that the user writes
into the field and the same here for the email.
Now in the select,
the value will then simply be what we write here.
So for example, friends.
And when the user then selects this option here,
then the value will be friends.
Let's just add another one here.
Let's say youtube.
So YouTube video.
So let's see it here on our page very quick.
So here is the select box.
And so if we select this one here,
then the value of this field here,
will basically become youtube.
So the value that we defined
on the option element for this one, right?
And if we choose this one here,
then the value of this input field
or of this select element will become just friends.
So exactly this value, right?
Now, the first one here should actually usually
be basically an empty one.
So not class of course, but value empty,
because here we can then write something like,
please choose one option.
And so since the value is empty now,
we are then not allowed to submit the form
with this one here being empty.
Now, let's duplicate this here a couple times.
Let's say we heard from them in a podcast
or a Facebook ad,
and then also the others option,
which we always have,
then add and podcast.
Alright?
Give it a save.
And so here we have all of these.
Okay?
Actually we are allowed to submit the form,
and that's because there is still more
that I didn't show you yet.
So we can define even another attribute
on these elements here, which is the required attribute.
So we already have ID, type, placeholder,
and now let's add required.
And this attribute for the first time doesn't need a value.
So it's just required, and that's it.
So let's add that.
Well, not to the label, but to the input.
So let's make all of them required.
So that works on inputs and also on select.
Alright.
So let's try that now again.
So if we click here now,
then it says, please fill in this field.
So just something, then please fill in this field.
But then when I write it with the wrong format,
it tells me to please include an at.
So I do that,
dot com maybe.
And if I try now, then it still doesn't work,
because this first default option here is empty.
Remember that?
So the value here was empty,
and so we're not allowed.
But if we then choose something,
then the form will get submitted basically.
So it will be sent to this URL right here,
which we defined.
So this empty hash, right?
But again, more about that.
So more about this action here a bit later.
Okay?
Now, right now the way the form looks is a complete mess,
right?
So everything is just like one after another here
without any structure at all.
And so what we usually do is to always group
the label and the input together in some div element,
or some other container.
Alright?
And this one I think might not even need a name,
so a class name.
This is just to group them together a little bit,
because, by doing this,
we will then be able to also group them in that grid,
like I showed you at the beginning.
Or not like,
oh, actually we need it all the way down here,
after the select.
And then let's also actually place this one,
and then this one,
the button I think might not need any container.
So that should now look different
because each of them should now be in their own line, right?
And so that's because the div of course
now created a block-level element,
which creates a line break after it.
So here we see again the label in action,
and it works just fine.
And so now just before finishing this video,
let's quickly format these four containers,
or, well these four elements here,
into a nice two-by-two grid.
Alright, so that is the cta-form.
Let's do that maybe here at the very end,
because there will be a lot of styles after this one.
So cta-form,
display as a grid,
and they should have two equally-sized columns, 1fr,
and let's give them two different gaps
because remember many times in the column
we need a bigger gap.
And so let's do that here as well.
3.2 rem maybe,
and for the rows, one step down,
so that is 2.4 rem.
And then also to create some space
between this paragraph and this form,
let's just add some margin bottom here to this cta-text.
Now, we could also have wrapped this entire thing here again
into like a header,
but let's not do that right now.
I will just add some margin here.
So a bit more than here after the heading.
So between the heading and the text,
there is 3.2,
and let's now increase it to 4.8,
which is the next step.
Okay?
So that is not perfect,
but it is looking a lot better than before.
And so with this,
we will now be able to style all of this
in a next lecture.