Voiceover: Welcome back.
Let's build a simple contact form in this lecture.
To be honest this section was not
so much about making things beautiful and functional,
but more to show you everything you need
to know about forms so that you can build
even bigger and more complex forms in the future.
So, this is a simple contact form
as you can find it in numerous websites out there.
And in this lecture you'll learn a lot of new things.
You'll learn how to build a useful form
using new HTML elements such as
form, label, input, select, option and text area.
Then you will learn how to use CSS to format
those different elements.
So let's do this.
So back in our brackets app,
we'll create yet another section,
this one called section form.
And once again, we create a row here
where we will put our title.
So let's get the text for this section.
That's not a lot this time.
So the title is, this one.
And now let's create our form.
And we will do that in a row.
So live, class and row again.
Now, a form is like a group of input elements,
and we have an HTML element
where we need to put all of them,
and this element is called the form element.
And it needs to have a couple of attributes.
One is the method.
You will choose post here,
but this is not relevant for us in this case,
because this is only needed when we send this form
and that requires a lot of programming in other languages
and we will not talk about this in this course.
So in this course we will only format this form,
but we will not be able to send anything from it.
So another attribute that we need to define is the action,
which is like a link.
So it is empty in this case,
and the action could be the script,
which handles how the form will be sent.
Which, again, we will not talk about
in this specific course.
And then, also, a class, I will call this contact form.
Alright, now we can fill this form with our elements.
And we will put a couple of rows in here,
and in each of those rows we will then have
our different input elements.
So we will have one column for the label,
for example, name, email address, or something like that,
and then one column for the input element.
So, it is a column and now it's something a little special
because we want one column to be bigger than the other one.
So I will say that I want the first column
to be a span one of three,
such as we used a lot of times before
and then the second column will be span two of three.
So these two columns together make the whole row,
so one plus two makes three.
And this means that this column will be twice as wide
as this column here.
And I will actually show you how this works.
So the one of three has a width of 32%, approximately,
and span two of three will have 63% approximately.
Alright, so as I said in the first column we want the label
and we have an HTML element for that,
which goes like this, it's just labeled and then,
let me see, it is name.
The first one is name, and that's it for now.
And now we want a little text box,
and in order to do that, we use the input element
and the type of this will be text.
So you can see in this list here there are lots
of different input types and we will use some of them,
but for now, I will just use the text element.
Now, in each of those, we should also give those a name
because that name will later be used to send that form.
Let's call it name, because that's what it is here, right?
And now I will also define an ID here,
which is also name.
And another interesting thing we can do here is placeholder,
and the placeholder is the text that appears
inside of the text field
before we write anything inside of it.
So here I will say, for example, your name.
And the last thing here, we can just add this keyword,
required, and if we do so, the browser will not allow us
to send a form without completing this field.
So this is very handy.
You can just write required and then Google Chrome,
or whatever browser, will handle that for us.
Okay, I will just show you how this looks like by now.
Nothing special, of course, but here it goes.
So this is a placeholder and this the first column,
and this is the second column.
And as you can see, it's much wider.
The text field is not as wide as the column yet
but we will change that once we come
to the CSS part of this lecture.
So for now, let's continue
and I will keep on adding some rows here.
So the next one is for the email.
So I will change it here,
and you can actually also change the type here,
to email because that's one of the possible
HTML input types.
And so the browser will recognize
that you need to write an email inside of the field.
Well I will call this email and here your email,
and this field's also required and can only be sent
if a valid email address was written inside of that field.
Okay, so yet another line is, what do we have here?
How did you find us?
Maybe we can put a little dropdown box?
We will not use this,
so dropdown box is just a couple of options
where you can choose one from.
And in order to do that, we use the select element
and we'll call this find us
and also add the ID find us.
And I will tell you in a moment why we need these IDs here.
So don't worry.
And now, each of the options that we want here
needs to be defined using the action element.
And we need to specify a value, I will do that in a moment,
and then the text we want to see.
So in the first one I want to say, so how did you find us?
Let's say, friends, and the value here can be friends.
And again, this value here source then for the script
that will handle the form once the form is sent,
which again we will not be able to do in this course.
So next, what can we put here?
Um, for instance, search engine.
So, search,
or maybe it was an ad, advertisement.
And just to complete this, we can say we found it
in some other way.
Alright, so, how does it look like?
So we have the options we put there
inside of this little list.
So this is starting to look great, right?
And we can also do another thing here.
We can choose one of these and say, selected,
which is this one, this will be the first one
that will be selected, see?
Search engine.
Alright, I don't want this here, let's put it here.
Now the next thing is to ask us if we want a newsletter.
So again we want a row with a label newsletter.
And now I will issue another input type
and this one is checkbox.
So checkbox is just what the name says,
it's a box where you can choose
yes I want it or no I don't want it,
and the name here will be newsletter or just news
and the ID also news.
Placeholder, yes of course, none of it.
And here I can say that I want this checkbox
to be checked from the beginning,
so the default will be that it is checked.
And then some text here, for instance, yes please.
So it's already selected there
and then we have our text there.
So just a simple checkbox.
Now the last thing is wrap as align,
so that means that it is a field
where we can write some email, some message.
And in order to do that we want a bigger text box.
Copy this here.
So we will use something different
'cause we want a big text area and that's exactly
the name of the HTML element.
And this also needs some attributes,
so I will call this name, message.
And it can also have a placeholder like your message.
Okay, and then the last thing
each form should of course have is a submit button.
So we don't want anything in here because we want the button
to be aligned with the fields of this form,
and such as I did in the section before,
I will use the NBSP special character
so that we have an invisible space there.
And the button is also an inbox element
and it's called submit, and doesn't need any of this.
But it has the value attribute
where we will put the text we want to see on the button,
and in this place just say send it.
We don't need this.
So save this and let's see.
So this is a bigger text field
and we can actually resize this in Google Chrome.
And then the button, and as you see this field,
since I didn't fill it out, Google Chrome tells me,
Please fill out this field.
And if I do, it will not say fill this out.
And I'll, since I said this would be an email field,
Google Chrome knows that I should include
the special symbol here in the email address.
So one last thing is, as I promised you I would explain
to you why I included these name IDs here
and that's for a simple reason,
because here in the label we can use the for attribute
and then put the name of the ID here
so we kind of link the label with the input
and this is what happens.
So now, we can click this and then the field gets selected.
Cool, right?
Do this for the other ones as well.
For, email.
And this actually only works with text forms
and also with this select element.
So this one is find us, but it doesn't work
with a checkbox and neither with the text area,
so I will just leave it like this.
And now if I click here, this gets selected.
Okay, I think for the HTML part, that's it
and so in the next lecture, we will just format this
to make it look great, such as we always do.
Alright, so, see you there!