Original subtitles

1 1

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!