All right. 1
So I've added a few more details here and there to this personal site and it's now really coming along 2
and starting to look like a real web site that you might come across 3
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 4
bit sparse at the moment. 5
It's only got my fictional address, my fictional number and my fictional e-mail. 6
Now what if I could add a form at the end of this where I allow people to put down their name and their 7
e-mail and they could message me using that form. 8
How would we do that in HTML? 9
So of course first place to head to is the MDN Web Docs. 10
And we've got our form element. 11
Now you can read through all of these attributes and start getting an understanding about how a form 12
works and how you can put one together. 13
Now in order for forms to really come alive and to work as you would expect them to, 14
it actually requires a little bit more than just HTML, because we need to specify the behavior of the 15
form so we can design the form and we can structure the form for our web site. 16
But until we learn about Javascript we won't be able to tap into its full functionality just yet but 17
we can get pretty close. 18
So let's go ahead and create a brand new form inside our contact-me.html 19
page, so just below the last paragraph tag. 20
Let's add a brand new form and you can see that with the auto suggest these are the default things that 21
come up. 22
Now I'm going to keep them as they are. 23
We're going to go inside the form tag and we're going to create our first label. 24
Now our first label is simply going to be called your name. 25
So this is where we ask our user for their name input and in order to store that information or allow 26
them to type that information we need to add an input and the type of input is going to be text. 27
So it's just going to be a text box that allows them to put in their name. 28
And if we hit save and check out what our web site looks like at the moment then you can see we've got our 29
label here and we've got a box where somebody can type in some inputs. 30
Now the thing that we’re missing is a submit button. Now a submit button also falls under the inputs of 31
a form and you can see it right here. 32
It's simply an input; instead of having a type of text, 33
it has the type of submit, and all you need to do is to change the word text to submit and delete the value 34
attribute and hit save and refresh. 35
You'll see that you get the submit button without having to put in any extra effort. 36
So that's the beauty of some of these form inputs. 37
And we can check out some of the other ones inside the docs by going to the related topics and there's 38
loads of different types of inputs. 39
There's buttons which are inputs, there’s checkboxes, color, date... 40
Let's give some of them a try and see what they look like on screen. 41
So just before the submit button let's add an input that has type maybe color. 42
And of course remember you have to spell it the American way with a single o instead of ou. 43
So let's hit save and refresh and you can see we now have a color picker on our Web site. 44
And when you click on it it brings up the color picker where we can select any color we like. 45
And you might submit a form that maybe has your favorite color or change the website using a color picker 46
input. 47
Another cool one is the checkbox so we can add a checkbox by using input and changing text to check 48
box, hit save, 49
hit refresh, and you see we now have a little checkbox. So you can have, 50
so usually what would happen is, 51
so let's just put a line break here forcing this to go onto the next line. 52
Let's create a label where it says ‘Do you want to sign up to the email list?’, and hit save, refresh. 53
You can see you've got this classic checkbox. 54
‘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 55
the terms and conditions?’, or any other thing that might fit with a checkbox. 56
Now the last one that I want to show you before we proceed was the password input. 57
So let's delete the checkbox and let's add a password input. 58
So the cool thing about the password input is that when you type anything inside this box, 59
so ideally you'd want a label, of course, here to show that this is the password, but we know this is a 60
password field because you can either right click and hit inspect and you'll see that this is our password 61
input or you know that the next thing that comes after the password label is of course the password 62
input. 63
But whenever you type anything in here by default everything you type is masked. 64
So these are the fields where you don't want somebody overlooking the user to be able to see what their 65
password is. 66
So feel free to have a bit of fun and try out all of these different input types and see what they look 67
like and see what they do. 68
And once you do that you'll come to realize that a lot of the things that you see on the web are just 69
very simple HTML inputs. 70
And as we build our knowledge in HTML, CSS and Javascript, we're going to come back and see how 71
forms work in more detail. So have an explore of that and see what they all look like when you just 72
add them to your web site. 73
But we'll experience a full functionality 74
a little bit later on. 75
Now let's just quickly review what we've learned about HTML forms. 76
So we use the form tag to define what should go into our form and this by itself doesn't actually do 77
anything. 78
So in order for the form to do anything you'll need two important HTML elements, and that's the label 79
and the input and between the opening and closing label tags you can write some text that will be displayed 80
as a label inside your form. 81
Now the next most important HTML element that is associated with forms are the inputs and the input 82
is a self closing tag. 83
So it doesn't have a closing tag. 84
Instead you can define the input type by using the type attribute and there's a whole bunch of input 85
types that you can tap into to use inside your form. 86
For example in this case the type is set to text. 87
So we get a text box where the user can input their name but you can also use an input element that 88
has the type attribute set as submit. 89
And this creates a button. 90
So you can see that by setting the attribute type to various predefined keywords you actually end up 91
with completely different things on your website. 92
And it might seem strange that even though we're using the same HTML element, i.e. the input, we're actually 93
getting completely different objects on our website anywhere from text boxes to patterns to color pictures 94
and a myriad array of different things that we can create just by changing that type. 95
Now aside from just the text and submit input types if you have a look at the MDN docs you'll see that 96
there's loads more different keywords that you can use for example the input type where you allow the 97
user to upload a file or the date picker or the radio button or a range and you can see that I've only 98
got static images in my slide to show you what they look like. 99
But I want you to look through the MDN documentation for the input HTML element, and I want you to create 100
a new HTML file that you're going to put onto your desktop and you can open it in order to see it 101
live in action. 102
For example the date picker now works and my range can be toggled. 103
I can switch my radio button on I can choose a file and a whole bunch of things. 104
So use it as a living notebook if you will. 105
So that should have been really easy. 106
And just to quickly show you this is what you could have created in order to achieve this. 107
Now at the moment we're not yet looking into the other attributes for our form or for our inputs and 108
we're only changing the type attribute to some of these predefined keywords that you can see are listed 109
on the MDN developer docs. 110
Now in order for us to use and understand the other attributes we'll need to learn a little bit of Javascript 111
first. 112
So we'll leave those other attributes until a little bit later on. 113
Now in the next lesson we're going to continue setting up our form on our contact me page so I'll see 114
you there.