WEBVTT

0
00:01.500 --> 00:01.860
All right.

1
00:01.860 --> 00:06.750
Let's get into an example, because examples speak louder than a thousand words.

2
00:07.050 --> 00:07.980
Here we go.

3
00:08.020 --> 00:10.650
Let's start an HTML file. Within here,

4
00:10.650 --> 00:14.990
let's have a head style section, but I'm not going to style anything for now.

5
00:15.000 --> 00:18.120
First, let's just look at this input of type image.

6
00:18.780 --> 00:19.650
How can we do it?

7
00:19.650 --> 00:27.450
Well, firstly, let's just ask for a username and we'll have an input of type ...

8
00:27.810 --> 00:29.520
you guessed it, text.

9
00:30.060 --> 00:31.950
Its name can be user.

10
00:32.400 --> 00:35.100
Oh, we don't need an ID.

11
00:36.180 --> 00:36.750
So there we go.

12
00:36.750 --> 00:37.530
That's our first input.

13
00:37.560 --> 00:38.250
We save that.

14
00:38.250 --> 00:39.360
We look at the browser.

15
00:39.390 --> 00:40.200
There we go.

16
00:40.200 --> 00:42.150
And let's move on to the next widget.

17
00:42.150 --> 00:46.380
I mean usually, you know, with a login page you're going to need a password as well.

18
00:46.380 --> 00:49.650
We've looked at all these types, which is really, really cool.

19
00:50.370 --> 00:51.330
Password.

20
00:51.720 --> 00:52.770
There we go.

21
00:52.980 --> 00:54.330
It's name can be password.

22
00:54.330 --> 00:55.410
We don't need an ID.

23
00:55.740 --> 00:56.520
There we go.

24
00:56.550 --> 01:02.620
We've got two widgets already, and now yes, we could go button of type submit

25
01:02.980 --> 01:03.440
okay,

26
01:03.460 --> 01:04.210
and submit.

27
01:04.240 --> 01:09.430
We could do this. But say it's important to us that we want an image. 

28
01:09.790 --> 01:10.870
In that instance

29
01:10.870 --> 01:15.160
would even argue it's not even that useful because within the button you can include an image,

30
01:15.160 --> 01:18.310
okay. So let's get rid of the button.

31
01:18.310 --> 01:23.020
Let's just say it's important for you to send the X and Y coordinates.

32
01:23.470 --> 01:30.880
Well, it's very easy to do that natively by using this input type, right, of type image.

33
01:31.300 --> 01:37.960
The src is the source of my file. And I've got in the same directory a file called "submit button 1.png".

34
01:39.600 --> 01:42.960
It takes an alt attribute just in case it can't be displayed to the screen.

35
01:42.960 --> 01:46.600
Then at least, you know, they'll see the text or the screen reader will be able to read it.

36
01:46.620 --> 01:47.920
Submit form.

37
01:47.940 --> 01:50.070
We can define the width.

38
01:51.460 --> 01:52.390
A width,

39
01:54.150 --> 01:57.180
let's just make that 100 pixels, and the height, 

40
01:58.440 --> 01:59.520
why don't we do that as 90. 

41
02:00.090 --> 02:01.380
Let's save it.

42
02:01.380 --> 02:03.660
And there is our cool form.

43
02:03.900 --> 02:06.810
So now, instead of a boring old submit button, we've got an image.

44
02:06.810 --> 02:13.470
But ... when I ... let's just say I'm close to the top left corner of this image, if I click that,

45
02:14.640 --> 02:16.440
look what's sent.

46
02:16.470 --> 02:17.610
How awesome.

47
02:18.570 --> 02:19.920
X and Y coordinates,

48
02:19.920 --> 02:24.300
here 3 pixels to the right, and 3 pixels down, because I wasn't quite in the corner, but

49
02:24.300 --> 02:26.190
I was almost almost in the corner.

50
02:26.310 --> 02:30.090
And here, it's just submitted the attributes as X and Y.

51
02:30.120 --> 02:35.250
Remember I said if you include a name attribute, that will be appended to that name.

52
02:35.520 --> 02:40.440
So for example, let's have a name attribute on here, of "pos".

53
02:41.540 --> 02:42.500
Let's refresh the page.

54
02:42.500 --> 02:44.300
Let's click on the middle now of the button.

