1
00:00:05,620 --> 00:00:06,540
Welcome back.

2
00:00:06,550 --> 00:00:09,810
Let's go ahead and go through the solutions for HTL assessment too.

3
00:00:10,060 --> 00:00:14,670
All right here we have in each team file and right now it's link to the empty browser page.

4
00:00:14,740 --> 00:00:16,260
So I'm going to start off just by typing.

5
00:00:16,300 --> 00:00:18,460
H t m l and auto filling.

6
00:00:18,460 --> 00:00:20,440
What we need here in most of our work.

7
00:00:20,470 --> 00:00:22,930
Pretty much all our work is going to happen here in the body.

8
00:00:22,930 --> 00:00:30,430
So let's start off by creating that heading one which we saw was the puppy adoption page and then I

9
00:00:30,430 --> 00:00:33,850
believe there was another heading to just asking for more information.

10
00:00:34,000 --> 00:00:38,070
So I'll just say Please enter information.

11
00:00:38,290 --> 00:00:41,640
It's up to you how much detail you wanted to provide in those heading to.

12
00:00:41,860 --> 00:00:46,840
Again we're not worried about matching the exact text just matching the ideas of creating a form.

13
00:00:46,840 --> 00:00:53,320
Speaking of which let's go ahead and create that form so I'll type up form enter and we're not going

14
00:00:53,320 --> 00:00:55,560
to worry about a class because that's for CSSA.

15
00:00:55,630 --> 00:01:00,010
And in this case we don't really worry about having a redirect for the action.

16
00:01:00,130 --> 00:01:02,150
Instead we'll just have the method B get.

17
00:01:02,170 --> 00:01:06,970
That way we can make sure that we're actually grabbing information from the form and passing it through

18
00:01:06,970 --> 00:01:07,800
to the URL.

19
00:01:07,900 --> 00:01:13,810
Upon submission of the page the first thing we wanted to do was add inputs for first name last name

20
00:01:14,110 --> 00:01:18,620
email and password and all those inputs also had labels.

21
00:01:18,760 --> 00:01:26,770
So let's create a very generic label input pair so say label for and then input here and we'll give

22
00:01:26,770 --> 00:01:28,460
it an ID tag as well.

23
00:01:28,810 --> 00:01:30,650
And right now this will just be empty.

24
00:01:30,970 --> 00:01:34,210
So I'm going to copy and paste these a couple of times.

25
00:01:34,240 --> 00:01:42,080
We have one for first name and other for last name and other for the email and another for the password.

26
00:01:42,520 --> 00:01:47,980
And then in between first and last e-mail password I'm going to insert a little break here.

27
00:01:48,070 --> 00:01:52,270
That way we can start a new line and you can do this either by just inserting a paragraph tag with a

28
00:01:52,450 --> 00:01:58,670
closing paragraph tag or by inserting a line breaker which is just a B tag.

29
00:01:59,080 --> 00:01:59,560
All right.

30
00:01:59,590 --> 00:02:02,180
Now that we've done that let's actually create these.

31
00:02:02,230 --> 00:02:06,410
So we'll start at the level for first name and I will say this is.

32
00:02:06,640 --> 00:02:10,170
First we'll give it an idea that matches first.

33
00:02:10,360 --> 00:02:16,690
And this type is going to be a text type and we can go ahead and remove the value and instead replace

34
00:02:16,690 --> 00:02:18,090
it with a placeholder.

35
00:02:18,450 --> 00:02:26,200
So say placeholder is equal to first name we'll hit save and let's refresh just to make sure.

36
00:02:26,290 --> 00:02:27,570
Right along the same path.

37
00:02:27,700 --> 00:02:30,220
So first name and I have the first name placeholder.

38
00:02:30,220 --> 00:02:34,700
And now I need to add the labels for these other boxes here that their inputs.

39
00:02:34,750 --> 00:02:36,080
So we'll do that as well.

40
00:02:36,340 --> 00:02:45,010
So we'll say last match that up with last ID and then will say last name colon and then we'll have that

