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