Original subtitles

All right. So I've added a few more details here and there to

this personal site

and it's now really coming along and starting to look like a real website that

you might come across browsing the web. Now,

the next thing that I want to do is when we go to the contact me page,

it's a little bit sparse at the moment. It's only got my fictional address,

my fictional number and my fictional email. Now,

what if I could add a form at the end of this

where I allow people to put down their name and their email

and they can message me using that form?

How would we do that in HTML? So,

of course, first place to head to

is the MDN web docs. And we've got our form element.

Now you can read through all of these attributes and start getting an

understanding of how a form works and how you can put one together. Now,

in order for forms to really come alive and to work as you would expect them

to, it actually requires a little bit more than just HTML,

because we need to specify the behavior of the form.

We can design the form and we can structure the form for our website

but until we learn about JavaScript,

we won't be able to tap into its full functionality just yet.

But we can get pretty close.

So let's go ahead and create a brand new form inside our contact-

me.html page. Just below the last paragraph tag,

let's add a brand new form. And you can see that with the autosuggest

these are the default things that come up. Now,

I'm going to keep them as they are and

we're going to go inside the form tag and we're going to create our first

label.

Now our first label is simply going to be called your name.

So this is where we ask our user for their name input.

And in order to store that information or allow them to type that information,

we need to add an input and the type of input is going to be text.

So it's just going to be a text box that allows them to put in their name.

And if we hit save and check out what our website looks like at the moment,

then you can see we've got our label here and we've got a box where somebody can

type in some inputs. Now the thing that we're missing is a submit button.

Now a submit button also falls under the inputs of a form and you can see it

right here.

It's simply an input instead of having a type of text,

it has the type of submit and all you need to do is to change the word text

to submit and delete the value attribute and hit

save and refresh.

You'll see that you get this submit button without having to put in any extra

effort. So that's the beauty of some of these form inputs.

And we can check out some of the other ones inside the docs by going to the related

topics. And there's loads of different types of inputs.

There's buttons which are inputs, there's check boxes, color, date.

Let's give some of them a try and see what they look like on screen.

Just before the submit button, let's add an input that has type

maybe color. And of course,

remember you have to spell it the American way with a single 'o' instead of

'ou'.

So let's hit save and refresh and you can see

we now have a color picker on our website. And when you click on it,

it brings up the color picker where we can select any color we'd like,

and you might submit a form that maybe has your favorite color or change the

website using a color picker input.

Another cool one is the check box.

So we can add a checkbox by using input and changing text to check box. Hit

save, hit refresh, and you can see, we now have a little check box.

So you can have a line break here

forcing this to go on to the next line. And let's create a label where it says

do you want to sign up to the email list, and hit save, refresh,

and you can see you've got this classic checkbox.

Do you want to sign up to the email list, check or uncheck and hit submit?

Or you can put something like

have you read the terms and conditions or any other thing that might fit with a

checkbox.

Now the last one that I wanted to show you before we proceed was the password

input.

So let's delete the checkbox and let's add a password input.

The cool thing about the password input is that when you type anything inside

this box,

ideally you'd want a label of course here to show that this is the password.

But we know this is a password field because you can either right-click and hit

inspect

and you'll see that this is our password input or you know that the next thing

that comes after the password label is of course the password input.

But whenever you type anything in here, by default,

everything you type is masked.

So these are for fields where you don't want somebody overlooking the user to be

able to see what their password is.

Feel free to have a bit of fun and try out all of these different input types

and see what they look like and see what they do. And once you do that,

you'll come to realize that a lot of

the things that you see on the web are just very simple HTML inputs.

And as we build our knowledge in HTML, CSS and JavaScript,

we're going to come back and see how forms work in more detail.

So have an explore of have that and see what they all look like when you just add

them to your website,

but we'll experience the full functionality a little bit later on.

Now, let's just quickly review what we've learned about HTML forms.

We use the form tag to define what should go into our form and this by itself

doesn't actually do anything. So in order for the form to do anything,

you'll need two important HTML elements and that's the label and the input.

And between the opening and closing label tags,

you can write some text that will be displayed as a label inside your form.

The next most important HTML element that's associated with forms are the inputs.

And the input is a self-closing tag

so it doesn't have a closing tag.

Instead, you can define the input type by using the type attribute

and there's a whole bunch of input types that you can tap into to use inside

your form. For example, in this case, the type is set to text.

So we get a textbox where the user can input their name.

But you can also use an input element that has the type attribute set as submit

and this creates a button.

So you can see that by setting the attribute type to various predefined key

words, you actually end up with completely different things on your website.

And it might seem strange that even though we're using the same HTML element,

i.e. the input,

we're actually getting completely different objects on our website,

anywhere from textboxes, to buttons

to color pickers and a myriad array of different things that we can create just

by changing that type. Now,

aside from just the text and submit input types,

if you have a look at the MDN docs,

you'll see that there's loads more different keywords that you can use.

For example,

the input type where you allow the user to upload a file or the date picker or

the radio button or a range.

And you can see that I've only got static images in my slide to show you what

they look like.

But I want you to look through the MDN documentation for the input HTML element

and I want you to create a new HTML file that you're going to put onto your

desktop and you can open it in order to see it live in action.

For example, the date picker now works and my range can be toggled.

I can switch my radio button on,

I can choose a file and a whole bunch of things.

So use it as a living notebook, if you will.

That should've been really easy and just to quickly show you,

this is what you could have created in order to achieve this. Now at the moment,

we're not yet looking into the other attributes for our form or for our inputs.

And we're only changing the type attribute to some of these predefined keywords

that you can see are listed on the MDN developer docs.

In the next lesson,

we'll look closer at how forms work and how you can capture and reveal what the

user has chosen for each of the inputs. So for all of that and more,

I'll see you on the next lesson.