1
00:00:01,980 --> 00:00:07,650
OK so the next thing that I want to do here is actually get us building our own forum so I can go ahead

2
00:00:07,650 --> 00:00:09,360
and open up sublime.

3
00:00:09,450 --> 00:00:10,670
I have a new file.

4
00:00:10,680 --> 00:00:11,760
Call it whatever you want.

5
00:00:11,760 --> 00:00:17,810
Mine is formed that HMO going to add my skeleton in their boiler plate.

6
00:00:17,880 --> 00:00:24,810
Give it a nice title like form demo and then I want to start.

7
00:00:24,840 --> 00:00:28,170
Remember we have the form tag and then we have the input tag.

8
00:00:28,260 --> 00:00:33,410
We start with the input so let's play around with some input tags first.

9
00:00:33,600 --> 00:00:36,930
So let's just add a few here will do text.

10
00:00:36,930 --> 00:00:49,020
What color is my favorite Let's try radio and let's do password and say that let's go ahead and open

11
00:00:49,020 --> 00:00:54,620
it up in Chrome and you can see we have four different inputs.

12
00:00:54,690 --> 00:00:56,180
So this is text.

13
00:00:56,490 --> 00:00:59,580
This is color.

14
00:00:59,580 --> 00:01:01,940
This is a radio button.

15
00:01:02,810 --> 00:01:04,450
And this is password.

16
00:01:05,310 --> 00:01:10,030
So again you can always go to M.D and to see all the possible options for inputs.

17
00:01:10,050 --> 00:01:10,920
It's quite a few.

18
00:01:11,220 --> 00:01:17,040
But what we're going to go ahead and do is build the simple log in form that we've seen.

19
00:01:17,490 --> 00:01:23,750
So although we really need there are these two inputs text and password.

20
00:01:25,190 --> 00:01:28,930
And then we're also going to want a button and we have a few choices for buttons.

21
00:01:29,190 --> 00:01:35,840
We can do this create a button tag and click let's say submit here.

22
00:01:37,290 --> 00:01:47,280
But what can also do is make another input with type equals submit and you'll see the refresh.

23
00:01:47,910 --> 00:01:52,450
They look identical and they're not going to do anything in this case.

24
00:01:52,770 --> 00:02:00,780
So we have a user name which is what will go here and then we have our password but it's not really

25
00:02:00,780 --> 00:02:05,950
clear to a user just someone who's encountering this form for the first time.

26
00:02:06,000 --> 00:02:12,030
So there's a nice attribute called placeholder that we can add and what placeholder will do.

27
00:02:12,090 --> 00:02:18,050
It takes some text so I'm going to go ahead and add placeholder ECOs username placeholder because password

28
00:02:18,510 --> 00:02:26,640
and it's just going to be the text that is temporarily filling the input before the user alters it.

29
00:02:26,670 --> 00:02:34,130
So we end up with a small typo here place holder.

30
00:02:34,410 --> 00:02:38,270
We go we end up with username and password.

31
00:02:39,090 --> 00:02:40,030
So let's go back.

32
00:02:40,230 --> 00:02:44,700
I'm just going to add and each one here just say log in.

33
00:02:45,660 --> 00:02:46,850
Here's our form.

34
00:02:47,310 --> 00:02:53,360
Although technically it's not a form yet it's not a foreign tag it just looks like a form to us.

35
00:02:53,370 --> 00:02:54,750
It's two inputs.

36
00:02:55,170 --> 00:02:55,990
Let's go with input.

37
00:02:55,990 --> 00:03:02,010
Type you submit just so that we can really hammer home this point that the type attribute can drastically

38
00:03:02,010 --> 00:03:03,870
change what input does