WEBVTT FILE





1
00:00:06.230 --> 00:00:11.099
in this video we're going to create another form where we're going to be

2
00:00:11.099 --> 00:00:17.250
learning some other types of inputs so far we have covered the text inputs the

3
00:00:17.250 --> 00:00:23.550
password inputs and also the submits inputs so now we're going to create

4
00:00:23.550 --> 00:00:27.269
another form where we're going to be exploring some other types of inputs so

5
00:00:27.269 --> 00:00:32.610
this form is going to be a checkout form so we're gonna create a form where the

6
00:00:32.610 --> 00:00:41.309
user is gonna be required to input their address for example postcode city also

7
00:00:41.309 --> 00:00:49.289
they will choose a shipping method and a payment method for the checkout so we're

8
00:00:49.289 --> 00:00:55.309
gonna start our form from scratch okay so that we can practice the syntax and

9
00:00:55.309 --> 00:01:02.390
we're gonna go ahead now and start our form so the tag again for form is form

10
00:01:02.390 --> 00:01:08.760
okay and inside the tags we're gonna have our different inputs so first of

11
00:01:08.760 --> 00:01:13.799
all we're gonna need the user to input their address so for that we're gonna

12
00:01:13.799 --> 00:01:25.939
have n inputs okay of type text right so you're gonna give you a name address and

13
00:01:25.939 --> 00:01:41.290
also an ID to link it to the label or address we can have a placeholder okay

14
00:01:41.290 --> 00:01:51.910
and let's address there with capital a alright and also we're gonna add a size

15
00:01:51.910 --> 00:01:59.350
to the box of 30 pixels and also we can limit the maximum number of characters

16
00:01:59.350 --> 00:02:06.310
that the user is allowed to put there to 100 for example there is our address

17
00:02:06.310 --> 00:02:13.510
inputs so now we're gonna add a label to it okay exactly the same way you have

18
00:02:13.510 --> 00:02:18.580
done before so we just need a label before the inputs okay using the label

19
00:02:18.580 --> 00:02:25.350
tags let's write some text inside the label tags we're gonna write address and

20
00:02:25.350 --> 00:02:31.000
to link it to our inputs we're gonna use the four attributes and we're gonna use

21
00:02:31.000 --> 00:02:39.820
the ID we have used for address which is this one okay okay now we're gonna add

22
00:02:39.820 --> 00:02:45.220
another input it's gonna be the postcode so the syntax is gonna be the same we're

23
00:02:45.220 --> 00:02:48.730
gonna have a label and and inputs I'm just gonna copy paste we have done so

24
00:02:48.730 --> 00:02:54.600
far for the address and I'm just gonna change everything to postcode

25
00:02:54.630 --> 00:02:57.880
[Music] placeholder with capital B oh okay so

26
00:03:05.470 --> 00:03:11.769
you you would have noticed before that's the inputs they are in line

27
00:03:11.769 --> 00:03:17.250
elements okay so we don't have a line break at the beginning of the inputs so

28
00:03:17.250 --> 00:03:26.739
to our library we can just use the BR tag okay I know you can see we've got a

29
00:03:26.739 --> 00:03:35.650
line break in there and let me just change this to post code okay so now you

30
00:03:35.650 --> 00:03:42.280
cause the address and we've got the post code now we're gonna add another one so

31
00:03:42.280 --> 00:03:50.519
let's have a line break first and let's add the city okay

32
00:03:50.639 --> 00:03:56.790
so it's going to be also a takes input and we're going to change

33
00:03:56.790 --> 00:04:08.120
everything to city capital C for the label and name is city ID is City

34
00:04:08.120 --> 00:04:13.650
placeholder is DC with capital C others it okay so you called the address

35
00:04:13.650 --> 00:04:22.350
postcode and city okay now we want the user to be able to choose their shipping

36
00:04:22.350 --> 00:04:27.270
method okay we're gonna have three shipping methods very similar to the

37
00:04:27.270 --> 00:04:32.940
Amazon checkout options so we're gonna have the free Super Saver Shipping the

38
00:04:32.940 --> 00:04:37.470
two-day shipping and the one-day shipping so to do that we're gonna