55
02:44.540 --> 02:45.250
There we go.

56
02:45.260 --> 02:49.910
Now we've got X and Y coordinates with the word "pos" appended to it.

57
02:50.300 --> 02:51.620
How awesome is that, my dear

58
02:51.650 --> 02:53.330
students? You might be thinking, "Clyde.

59
02:53.360 --> 02:54.170
Well, okay, cool.

60
02:54.170 --> 02:58.280
But, you know, I could have just put that image in the button like you said", and you are 100% right.

61
02:58.280 --> 03:02.750
So often, you know, you want to use these things when you start creating a heat map.

62
03:02.750 --> 03:05.450
So let me just give you a quick example while I'm here.

63
03:05.450 --> 03:06.140
I know I'm naughty.

64
03:06.140 --> 03:09.670
I'm giving you too many examples, but it's so, so interesting and it's so good for you.

65
03:09.680 --> 03:12.770
So, choose your favorite food.

66
03:12.770 --> 03:16.550
Okay, Let's have that as a heading. And under this heading,

67
03:16.550 --> 03:17.690
okay, let's have a div. 

68
03:17.690 --> 03:18.920
We wrap everything within a div.

69
03:18.920 --> 03:23.450
It's just good for styling purposes, even though I'm not really going to style it now let's just have

70
03:23.450 --> 03:24.500
it here.

71
03:24.500 --> 03:27.170
I want an input type image.

72
03:28.430 --> 03:29.270
You know the drill.

73
03:29.270 --> 03:35.780
And here I've got, in the same directory, an image called "food icons.png".

74
03:35.810 --> 03:36.470
Okay.

75
03:37.040 --> 03:37.310
Whoa.

76
03:37.340 --> 03:38.810
That is too, too big.

77
03:41.210 --> 03:46.150
Let's do alternative text, image of food types.

78
03:47.470 --> 03:51.260
And let's give our name again of "pos".

79
03:51.280 --> 03:53.320
And anyway, this image is too big.

80
03:53.320 --> 03:59.680
So in our styles here, let's target the ID ... we haven't given our input an ID have we, so let's just give

81
03:59.680 --> 04:01.750
it an ID of image.

82
04:04.110 --> 04:04.650
How's that?

83
04:05.070 --> 04:10.200
So now we can target the input with ID of image and we can style it the way we want.

84
04:10.230 --> 04:12.840
Let's just give it a width of 300

85
04:14.170 --> 04:18.280
pixels and a height of 300 pixels.

86
04:18.430 --> 04:19.070
That's better.

87
04:19.090 --> 04:20.170
Much, much better.

88
04:20.200 --> 04:22.540
Okay, so now we can go to our browser.

89
04:22.570 --> 04:23.160
Okay.

90
04:23.170 --> 04:29.290
What we can do, is you'll notice when we click on the hamburger, we're getting X and Y coordinates of,

91
04:29.320 --> 04:30.940
say here, 49 and 49. 

92
04:30.970 --> 04:34.770
If we click on the sandwich, we're getting coordinates of 257, 255.

93
04:34.780 --> 04:37.660
If we click in the middle, it's 147, 147.

94
04:37.750 --> 04:43.660
So what's really cool in this example is you could write server side code that works out what food was

95
04:43.660 --> 04:50.860
clicked on by the coordinates submitted, and that can keep a tally of the favorite foods people voted

96
04:50.860 --> 04:51.340
for.

97
04:51.370 --> 04:51.970
Right.

98
04:51.970 --> 04:56.050
So you show them an image, they click on the image, whichever one they love the most, you know,

99
04:56.080 --> 04:59.890
you've sent those coordinates and you can work out which food they like.

100
05:00.700 --> 05:02.050
And I know that has flaws.

101
05:02.080 --> 05:06.250
You know, if they click on the border of one and not quite the other, but that's why you want a lot

102
05:06.250 --> 05:10.480
of space between the foods and you know, you hope they click on the actual food icon itself.

103
05:10.510 --> 05:16.850
Anyway, this is just a very fun example, very high level example as to why this might be useful in

104
05:16.850 --> 05:18.380
your circumstance.

105
05:18.380 --> 05:21.770
But enough said on the image input type, we've got a ton more to cover.

106
05:21.800 --> 05:23.270
See you in the next lecture.