41
00:02:45,010 --> 00:02:46,550
have a placeholder as well.

42
00:02:46,870 --> 00:02:52,090
So say placeholder is equal to last name.

43
00:02:52,250 --> 00:02:57,250
Save that and let's fill that in for the email and password as well.

44
00:02:57,310 --> 00:03:04,240
So we'll say for email connected with the ID and then we'll do the same here for the password we'll

45
00:03:04,240 --> 00:03:06,070
say for pass.

46
00:03:06,070 --> 00:03:07,140
Connect that with that.

47
00:03:07,150 --> 00:03:10,920
Remember these are essentially just arbitrary string choices that just didn't match up with the four.

48
00:03:10,920 --> 00:03:18,210
And the ID and then we'll say email for that label and will say password here.

49
00:03:18,280 --> 00:03:23,600
And we also want to change the e-mail and password to reflect a specific input types.

50
00:03:23,650 --> 00:03:30,880
So we'll say type is e-mail and we'll say type here is password and if you want it can have a placeholder

51
00:03:30,880 --> 00:03:36,250
here as well as that lvalues will say placeholder for that placeholder.

52
00:03:36,280 --> 00:03:43,360
I'll just say email at e-mailed dot com save that let's refresh see if it's working.

53
00:03:43,670 --> 00:03:44,030
All right.

54
00:03:44,030 --> 00:03:44,450
Looks good.

55
00:03:44,450 --> 00:03:48,470
We have first name last name email and password.

56
00:03:48,470 --> 00:03:53,990
Now we also want to ask the user if they're over the age of 18 so they can adopt this puppy so that

57
00:03:54,020 --> 00:04:04,050
inside the form I'm going to create just that paragraph asking Are you over 18 and we want to actually

58
00:04:04,050 --> 00:04:06,610
have a radio button and we want make sure they're connected.

59
00:04:07,050 --> 00:04:09,950
So we'll have a label and we'll say this is for.

60
00:04:09,960 --> 00:04:11,480
Yes.

61
00:04:11,550 --> 00:04:21,000
So say yes this person is over 18 and that's going to be an input of type radio and I will say the name

62
00:04:21,000 --> 00:04:25,080
here is over 18.

63
00:04:25,080 --> 00:04:29,430
So this really matter what you call this name wise it just matters that when you create the next radio

64
00:04:29,460 --> 00:04:32,110
button you make sure they connect to the same name.

65
00:04:32,340 --> 00:04:34,320
So I will copy this label in this input

66
00:04:37,540 --> 00:04:39,920
and have it here and let's make one for no

67
00:04:44,050 --> 00:04:46,030
and then we still have the same name.

68
00:04:46,330 --> 00:04:50,320
And then the values will go ahead and pass back something like Yes.

69
00:04:50,350 --> 00:04:53,460
Over and over.

70
00:04:53,560 --> 00:04:55,430
And remember when you actually hit submit.

71
00:04:55,600 --> 00:05:01,130
This is the name value pair that's going to be connected with this actual choice on the radio button.

72
00:05:01,150 --> 00:05:04,660
Let's make sure these are working to save this refresh.

73
00:05:04,660 --> 00:05:06,460
So it says are you over 18.

74
00:05:06,460 --> 00:05:11,700
If I select yes and then select No my radio button only allows one to be selected.

75
00:05:11,740 --> 00:05:14,190
So they are successfully linked there.

76
00:05:14,200 --> 00:05:18,240
Finally let's add in that dropdown menu.

77
00:05:18,350 --> 00:05:21,380
So say do you have credit card or PayPal.

78
00:05:21,710 --> 00:05:26,680
So I'll say do you have credit card GCC or PayPal.

79
00:05:27,230 --> 00:05:33,890
And then for this we'll use the selected and we can not worry about the class for now since we won't

80
00:05:33,890 --> 00:05:35,210
be adding style to it.

81
00:05:35,590 --> 00:05:41,270
And for the name I'll just say something like payment and then let's add in an option.

82
00:05:41,560 --> 00:05:51,690
So the option here will say the CC is the value we pass back and then we'll say credit card is the option