39
00:04:37.470 --> 00:04:46.610
create a drop-down menu for this so first of all let's have a line break

40
00:04:46.610 --> 00:04:54.390
okay and now the drop down menu has got a special syntax we're gonna use the

41
00:04:54.390 --> 00:05:04.020
Select tag okay so to create drop-down menus we use the Select tag so inside

42
00:05:04.020 --> 00:05:12.690
these select tags we're gonna have what we call options all right so first let's

43
00:05:12.690 --> 00:05:19.920
give our selects a name let's call it shipping okay and also let's give it an

44
00:05:19.920 --> 00:05:32.310
ID shipping all right so the options we're gonna create them using the option

45
00:05:32.310 --> 00:05:39.930
tag pretty straightforward okay so you're gonna have three options and each

46
00:05:39.930 --> 00:05:51.410
option is gonna have a value okay so first of all we're gonna write some text

47
00:05:51.410 --> 00:05:59.630
inside the option tags so the first option is going to be free super saver

48
00:05:59.630 --> 00:06:07.940
shipping okay so the texts between the option tags is what the user can see

49
00:06:07.940 --> 00:06:14.330
okay but we need to give our option a value attributes which is going to be

50
00:06:14.330 --> 00:06:20.300
passed on to the PHP code okay I'm going to cover this later on every PHP chapter

51
00:06:20.300 --> 00:06:26.120
so and this value the user comes I can't see so that's how you refer to this

52
00:06:26.120 --> 00:06:31.580
option inside our code and you can name it anything you want okay I'm just gonna

53
00:06:31.580 --> 00:06:40.010
name it free say the same thing so it's free Super Saver Shipping okay so when

54
00:06:40.010 --> 00:06:47.060
you submit the form if you select this option for example okay the selects

55
00:06:47.060 --> 00:06:54.740
inputs is going to be passed on to the PHP code with a value or free super

56
00:06:54.740 --> 00:07:00.160
saving ship as Super Saver Shipping which corresponds to this one okay so

57
00:07:00.160 --> 00:07:06.370
we're gonna have another couple of options I'm just gonna copy paste this

58
00:07:06.370 --> 00:07:10.970
[Music] so the second one is gonna be two days

59
00:07:10.970 --> 00:07:22.210
shipping I'm just gonna change the value so that's today shipping

60
00:07:27.070 --> 00:07:37.710
let's change the text as well and the last one is gonna be one day shipping

61
00:07:38.760 --> 00:07:48.250
okay here we go so now you can see that we've cause our drop-down menu okay and

62
00:07:48.250 --> 00:07:55.510
let's just refresh the page so you can see okay so you can see that we've got

63
00:07:55.510 --> 00:07:59.760
three options there and you can select any of the of them okay

64
00:07:59.760 --> 00:08:05.860
using the the menu all right so that's how the selects elements works or the

65
00:08:05.860 --> 00:08:15.100
drop-down menu works okay now we're gonna add another input so this time we

66
00:08:15.100 --> 00:08:19.990
want the user to choose their payment method okay but before we do this I'm

67
00:08:19.990 --> 00:08:23.800
just gonna add a paragraph before the drop-down menu

68
00:08:23.800 --> 00:08:30.220
okay we don't need a line break now this is because we're gonna have a paragraph

69
00:08:30.220 --> 00:08:44.590
and inside our paragraph we can write choose your shipping method okay all

70
00:08:44.590 --> 00:08:52.110
right now let's add another paragraph okay and this time it's gonna be choose

71
00:08:52.110 --> 00:09:00.570
your payment method okay alright okay so this time we are going

72
00:09:09.660 --> 00:09:16.199
to create inputs using radio buttons I'm gonna explain later why we call this

73
00:09:16.199 --> 00:09:21.740
kind of inputs or this type of inputs a radio okay but for now let's create our

74
00:09:21.740 --> 00:09:35.279
different options so the syntax is still input okay and this time the type is

75
00:09:35.279 --> 00:09:43.139
radio okay so you're gonna give it a name payments for example okay

