1 00:00:01,403 --> 00:00:02,622 Welcome back. 2 00:00:02,622 --> 00:00:07,324 Let's build a simple contact form in this lecture. 3 00:00:07,324 --> 00:00:09,327 To be honest this section was not 4 00:00:09,327 --> 00:00:12,694 so much about making things beautiful and functional, 5 00:00:12,694 --> 00:00:14,725 but more to show you everything you need 6 00:00:14,725 --> 00:00:17,222 to know about forms so that you can build 7 00:00:17,222 --> 00:00:21,314 even bigger and more complex forms in the future. 8 00:00:21,314 --> 00:00:23,520 So, this is a simple contact form 9 00:00:23,520 --> 00:00:27,687 as you can find it in numerous websites out there. 10 00:00:29,093 --> 00:00:33,563 And in this lecture you'll learn a lot of new things. 11 00:00:33,563 --> 00:00:35,420 You'll learn how to build a useful form 12 00:00:35,420 --> 00:00:37,771 using new HTML elements such as 13 00:00:37,771 --> 00:00:41,854 form, label, input, select, option and text area. 14 00:00:43,228 --> 00:00:46,130 Then you will learn how to use CSS to format 15 00:00:46,130 --> 00:00:48,685 those different elements. 16 00:00:48,685 --> 00:00:50,102 So let's do this. 17 00:00:50,949 --> 00:00:53,508 So back in our brackets app, 18 00:00:53,508 --> 00:00:56,258 we'll create yet another section, 19 00:01:00,759 --> 00:01:03,176 this one called section form. 20 00:01:06,593 --> 00:01:09,593 And once again, we create a row here 21 00:01:11,150 --> 00:01:13,483 where we will put our title. 22 00:01:15,591 --> 00:01:18,841 So let's get the text for this section. 23 00:01:21,135 --> 00:01:23,385 That's not a lot this time. 24 00:01:26,766 --> 00:01:28,933 So the title is, this one. 25 00:01:33,064 --> 00:01:35,444 And now let's create our form. 26 00:01:35,444 --> 00:01:37,861 And we will do that in a row. 27 00:01:38,956 --> 00:01:41,373 So live, class and row again. 28 00:01:43,542 --> 00:01:47,375 Now, a form is like a group of input elements, 29 00:01:48,389 --> 00:01:50,943 and we have an HTML element 30 00:01:50,943 --> 00:01:54,310 where we need to put all of them, 31 00:01:54,310 --> 00:01:58,374 and this element is called the form element. 32 00:01:58,374 --> 00:02:02,041 And it needs to have a couple of attributes. 33 00:02:04,062 --> 00:02:06,297 One is the method. 34 00:02:06,297 --> 00:02:08,474 You will choose post here, 35 00:02:08,474 --> 00:02:12,509 but this is not relevant for us in this case, 36 00:02:12,509 --> 00:02:16,676 because this is only needed when we send this form 37 00:02:17,704 --> 00:02:21,871 and that requires a lot of programming in other languages 38 00:02:23,103 --> 00:02:26,789 and we will not talk about this in this course. 39 00:02:26,789 --> 00:02:29,721 So in this course we will only format this form, 40 00:02:29,721 --> 00:02:33,755 but we will not be able to send anything from it. 41 00:02:33,755 --> 00:02:37,528 So another attribute that we need to define is the action, 42 00:02:37,528 --> 00:02:39,705 which is like a link. 43 00:02:39,705 --> 00:02:41,127 So it is empty in this case, 44 00:02:41,127 --> 00:02:44,044 and the action could be the script, 45 00:02:45,278 --> 00:02:49,051 which handles how the form will be sent. 46 00:02:49,051 --> 00:02:51,548 Which, again, we will not talk about 47 00:02:51,548 --> 00:02:54,334 in this specific course. 48 00:02:54,334 --> 00:02:58,501 And then, also, a class, I will call this contact form. 49 00:03:02,780 --> 00:03:06,947 Alright, now we can fill this form with our elements. 50 00:03:08,295 --> 00:03:11,712 And we will put a couple of rows in here, 51 00:03:12,561 --> 00:03:16,277 and in each of those rows we will then have 52 00:03:16,277 --> 00:03:18,694 our different input elements. 53 00:03:20,021 --> 00:03:23,438 So we will have one column for the label, 54 00:03:24,403 --> 00:03:28,375 for example, name, email address, or something like that, 55 00:03:28,375 --> 00:03:31,875 and then one column for the input element. 56 00:03:35,202 --> 00:03:39,369 So, it is a column and now it's something a little special 57 00:03:42,061 --> 00:03:46,807 because we want one column to be bigger than the other one. 58 00:03:46,807 --> 00:03:49,440 So I will say that I want the first column 59 00:03:49,440 --> 00:03:52,398 to be a span one of three, 60 00:03:52,398 --> 00:03:55,481 such as we used a lot of times before 61 00:04:00,103 --> 00:04:04,270 and then the second column will be span two of three. 62 00:04:12,163 --> 00:04:16,246 So these two columns together make the whole row, 63 00:04:18,795 --> 00:04:21,128 so one plus two makes three. 64 00:04:22,241 --> 00:04:27,019 And this means that this column will be twice as wide 65 00:04:27,019 --> 00:04:28,970 as this column here. 66 00:04:28,970 --> 00:04:32,637 And I will actually show you how this works. 67 00:04:34,008 --> 00:04:38,175 So the one of three has a width of 32%, approximately, 68 00:04:40,412 --> 00:04:44,579 and span two of three will have 63% approximately. 69 00:04:48,735 --> 00:04:52,902 Alright, so as I said in the first column we want the label 70 00:04:54,098 --> 00:04:57,181 and we have an HTML element for that, 71 00:04:59,202 --> 00:05:03,753 which goes like this, it's just labeled and then, 72 00:05:03,753 --> 00:05:05,996 let me see, it is name. 73 00:05:05,996 --> 00:05:10,515 The first one is name, and that's it for now. 74 00:05:10,515 --> 00:05:13,348 And now we want a little text box, 75 00:05:14,286 --> 00:05:18,369 and in order to do that, we use the input element 76 00:05:19,552 --> 00:05:22,803 and the type of this will be text. 77 00:05:22,803 --> 00:05:25,761 So you can see in this list here there are lots 78 00:05:25,761 --> 00:05:29,391 of different input types and we will use some of them, 79 00:05:29,391 --> 00:05:33,224 but for now, I will just use the text element. 80 00:05:36,814 --> 00:05:40,981 Now, in each of those, we should also give those a name 81 00:05:43,185 --> 00:05:47,801 because that name will later be used to send that form. 82 00:05:47,801 --> 00:05:51,968 Let's call it name, because that's what it is here, right? 83 00:05:53,490 --> 00:05:56,676 And now I will also define an ID here, 84 00:05:56,676 --> 00:05:59,017 which is also name. 85 00:05:59,017 --> 00:06:02,560 And another interesting thing we can do here is placeholder, 86 00:06:02,560 --> 00:06:05,844 and the placeholder is the text that appears 87 00:06:05,844 --> 00:06:08,672 inside of the text field 88 00:06:08,672 --> 00:06:11,662 before we write anything inside of it. 89 00:06:11,662 --> 00:06:15,245 So here I will say, for example, your name. 90 00:06:18,619 --> 00:06:22,394 And the last thing here, we can just add this keyword, 91 00:06:22,394 --> 00:06:26,561 required, and if we do so, the browser will not allow us 92 00:06:27,433 --> 00:06:30,976 to send a form without completing this field. 93 00:06:30,976 --> 00:06:32,699 So this is very handy. 94 00:06:32,699 --> 00:06:36,405 You can just write required and then Google Chrome, 95 00:06:36,405 --> 00:06:40,155 or whatever browser, will handle that for us. 96 00:06:41,183 --> 00:06:46,157 Okay, I will just show you how this looks like by now. 97 00:06:46,157 --> 00:06:50,578 Nothing special, of course, but here it goes. 98 00:06:50,578 --> 00:06:54,967 So this is a placeholder and this the first column, 99 00:06:54,967 --> 00:06:56,202 and this is the second column. 100 00:06:56,202 --> 00:06:58,218 And as you can see, it's much wider. 101 00:06:58,218 --> 00:07:02,411 The text field is not as wide as the column yet 102 00:07:02,411 --> 00:07:04,589 but we will change that once we come 103 00:07:04,589 --> 00:07:07,256 to the CSS part of this lecture. 104 00:07:08,425 --> 00:07:10,896 So for now, let's continue 105 00:07:10,896 --> 00:07:13,529 and I will keep on adding some rows here. 106 00:07:13,529 --> 00:07:16,279 So the next one is for the email. 107 00:07:17,709 --> 00:07:20,431 So I will change it here, 108 00:07:20,431 --> 00:07:24,348 and you can actually also change the type here, 109 00:07:26,084 --> 00:07:29,667 to email because that's one of the possible 110 00:07:30,605 --> 00:07:32,022 HTML input types. 111 00:07:33,402 --> 00:07:35,854 And so the browser will recognize 112 00:07:35,854 --> 00:07:40,021 that you need to write an email inside of the field. 113 00:07:42,367 --> 00:07:46,367 Well I will call this email and here your email, 114 00:07:49,110 --> 00:07:53,133 and this field's also required and can only be sent 115 00:07:53,133 --> 00:07:57,300 if a valid email address was written inside of that field. 116 00:08:00,681 --> 00:08:04,848 Okay, so yet another line is, what do we have here? 117 00:08:09,110 --> 00:08:11,370 How did you find us? 118 00:08:11,370 --> 00:08:14,620 Maybe we can put a little dropdown box? 119 00:08:19,646 --> 00:08:21,753 We will not use this, 120 00:08:21,753 --> 00:08:25,336 so dropdown box is just a couple of options 121 00:08:27,806 --> 00:08:30,450 where you can choose one from. 122 00:08:30,450 --> 00:08:34,617 And in order to do that, we use the select element 123 00:08:37,155 --> 00:08:39,405 and we'll call this find us 124 00:08:42,059 --> 00:08:44,392 and also add the ID find us. 125 00:08:45,622 --> 00:08:49,789 And I will tell you in a moment why we need these IDs here. 126 00:08:52,518 --> 00:08:53,768 So don't worry. 127 00:08:54,778 --> 00:08:57,537 And now, each of the options that we want here 128 00:08:57,537 --> 00:09:01,287 needs to be defined using the action element. 129 00:09:06,694 --> 00:09:10,861 And we need to specify a value, I will do that in a moment, 130 00:09:13,475 --> 00:09:16,885 and then the text we want to see. 131 00:09:16,885 --> 00:09:21,559 So in the first one I want to say, so how did you find us? 132 00:09:21,559 --> 00:09:25,726 Let's say, friends, and the value here can be friends. 133 00:09:29,413 --> 00:09:33,913 And again, this value here source then for the script 134 00:09:33,913 --> 00:09:37,913 that will handle the form once the form is sent, 135 00:09:39,430 --> 00:09:43,597 which again we will not be able to do in this course. 136 00:09:46,212 --> 00:09:48,712 So next, what can we put here? 137 00:09:50,656 --> 00:09:53,323 Um, for instance, search engine. 138 00:09:57,744 --> 00:09:58,661 So, search, 139 00:10:02,188 --> 00:10:05,271 or maybe it was an ad, advertisement. 140 00:10:15,713 --> 00:10:19,796 And just to complete this, we can say we found it 141 00:10:21,613 --> 00:10:23,113 in some other way. 142 00:10:24,371 --> 00:10:27,288 Alright, so, how does it look like? 143 00:10:29,467 --> 00:10:31,842 So we have the options we put there 144 00:10:31,842 --> 00:10:34,092 inside of this little list. 145 00:10:36,517 --> 00:10:40,118 So this is starting to look great, right? 146 00:10:40,118 --> 00:10:43,221 And we can also do another thing here. 147 00:10:43,221 --> 00:10:46,971 We can choose one of these and say, selected, 148 00:10:48,317 --> 00:10:50,616 which is this one, this will be the first one 149 00:10:50,616 --> 00:10:53,029 that will be selected, see? 150 00:10:53,029 --> 00:10:54,196 Search engine. 151 00:10:57,129 --> 00:11:01,296 Alright, I don't want this here, let's put it here. 152 00:11:04,302 --> 00:11:08,469 Now the next thing is to ask us if we want a newsletter. 153 00:11:10,883 --> 00:11:14,800 So again we want a row with a label newsletter. 154 00:11:21,841 --> 00:11:24,676 And now I will issue another input type 155 00:11:24,676 --> 00:11:26,759 and this one is checkbox. 156 00:11:28,201 --> 00:11:31,342 So checkbox is just what the name says, 157 00:11:31,342 --> 00:11:33,258 it's a box where you can choose 158 00:11:33,258 --> 00:11:36,974 yes I want it or no I don't want it, 159 00:11:36,974 --> 00:11:41,057 and the name here will be newsletter or just news 160 00:11:42,415 --> 00:11:44,165 and the ID also news. 161 00:11:45,518 --> 00:11:48,768 Placeholder, yes of course, none of it. 162 00:11:51,418 --> 00:11:54,905 And here I can say that I want this checkbox 163 00:11:54,905 --> 00:11:57,655 to be checked from the beginning, 164 00:11:59,196 --> 00:12:02,261 so the default will be that it is checked. 165 00:12:02,261 --> 00:12:06,428 And then some text here, for instance, yes please. 166 00:12:09,349 --> 00:12:10,843 So it's already selected there 167 00:12:10,843 --> 00:12:13,525 and then we have our text there. 168 00:12:13,525 --> 00:12:15,692 So just a simple checkbox. 169 00:12:16,552 --> 00:12:20,345 Now the last thing is wrap as align, 170 00:12:20,345 --> 00:12:23,012 so that means that it is a field 171 00:12:24,099 --> 00:12:27,766 where we can write some email, some message. 172 00:12:30,633 --> 00:12:34,800 And in order to do that we want a bigger text box. 173 00:12:38,122 --> 00:12:39,372 Copy this here. 174 00:12:43,869 --> 00:12:46,359 So we will use something different 175 00:12:46,359 --> 00:12:50,535 'cause we want a big text area and that's exactly 176 00:12:50,535 --> 00:12:52,952 the name of the HTML element. 177 00:12:55,363 --> 00:12:58,236 And this also needs some attributes, 178 00:12:58,236 --> 00:13:01,069 so I will call this name, message. 179 00:13:04,481 --> 00:13:08,648 And it can also have a placeholder like your message. 180 00:13:09,845 --> 00:13:12,795 Okay, and then the last thing 181 00:13:12,795 --> 00:13:16,962 each form should of course have is a submit button. 182 00:13:24,595 --> 00:13:29,461 So we don't want anything in here because we want the button 183 00:13:29,461 --> 00:13:33,063 to be aligned with the fields of this form, 184 00:13:33,063 --> 00:13:35,515 and such as I did in the section before, 185 00:13:35,515 --> 00:13:38,598 I will use the NBSP special character 186 00:13:39,959 --> 00:13:43,376 so that we have an invisible space there. 187 00:13:46,012 --> 00:13:49,262 And the button is also an inbox element 188 00:13:50,418 --> 00:13:54,585 and it's called submit, and doesn't need any of this. 189 00:13:59,000 --> 00:14:01,500 But it has the value attribute 190 00:14:04,671 --> 00:14:08,157 where we will put the text we want to see on the button, 191 00:14:08,157 --> 00:14:11,074 and in this place just say send it. 192 00:14:12,372 --> 00:14:13,955 We don't need this. 193 00:14:18,080 --> 00:14:20,330 So save this and let's see. 194 00:14:21,605 --> 00:14:23,444 So this is a bigger text field 195 00:14:23,444 --> 00:14:27,527 and we can actually resize this in Google Chrome. 196 00:14:29,421 --> 00:14:32,984 And then the button, and as you see this field, 197 00:14:32,984 --> 00:14:36,700 since I didn't fill it out, Google Chrome tells me, 198 00:14:36,700 --> 00:14:38,654 Please fill out this field. 199 00:14:38,654 --> 00:14:42,237 And if I do, it will not say fill this out. 200 00:14:44,631 --> 00:14:48,156 And I'll, since I said this would be an email field, 201 00:14:48,156 --> 00:14:52,151 Google Chrome knows that I should include 202 00:14:52,151 --> 00:14:55,901 the special symbol here in the email address. 203 00:14:56,853 --> 00:15:00,953 So one last thing is, as I promised you I would explain 204 00:15:00,953 --> 00:15:04,401 to you why I included these name IDs here 205 00:15:04,401 --> 00:15:07,312 and that's for a simple reason, 206 00:15:07,312 --> 00:15:11,479 because here in the label we can use the for attribute 207 00:15:13,213 --> 00:15:16,213 and then put the name of the ID here 208 00:15:18,040 --> 00:15:21,411 so we kind of link the label with the input 209 00:15:21,411 --> 00:15:23,494 and this is what happens. 210 00:15:24,362 --> 00:15:28,529 So now, we can click this and then the field gets selected. 211 00:15:32,522 --> 00:15:33,522 Cool, right? 212 00:15:34,476 --> 00:15:37,695 Do this for the other ones as well. 213 00:15:37,695 --> 00:15:38,612 For, email. 214 00:15:41,832 --> 00:15:45,499 And this actually only works with text forms 215 00:15:48,192 --> 00:15:51,025 and also with this select element. 216 00:15:54,054 --> 00:15:58,422 So this one is find us, but it doesn't work 217 00:15:58,422 --> 00:16:02,339 with a checkbox and neither with the text area, 218 00:16:04,360 --> 00:16:07,502 so I will just leave it like this. 219 00:16:07,502 --> 00:16:11,169 And now if I click here, this gets selected. 220 00:16:12,943 --> 00:16:16,443 Okay, I think for the HTML part, that's it 221 00:16:17,693 --> 00:16:20,988 and so in the next lecture, we will just format this 222 00:16:20,988 --> 00:16:25,126 to make it look great, such as we always do. 223 00:16:25,126 --> 00:16:27,376 Alright, so, see you there!