83
00:05:51,690 --> 00:05:59,400
that dropdown menu will create one more option and I will say Peepy here for Pay-Pal.

84
00:05:59,400 --> 00:06:00,590
There you go.

85
00:06:00,750 --> 00:06:01,430
Save that.

86
00:06:01,440 --> 00:06:03,340
Let's refresh make sure it's working.

87
00:06:03,390 --> 00:06:06,860
So see yes or no credit card or PayPal.

88
00:06:06,900 --> 00:06:10,090
And then finally let's add in a submit button.

89
00:06:10,110 --> 00:06:17,230
So after this still inside the form I'll see input type submit.

90
00:06:17,520 --> 00:06:24,130
And then let's add value here submit feedback or submit choice or just submit.

91
00:06:24,240 --> 00:06:26,820
Doesn't really matter what you call it refresh.

92
00:06:26,910 --> 00:06:28,500
And now I see all these options.

93
00:06:28,510 --> 00:06:30,420
OK let's make sure this all works.

94
00:06:30,450 --> 00:06:38,760
I'll just say Al is the first name and then we'll say Smith is the last name email we'll say e-mail.

95
00:06:39,060 --> 00:06:40,170
E-mail dot com.

96
00:06:40,170 --> 00:06:42,520
Just something really simple password.

97
00:06:42,690 --> 00:06:46,450
I'll just pass over 18 and I'm using your credit card.

98
00:06:46,470 --> 00:06:49,220
Hit submit and we should see this page refresh.

99
00:06:49,230 --> 00:06:49,850
There we go.

100
00:06:49,860 --> 00:06:53,530
And if you look at the top you should begin to see those name value pairs.

101
00:06:53,730 --> 00:06:58,160
Now if you didn't define a name value pairs for some of these maybe then define a name value pair for

102
00:06:58,170 --> 00:07:02,510
first name or last name then you won't see him here in the OR L if you want to see them.

103
00:07:02,550 --> 00:07:05,330
All you need to do is come back here and then provide them.

104
00:07:05,490 --> 00:07:10,020
So for example first name I didn't see that in the URL because it has no name value pair.

105
00:07:10,020 --> 00:07:20,140
We just need to provide a name for this so we can say first last save that refresh here and then we'll

106
00:07:20,140 --> 00:07:20,820
do this again.

107
00:07:20,830 --> 00:07:22,200
Just say Al.

108
00:07:22,870 --> 00:07:32,500
And then last name Smith So let's say at the dot com some letters there for the password.

109
00:07:32,730 --> 00:07:37,620
Submit again and they should begin to see the first and last appear in the oral.

110
00:07:37,980 --> 00:07:38,610
OK.

111
00:07:38,790 --> 00:07:41,560
That's the very basics of HMO forms.

112
00:07:41,580 --> 00:07:46,500
Again keep in mind later on in the future will really be using flasks his own built in a library to

113
00:07:46,560 --> 00:07:49,480
automatically create the HTML here for us.

114
00:07:49,620 --> 00:07:53,930
But it's important to understand what the real him code underneath would look like.

115
00:07:53,940 --> 00:07:55,520
That flask is going to generate.

116
00:07:55,820 --> 00:07:56,320
OK.

117
00:07:56,580 --> 00:07:58,530
That ends your e-mail crash course.

118
00:07:58,650 --> 00:08:00,290
Hopefully it should have been pretty straightforward.

119
00:08:00,450 --> 00:08:04,540
Not a whole lot we need to cover in order to understand how to work with the basics of each T.M. with

120
00:08:04,590 --> 00:08:05,460
flask.

121
00:08:05,460 --> 00:08:09,560
Up next we'll discuss SS first styling our actual web sites.

122
00:08:09,660 --> 00:08:13,920
Then after that we'll talk about bootstrap which has its own built in classes to make your websites

123
00:08:13,980 --> 00:08:14,900
look nice.

124
00:08:15,000 --> 00:08:17,310
Then we'll be ready for Python and flask.

125
00:08:17,460 --> 00:08:18,220
We'll see you there.