76
00:09:43.139 --> 00:09:49.920
and each radio button is gonna have a value also again this value is going to

77
00:09:49.920 --> 00:09:58.230
be what is passed on to the PHP code so the value for the first one is gonna be

78
00:09:58.230 --> 00:10:06.180
paypal okay and for so regarding the text that the user is gonna is going to

79
00:10:06.180 --> 00:10:11.100
see we're gonna create that inside a label okay so I'm gonna do I'm gonna put

80
00:10:11.100 --> 00:10:18.120
my inputs inside a label so I'm just kind of copy that and then I'm gonna

81
00:10:18.120 --> 00:10:27.060
create a label alright and inside the label I'm gonna paste my

82
00:10:27.060 --> 00:10:37.290
radio input and just before the input and after the open tag I'm gonna write

83
00:10:37.290 --> 00:10:41.510
some text editor the user can see and I'm gonna write paper

84
00:10:41.510 --> 00:10:57.000
alright so this is a radio input okay that the user can select okay so it's a

85
00:10:57.000 --> 00:11:01.529
bit similar to the drop-down menu okay because you can select only one option

86
00:11:01.529 --> 00:11:06.029
so we're gonna create a couple of other options that the user can select from so

87
00:11:06.029 --> 00:11:10.370
I'm just gonna copy paste the same code twice okay and the second one is going

88
00:11:15.069 --> 00:11:23.829
to be Davis card okay and so it's type is radio name is payment so just notice

89
00:11:23.829 --> 00:11:29.319
that's the name of all the radio inputs are going to be the same okay and it's

90
00:11:29.319 --> 00:11:34.870
going to be payment but the value is gonna change from one to another

91
00:11:34.870 --> 00:11:42.850
okay and for this one we're gonna write debit card and for the last one we're

92
00:11:42.850 --> 00:11:54.569
gonna have credit card and the value is going to be credit card okay

93
00:11:54.569 --> 00:12:02.079
alright so now we've got different inputs we call the address we've caused

94
00:12:02.079 --> 00:12:10.209
the shipping method payments method now let's add another input type it's going

95
00:12:10.209 --> 00:12:16.990
to be to allow the user to add some comments okay and this time we're gonna

96
00:12:16.990 --> 00:12:26.740
use the text area input so the syntax is pretty easy so first of all is our let's

97
00:12:26.740 --> 00:12:38.819
have a sub line break okay and let's use the text area tag to create a text area

98
00:12:38.819 --> 00:12:43.060
okay so this is what we call a text area and you can write some text in there

99
00:12:43.060 --> 00:12:53.490
okay so we can add some attributes to our text area so for example we can

100
00:12:53.490 --> 00:13:01.329
choose the number of rows and we can send that to four rows we can also set

101
00:13:01.329 --> 00:13:04.779
the number of columns to for C for example

102
00:13:04.779 --> 00:13:07.839
okay and you can see the size is changing

103
00:13:07.839 --> 00:13:15.269
also we can give it a okay let's give it a name

104
00:13:15.950 --> 00:13:23.029
okay and let's call it comments and an ID as well okay to link it to the label

105
00:13:23.029 --> 00:13:29.380
let's call it comments now we're going to create a label so it's going to be

106
00:13:29.380 --> 00:13:38.300
just before the text area okay let's write some text inside the label

107
00:13:38.300 --> 00:13:46.880
comments and let's give it a for at speeds and Link it to the ID of our text

108
00:13:46.880 --> 00:13:59.839
area all right okay so now we've got our comments there let's create another one

109
00:13:59.839 --> 00:14:06.920
so let's give the user let's allow them to tell tell us whether they want to be

110
00:14:06.920 --> 00:14:11.839
signed up for our email updates okay and also we're gonna ask them if they want

111
00:14:11.839 --> 00:14:16.730
to save their payments details to make it easier for them if they wanna pay

112
00:14:16.730 --> 00:14:25.579
another time so this time we're gonna use another type of inputs before before

113
00:14:25.579 --> 00:14:33.199
we do that let's are the line break okay okay so now we're going to use

114
00:14:33.199 --> 00:14:40.310
checkboxes okay so check boxes they are different from radio buttons because you

