Voiceover: Welcome back. 2 2
Let's build a simple contact form in this lecture. 3 3
To be honest this section was not 4 4
so much about making things beautiful and functional, 5 5
but more to show you everything you need 6 6
to know about forms so that you can build 7 7
even bigger and more complex forms in the future. 8 8
So, this is a simple contact form 9 9
as you can find it in numerous websites out there. 10 10
And in this lecture you'll learn a lot of new things. 11 11
You'll learn how to build a useful form 12 12
using new HTML elements such as 13 13
form, label, input, select, option and text area. 14 14
Then you will learn how to use CSS to format 15 15
those different elements. 16 16
So let's do this. 17 17
So back in our brackets app, 18 18
we'll create yet another section, 19 19
this one called section form. 20 20
And once again, we create a row here 21 21
where we will put our title. 22 22
So let's get the text for this section. 23 23
That's not a lot this time. 24 24
So the title is, this one. 25 25
And now let's create our form. 26 26
And we will do that in a row. 27 27
So live, class and row again. 28 28
Now, a form is like a group of input elements, 29 29
and we have an HTML element 30 30
where we need to put all of them, 31 31
and this element is called the form element. 32 32
And it needs to have a couple of attributes. 33 33
One is the method. 34 34
You will choose post here, 35 35
but this is not relevant for us in this case, 36 36
because this is only needed when we send this form 37 37
and that requires a lot of programming in other languages 38 38
and we will not talk about this in this course. 39 39
So in this course we will only format this form, 40 40
but we will not be able to send anything from it. 41 41
So another attribute that we need to define is the action, 42 42
which is like a link. 43 43
So it is empty in this case, 44 44
and the action could be the script, 45 45
which handles how the form will be sent. 46 46
Which, again, we will not talk about 47 47
in this specific course. 48 48
And then, also, a class, I will call this contact form. 49 49
Alright, now we can fill this form with our elements. 50 50
And we will put a couple of rows in here, 51 51
and in each of those rows we will then have 52 52
our different input elements. 53 53
So we will have one column for the label, 54 54
for example, name, email address, or something like that, 55 55
and then one column for the input element. 56 56
So, it is a column and now it's something a little special 57 57
because we want one column to be bigger than the other one. 58 58
So I will say that I want the first column 59 59
to be a span one of three, 60 60
such as we used a lot of times before 61 61
and then the second column will be span two of three. 62 62
So these two columns together make the whole row, 63 63
so one plus two makes three. 64 64
And this means that this column will be twice as wide 65 65
as this column here. 66 66
And I will actually show you how this works. 67 67
So the one of three has a width of 32%, approximately, 68 68
and span two of three will have 63% approximately. 69 69
Alright, so as I said in the first column we want the label 70 70
and we have an HTML element for that, 71 71
which goes like this, it's just labeled and then, 72 72
let me see, it is name. 73 73
The first one is name, and that's it for now. 74 74
And now we want a little text box, 75 75
and in order to do that, we use the input element 76 76
and the type of this will be text. 77 77
So you can see in this list here there are lots 78 78
of different input types and we will use some of them, 79 79
but for now, I will just use the text element. 80 80
Now, in each of those, we should also give those a name 81 81
because that name will later be used to send that form. 82 82
Let's call it name, because that's what it is here, right? 83 83
And now I will also define an ID here, 84 84
which is also name. 85 85
And another interesting thing we can do here is placeholder, 86 86
and the placeholder is the text that appears 87 87
inside of the text field 88 88
before we write anything inside of it. 89 89
So here I will say, for example, your name. 90 90
And the last thing here, we can just add this keyword, 91 91
required, and if we do so, the browser will not allow us 92 92
to send a form without completing this field. 93 93
So this is very handy. 94 94
You can just write required and then Google Chrome, 95 95
or whatever browser, will handle that for us. 96 96
Okay, I will just show you how this looks like by now. 97 97
Nothing special, of course, but here it goes. 98 98
So this is a placeholder and this the first column, 99 99
and this is the second column. 100 100
And as you can see, it's much wider. 101 101
The text field is not as wide as the column yet 102 102
but we will change that once we come 103 103
to the CSS part of this lecture. 104 104
So for now, let's continue 105 105
and I will keep on adding some rows here. 106 106
So the next one is for the email. 107 107
So I will change it here, 108 108
and you can actually also change the type here, 109 109
to email because that's one of the possible 110 110
HTML input types. 111 111
And so the browser will recognize 112 112
that you need to write an email inside of the field. 113 113
Well I will call this email and here your email, 114 114
and this field's also required and can only be sent 115 115
if a valid email address was written inside of that field. 116 116
Okay, so yet another line is, what do we have here? 117 117
How did you find us? 118 118
Maybe we can put a little dropdown box? 119 119
We will not use this, 120 120
so dropdown box is just a couple of options 121 121
where you can choose one from. 122 122
And in order to do that, we use the select element 123 123
and we'll call this find us 124 124
and also add the ID find us. 125 125
And I will tell you in a moment why we need these IDs here. 126 126
So don't worry. 127 127
And now, each of the options that we want here 128 128
needs to be defined using the action element. 129 129
And we need to specify a value, I will do that in a moment, 130 130
and then the text we want to see. 131 131
So in the first one I want to say, so how did you find us? 132 132
Let's say, friends, and the value here can be friends. 133 133
And again, this value here source then for the script 134 134
that will handle the form once the form is sent, 135 135
which again we will not be able to do in this course. 136 136
So next, what can we put here? 137 137
Um, for instance, search engine. 138 138
So, search, 139 139
or maybe it was an ad, advertisement. 140 140
And just to complete this, we can say we found it 141 141
in some other way. 142 142
Alright, so, how does it look like? 143 143
So we have the options we put there 144 144
inside of this little list. 145 145
So this is starting to look great, right? 146 146
And we can also do another thing here. 147 147
We can choose one of these and say, selected, 148 148
which is this one, this will be the first one 149 149
that will be selected, see? 150 150
Search engine. 151 151
Alright, I don't want this here, let's put it here. 152 152
Now the next thing is to ask us if we want a newsletter. 153 153
So again we want a row with a label newsletter. 154 154
And now I will issue another input type 155 155
and this one is checkbox. 156 156
So checkbox is just what the name says, 157 157
it's a box where you can choose 158 158
yes I want it or no I don't want it, 159 159
and the name here will be newsletter or just news 160 160
and the ID also news. 161 161
Placeholder, yes of course, none of it. 162 162
And here I can say that I want this checkbox 163 163
to be checked from the beginning, 164 164
so the default will be that it is checked. 165 165
And then some text here, for instance, yes please. 166 166
So it's already selected there 167 167
and then we have our text there. 168 168
So just a simple checkbox. 169 169
Now the last thing is wrap as align, 170 170
so that means that it is a field 171 171
where we can write some email, some message. 172 172
And in order to do that we want a bigger text box. 173 173
Copy this here. 174 174
So we will use something different 175 175
'cause we want a big text area and that's exactly 176 176
the name of the HTML element. 177 177
And this also needs some attributes, 178 178
so I will call this name, message. 179 179
And it can also have a placeholder like your message. 180 180
Okay, and then the last thing 181 181
each form should of course have is a submit button. 182 182
So we don't want anything in here because we want the button 183 183
to be aligned with the fields of this form, 184 184
and such as I did in the section before, 185 185
I will use the NBSP special character 186 186
so that we have an invisible space there. 187 187
And the button is also an inbox element 188 188
and it's called submit, and doesn't need any of this. 189 189
But it has the value attribute 190 190
where we will put the text we want to see on the button, 191 191
and in this place just say send it. 192 192
We don't need this. 193 193
So save this and let's see. 194 194
So this is a bigger text field 195 195
and we can actually resize this in Google Chrome. 196 196
And then the button, and as you see this field, 197 197
since I didn't fill it out, Google Chrome tells me, 198 198
Please fill out this field. 199 199
And if I do, it will not say fill this out. 200 200
And I'll, since I said this would be an email field, 201 201
Google Chrome knows that I should include 202 202
the special symbol here in the email address. 203 203
So one last thing is, as I promised you I would explain 204 204
to you why I included these name IDs here 205 205
and that's for a simple reason, 206 206
because here in the label we can use the for attribute 207 207
and then put the name of the ID here 208 208
so we kind of link the label with the input 209 209
and this is what happens. 210 210
So now, we can click this and then the field gets selected. 211 211
Cool, right? 212 212
Do this for the other ones as well. 213 213
For, email. 214 214
And this actually only works with text forms 215 215
and also with this select element. 216 216
So this one is find us, but it doesn't work 217 217
with a checkbox and neither with the text area, 218 218
so I will just leave it like this. 219 219
And now if I click here, this gets selected. 220 220
Okay, I think for the HTML part, that's it 221 221
and so in the next lecture, we will just format this 222 222
to make it look great, such as we always do. 223 223
Alright, so, see you there!