WEBVTT

0
00:01.480 --> 00:02.200
(music)

1
00:02.470 --> 00:02.890
(music)

2
00:02.890 --> 00:04.030
(music)

3
00:07.240 --> 00:08.260
(music)

4
00:10.420 --> 00:11.410
(music)

5
00:19.410 --> 00:23.040
I want to show you the input of type search quickly.

6
00:23.400 --> 00:26.310
Firstly, I want to show you the input of type text.

7
00:26.520 --> 00:32.070
Okay, let's go to the end, and input of type search. And you'll see, if we save this, and we just refresh

8
00:32.070 --> 00:39.900
the browser, visually they look exactly the same ... initially. If we are inside the text field

9
00:41.240 --> 00:42.980
you know that this is what it looks like.

10
00:42.980 --> 00:46.840
But if we go into the search input box, look what happens.

11
00:46.850 --> 00:53.090
We start typing, we get that little X, that cross. Chrome automatically puts this in for us.

12
00:53.090 --> 00:57.680
And of course, if the user clicks that X, it clears the search box altogether.

13
00:57.680 --> 01:00.200
So that's one visual difference between the two.

14
01:00.530 --> 01:04.880
Now let's just get rid of the text box and just have the search box.

15
01:05.620 --> 01:06.670
Just like that.

16
01:06.670 --> 01:12.460
And many of the attributes we can use are the same as other form widgets.

17
01:13.030 --> 01:16.990
Bear in mind we have to have a name attribute, otherwise nothing will be submitted to the server.

18
01:16.990 --> 01:20.770
You have to send name:value pairs to a server. So the name here can be "q". 

19
01:20.800 --> 01:24.040
Why did I use the letter "q"?

20
01:24.070 --> 01:25.540
It's just convention.

21
01:25.540 --> 01:30.430
A lot of developers, when it comes to search terms, define a variable and they define it as "q". So it's

22
01:30.430 --> 01:34.000
just something that's done in the development industry, but you don't have to do it.

23
01:34.270 --> 01:38.800
It's not like it's mandatory or anything, but you do have to have a name attribute.

24
01:39.070 --> 01:42.580
The next thing we can put on here is a placeholder attribute.

25
01:42.610 --> 01:46.450
You know, I'm just showing you that we can use many of the same attributes you've seen before and we

26
01:46.450 --> 01:47.380
can have "search".

27
01:47.380 --> 01:52.060
So if we save this, refresh the page, there's our search placeholder.

28
01:52.360 --> 01:57.550
Of course, when the user clicks on the box, it's still there until you start typing.

29
01:57.640 --> 01:59.080
It's a very, very handy.

30
01:59.110 --> 02:03.340
Now what's really cool is we can easily, easily style this input type.

31
02:03.370 --> 02:04.450
It's not difficult.

32
02:05.180 --> 02:05.570
You know what,

33
02:05.570 --> 02:07.390
let me just set up this document a bit better.

34
02:07.400 --> 02:09.710
So let's have HTML. Within here,

35
02:09.830 --> 02:13.910
body. And let's put this input in the body.

36
02:14.540 --> 02:19.040
And of course, before the body we can have a head section with the style section. And you'll see how

37
02:19.040 --> 02:22.560
easy it is for us to style this input of type search.

38
02:22.580 --> 02:23.870
Firstly, you've seen this before.

39
02:23.870 --> 02:28.400
We can target our inputs and with CSS we can define its type.

40
02:28.400 --> 02:31.160
And of course the type here is search.

41
02:32.660 --> 02:34.970
And we can apply any styling we want.

42
02:34.970 --> 02:36.560
It's very easy in this instance.

43
02:36.560 --> 02:41.210
You'll see later on in the course I dedicate an entire section talking about styling. And some widgets

44
02:41.210 --> 02:43.610
are easy to style, some are difficult.

45
02:43.640 --> 02:46.610
The search is very, very easy, in fact.

