WEBVTT FILE





1
00:00:06.109 --> 00:00:12.809
in this video we're going to learn how to create forms using HTML forms are

2
00:00:12.809 --> 00:00:18.630
very important you would need a form to log into your Facebook account also you

3
00:00:18.630 --> 00:00:23.490
would need a form to book your flight tickets online you will also need a form

4
00:00:23.490 --> 00:00:32.250
to search an item to buy on eBay so what is a form a form is a set of user inputs

5
00:00:32.250 --> 00:00:38.600
or fields which the user is going to be required to populate and then once

6
00:00:38.600 --> 00:00:43.860
submitted they will form a set of data which is going to be sent to a server

7
00:00:43.860 --> 00:00:53.149
where it's going to be processed ok so let's go ahead and create our first form

8
00:00:54.079 --> 00:00:58.500
so the syntax for forms is pretty straightforward

9
00:00:58.500 --> 00:01:03.149
we're gonna use the form tag and then inside the form tags we can have all the

10
00:01:03.149 --> 00:01:08.280
contents of our form so in this create a simple form it's going to be a login

11
00:01:08.280 --> 00:01:15.720
form where we require the user to input their email address and password and to

12
00:01:15.720 --> 00:01:21.030
submit the form they will need to click on the login button ok so first of all

13
00:01:21.030 --> 00:01:27.840
let's have our email inputs so to create an inputs there are several several ways

14
00:01:27.840 --> 00:01:31.890
of creating inputs depending on that type since we want to create a text

15
00:01:31.890 --> 00:01:39.689
input we're gonna use the input tag it's a sailfin closing tag and we need to

16
00:01:39.689 --> 00:01:47.250
give our input a type of text since it's an email address ok all right so that's

17
00:01:47.250 --> 00:01:53.899
an input of type text for our email address and also we need to give it a

18
00:01:53.899 --> 00:01:59.610
name ok in our case we're going to name its email so the name is going to be

19
00:01:59.610 --> 00:02:08.310
used when you submits the form so your PHP code would need to recognize your

20
00:02:08.310 --> 00:02:13.420
inputs by its name ok so every input has got a

21
00:02:13.420 --> 00:02:20.260
civic name two references as a reference okay so let's start another improve

22
00:02:20.260 --> 00:02:24.400
quickly I'm gonna go back to the email input to add some more attributes in

23
00:02:24.400 --> 00:02:27.989
that but for now it just creates our password so we're gonna use again the

24
00:02:27.989 --> 00:02:34.090
input tag and this time the type is going to be password and we can also

25
00:02:34.090 --> 00:02:39.310
give it a name and we can name it password okay so to submit our phone

26
00:02:39.310 --> 00:02:44.160
we're gonna need another input and this time the input is going to be of type

27
00:02:44.160 --> 00:02:55.900
submit' okay so so it was our form now it's pretty simple now to submit the

28
00:02:55.900 --> 00:03:05.500
form we need to give our form a method okay so there are a couple of methods we

29
00:03:05.500 --> 00:03:11.049
can use I'm gonna explain later in the PHP chapter the difference between each

30
00:03:11.049 --> 00:03:14.980
of them but for now let's go for the guest method usually we don't use the

31
00:03:14.980 --> 00:03:20.799
guest method when we have a password input but we're gonna use it for now to

32
00:03:20.799 --> 00:03:25.170
show you how the form is submitted so if I click on submit after inputting

33
00:03:25.170 --> 00:03:30.970
something in there so let's write an email here example and let's just find

34
00:03:30.970 --> 00:03:36.180
something put some password now if I submits the form you will see at the top

35
00:03:36.180 --> 00:03:43.180
there you can see that we've got our website's address and then we've caused

36
00:03:43.180 --> 00:03:51.390
a question mark and then we've got all the inputs names so email first okay and

37
00:03:51.390 --> 00:04:00.069
we've got the email down okay and we've caused the password and we called the

