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