46
02:46.610 --> 02:51.500
And I'll show you now, you know we can change font-size, let's say 18 pixels.

47
02:51.680 --> 02:54.380
Background: tomato.

48
02:56.400 --> 02:57.600
Refresh the browser.

49
02:57.630 --> 02:58.530
There we go.

50
02:58.800 --> 03:02.700
You can already see, we're starting to add some funky styles.

51
03:03.000 --> 03:06.690
What else ... you'll notice that if the user starts typing, it's black.

52
03:06.840 --> 03:09.270
We can make that white, color: white.

53
03:10.300 --> 03:10.860
How's this?

54
03:10.870 --> 03:12.130
Yeah, it's better.

55
03:12.160 --> 03:14.770
You know what? I actually don't even like that placeholder of search.

56
03:14.770 --> 03:16.950
So what we can do as well, which is pretty neat.

57
03:16.960 --> 03:18.430
Here's another thing we can do with CSS.

58
03:18.430 --> 03:20.560
We can target its type of search,

59
03:20.590 --> 03:21.370
okay?

60
03:21.370 --> 03:25.810
But, what we can do is we can actually specifically style the placeholder.

61
03:26.080 --> 03:27.670
How awesome is that?

62
03:27.670 --> 03:34.300
And here we can make its color white, for example. Much better. And we can even add some padding.

63
03:34.300 --> 03:36.580
Let's add some padding to the left just a little bit.

64
03:36.580 --> 03:37.210
2 pixels.

65
03:37.210 --> 03:37.750
There we go.

66
03:37.750 --> 03:40.150
Just pushes it slightly, makes it look pretty cool.

67
03:40.150 --> 03:41.410
So that's our placeholder.

68
03:41.410 --> 03:45.700
And let's continue to style the actual input text itself.

69
03:45.940 --> 03:46.290
I don't know.

70
03:46.330 --> 03:49.840
We can change the font-family to Georgia.

71
03:50.080 --> 03:50.920
How is that?

72
03:51.700 --> 03:53.110
Hey, it's starting to look cool 😎.

73
03:53.110 --> 03:54.250
I don't like that border.

74
03:54.250 --> 03:56.320
So let's change the border to 2 pixels,

75
03:56.320 --> 03:58.090
solid black, for example.

76
03:58.090 --> 04:00.670
I mean, you can see how easy this is to style, right?

77
04:00.700 --> 04:04.840
We're doing nothing fancy, and yet it's starting to come together so nicely.

78
04:04.840 --> 04:08.770
What about adding a slight text shadow, that could look cool.

79
04:09.040 --> 04:10.340
Let's see what that looks like.

80
04:10.340 --> 04:14.180
0 0 2px black.

81
04:14.210 --> 04:15.200
How does that look?

82
04:15.320 --> 04:17.060
I think that looks kind of cool, man.

83
04:17.150 --> 04:21.020
And let's just have spacing between words like word-spacing,

84
04:22.000 --> 04:22.690
5

85
04:22.810 --> 04:24.040
5 pixels.

86
04:24.140 --> 04:26.080
Let's just type on here.

87
04:26.500 --> 04:27.490
grass. 

88
04:27.790 --> 04:29.170
Warthogs.

89
04:29.500 --> 04:30.090
See?

90
04:30.160 --> 04:32.270
Really nice spacing between those words.

91
04:32.290 --> 04:33.220
I think it looks cool.

92
04:33.220 --> 04:36.100
And we can change its width to say 100%.

93
04:37.120 --> 04:41.200
And if we expand this, you can see the width is stretched 100% across the viewport.

94
04:41.230 --> 04:45.460
Anyway, I'll stop here because I can literally keep going on, but you can see how nice you can create

95
04:45.460 --> 04:47.770
these search boxes.

96
04:47.780 --> 04:51.490
You can really customize it to be very intuitive, and very user friendly.
(music plays)