38
00:04:00.069 --> 00:04:04.359
value that we have used for the password so the reason why we've seen this is

39
00:04:04.359 --> 00:04:09.790
because we use the get method okay I just wants to show you an example of a

40
00:04:09.790 --> 00:04:14.500
form submission but normally you wouldn't use the guest method for a

41
00:04:14.500 --> 00:04:21.070
password okay because you don't want the password to show up in the address bar

42
00:04:21.070 --> 00:04:27.310
okay so now we have created our phone

43
00:04:27.310 --> 00:04:32.530
let's just complete this and add some more attributes our inputs so if we go

44
00:04:32.530 --> 00:04:38.169
back to the email address we can add a placeholder to our email okay so if you

45
00:04:38.169 --> 00:04:43.210
want to give the user a hint saying that this is this is supposed to be the email

46
00:04:43.210 --> 00:04:47.620
we're just gonna add a placeholder there and this we can write email and now you

47
00:04:47.620 --> 00:04:52.419
can see a placeholder in there okay I don't see anything for the password we

48
00:04:52.419 --> 00:05:01.750
can add a placeholder and we can call it password okay also you can give your

49
00:05:01.750 --> 00:05:08.020
field a size okay using the size attribute and we can set that for

50
00:05:08.020 --> 00:05:15.520
example to 30 pixels and same thing for our password I think that's what 30

51
00:05:15.520 --> 00:05:23.139
pixels as well okay you can limit the number of characters that the user is

52
00:05:23.139 --> 00:05:29.500
allowed to input in the fields using the max length attribute and we can set it

53
00:05:29.500 --> 00:05:34.810
to 100 for example okay and the same for the password you can try that and say

54
00:05:34.810 --> 00:05:42.090
max length is for example 30 30 characters maximum okay

55
00:05:42.090 --> 00:05:48.729
so now if you go to the submit button by default the value of the button or the

56
00:05:48.729 --> 00:05:53.380
text you can see in the button is going to be submit but you can change that if

57
00:05:53.380 --> 00:05:59.470
you want by giving it a value and we can set that to login okay and now we can

58
00:05:59.470 --> 00:06:06.729
see the login attacks in there so that's our simple login form that we have

59
00:06:06.729 --> 00:06:12.400
created to get introduced to forms there are a few other things we can add our

60
00:06:12.400 --> 00:06:18.450
form before before we finish let's add something else I'm gonna add a label to

61
00:06:18.450 --> 00:06:25.889
the email password inputs okay to do that we're gonna go before the inputs

62
00:06:25.889 --> 00:06:34.210
okay and creates a label using the label tag you can write for example email okay

63
00:06:34.210 --> 00:06:39.340
and we need to link the label to the inputs using the four attributes

64
00:06:39.340 --> 00:06:45.370
but we're gonna need to add another attribute to our inputs now this uh

65
00:06:45.370 --> 00:06:50.410
stability is going to be an ID I'm gonna call it email so the ID is different

66
00:06:50.410 --> 00:06:56.830
from it from the name so the name is going to be used by PHP to recognize the

67
00:06:56.830 --> 00:07:05.199
inputs okay in the PHP code but the ID is usually used either to link your

68
00:07:05.199 --> 00:07:10.720
input to the label and later on you'll see how you can use ID to do some CSS

69
00:07:10.720 --> 00:07:15.729
and decoration okay but for now we're going to need to use an ID to link the

70
00:07:15.729 --> 00:07:25.419
label to the input okay okay and the same thing for the password I'm going to

71
00:07:25.419 --> 00:07:35.500
create a label and we're gonna call it password okay and we need to link it to

72
00:07:35.500 --> 00:07:40.720
the password input so we're going to give our password inputs an ID as well

73
00:07:40.720 --> 00:07:50.510
as password and the same ID will go in the four attributes of our label okay

74
00:07:50.510 --> 00:07:54.410
[Music] you