Original subtitles

In this video,

we are going to work with form elements

for the very first time.

So this is going to 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 textbox.

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 especially this one here.

But even here,

it is 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.

All right.

So let's do that and grab one of these colors here,

and let's maybe try this one.

All right.

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 going to do here is to use the descendant

selector and say,

the heading secondary that is inside of the CTA

should also have that color.

All right.

And now, since we're here,

let's also add some padding here.

So 6.4 REM maybe.

Okay.

We can also dramatically reduce the margin to the bottom

that the default heading secondary has.

So let's say just two or three point to 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 too 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 a font size of 1.8 REM

and line height of 1.8, as well.

And we are using this year 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 to 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 a 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,

we 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 going to use next.

So we still need to format it.

So let's give it a class of cta-form.

All right.

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 going to 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.

All right.

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 or server

that is standing ready to receive a submitted form.

So with HTML, we can actually only collect the data,

but we cannot, like, send the data anywhere,

and we cannot receive it anywhere.

So with HTML, we can only collect some data,

but we cannot receive it anywhere.

All right.

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 or 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 place holder.

So place holder,

and then it is coming as a placeholder

to display a 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, and then here,

it would become more obvious

what you need to right 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 the content.

While the input element,

as you might've 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.

All right.

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 going to 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.

All right.

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, the 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.

And 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.

All right.

Now let's turn this to 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 it, 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 will 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 of 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,

and add, and podcast, all right.

Give it a save.

And so here we have all of these, okay.

Oh, and 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.

All right.

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 @.

So I do that.

.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.

All right.

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.

Well, 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 while these four elements here

into a nice two by two grid.

All right.

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 the next lecture.