115
00:14:40.310 --> 00:14:48.529
can select as many as you want okay although radio buttons you are allowed

116
00:14:48.529 --> 00:14:53.959
to you can select only one button and just before we go to the checkboxes I'm

117
00:14:53.959 --> 00:14:58.850
just gonna explain the etymology behind radio buttons so if you ever come across

118
00:14:58.850 --> 00:15:05.060
the old radios you would have noticed as these old radios they had a set of

119
00:15:05.060 --> 00:15:11.480
buttons and each button was for a specific radio station and if you pushed

120
00:15:11.480 --> 00:15:16.279
one of the buttons all the other buttons they were pushed out and you can see

121
00:15:16.279 --> 00:15:20.300
that it's the same thing for radio buttons because once you select one

122
00:15:20.300 --> 00:15:27.019
button all the other buttons are pushed out alright so that's how we use the

123
00:15:27.019 --> 00:15:33.239
radio name okay so now let's go to add checkboxes so the first one is

124
00:15:33.239 --> 00:15:36.209
going to allow the users to tell us whether they want to be signed up for

125
00:15:36.209 --> 00:15:41.909
email updates so the syntax is inputs okay

126
00:15:41.909 --> 00:15:54.299
with a type checkbox' all right and we can place this inside the label okay so

127
00:15:54.299 --> 00:15:59.329
that we can share some text for the user all right and right after the open tag

128
00:16:05.129 --> 00:16:11.459
we can write our text so I'm just going to write the sign sign me up for email

129
00:16:11.459 --> 00:16:27.329
updates all right let's have a line break and add another checkbox I'm just

130
00:16:27.329 --> 00:16:34.709
going to copy paste the same code then change the code so this time we're gonna

131
00:16:34.709 --> 00:16:40.069
write securely save my payment details okay all right so we're gonna add some

132
00:16:52.319 --> 00:16:59.939
more attribute to the input cell so this one is a so here we call the type there

133
00:16:59.939 --> 00:17:12.889
and let's add a name okay let's call it for example email updates

134
00:17:14.010 --> 00:17:28.710
okay let's add a name to this one as well and this one let's call it save

135
00:17:28.710 --> 00:17:37.330
payment for example now you can see that the check boxes we can check them all

136
00:17:37.330 --> 00:17:42.550
and check them ok so by defaults there and unchecked but you can control this

137
00:17:42.550 --> 00:17:48.070
using the checked attribute okay so if I add that to the first one for example

138
00:17:48.070 --> 00:18:00.340
and I said checked ok so if you want the check box to be checked by defaults then

139
00:18:00.340 --> 00:18:09.970
you just need to set check to checked ok now you will see that if you refresh the

140
00:18:09.970 --> 00:18:15.610
page the first one is checked ok and also you can you can set it to

141
00:18:15.610 --> 00:18:20.890
unchecked by any way by default they are unchecked so ok we can set this you can

142
00:18:20.890 --> 00:18:27.970
set them both to check see if you want to ok and now if refresh the page we can

143
00:18:27.970 --> 00:18:31.230
see that both of them are are checked by default

144
00:18:31.230 --> 00:18:39.240
ok and finally to finish our form we're gonna add a submit button so again the

145
00:18:39.240 --> 00:18:50.560
syntax is input and the type is submit ok and by default the text is going to

146
00:18:50.560 --> 00:18:56.680
be submit this let me just add the line break before this ok so by default as we

147
00:18:56.680 --> 00:19:00.670
have seen earlier the text inside the person is going to be submit spot you

148
00:19:00.670 --> 00:19:05.380
can change it by adding a value attributes and you can set it to

149
00:19:05.380 --> 00:19:15.400
whatever you want we can still keep it the same submit ok so we have covered

150
00:19:15.400 --> 00:19:22.870
different types of inputs and we have finished now our checkout form we're

151
00:19:22.870 --> 00:19:29.810
going to cover forms in detail when we go to the PHP a chapter of this course

152
00:19:29.810 --> 00:19:38.080
and we will see how forms work how they are submitted and so on okay