WEBVTT 0 00:00.260 --> 00:04.460 Next, I want to talk about the input of type search. 1 00:04.460 --> 00:10.340 And right off the bat, I just want to say that input elements of type search are very, very similar 2 00:10.340 --> 00:17.180 to those of type text, except that they are specifically intended for handling search terms. 3 00:17.180 --> 00:23.900 They're basically equivalent in behavior to the type of text, but user-agents (aka browsers) may choose 4 00:23.900 --> 00:26.690 to style them differently by default. 5 00:26.720 --> 00:30.640 I guess what I'm trying to say is that they're not special. 6 00:30.650 --> 00:33.950 It just creates a single line text box. 7 00:33.950 --> 00:36.620 That's all that this type of search does. 8 00:36.650 --> 00:38.720 But this is not to say they're useless. 9 00:38.720 --> 00:45.440 Search controls are useful to gather short runs of text that servers or client side scripts will use 10 00:45.440 --> 00:48.620 as parameters to conduct search operations. 11 00:48.620 --> 00:53.560 But from a browser side, it does absolutely nothing. 12 00:53.570 --> 00:56.540 It behaves just like a text input. 13 00:56.540 --> 00:57.650 And this isn't a problem. 14 00:57.650 --> 01:03.090 In fact, the spec doesn't even require this type of search to do anything special. 15 01:03.090 --> 01:09.330 What I'm trying to say is that don't expect the browser to bind this input type with a search engine 16 01:09.330 --> 01:13.770 or perform any fancy search operations on the back of it. 17 01:13.770 --> 01:18.900 And as I mentioned, it's almost the same as a normal text box that is input of type text, but the 18 01:18.900 --> 01:22.890 browser just tweaks the design slightly to make it look a bit pretty. 19 01:22.920 --> 01:23.670 Have you got it? 20 01:23.760 --> 01:25.250 There are a few other differences. 21 01:25.260 --> 01:32.130 For example, on touch devices you may see a search word or a magnifying glass icon 🔎 like this. 22 01:33.640 --> 01:34.830 And that's pretty cool, right? 23 01:34.840 --> 01:36.610 It's improving the UI. 24 01:36.640 --> 01:38.460 And this is not all my dear students. 25 01:38.470 --> 01:44.920 There's another benefit of having an input with type search, and that is values can be automatically 26 01:44.920 --> 01:48.370 saved and reused to allow auto-completion. 27 01:48.640 --> 01:52.890 This auto-completion and saving feature is pretty much done by all modern browsers today. 28 01:52.900 --> 01:58.780 In other words, they automatically store search terms previously entered across domains which then 29 01:58.780 --> 02:03.780 come up as autocomplete options when subsequent searches are performed. 30 02:03.790 --> 02:09.340 And this obviously helps users who tend to do searches on the same or similar search queries over time. 31 02:09.340 --> 02:15.160 So bottom line is that it's pretty similar to the input of type text, with a few subtle differences, 32 02:15.160 --> 02:18.880 and those subtle differences boil down to styling. 33 02:19.690 --> 02:20.680 You know what, 34 02:20.950 --> 02:29.200 before we move on, I just want to have another lecture where we use the :valid and :invalid pseudo classes. 35 02:29.200 --> 02:33.920 So with a lot of these different input types, we do get these pseudo classes by default. 36 02:33.920 --> 02:40.940 The browser gives it to us and we can target these :valid and :invalid pseudo classes to style our widgets 37 02:40.940 --> 02:43.910 differently depending on whether it's valid or invalid. 38 02:44.060 --> 02:47.480 So why don't we code up an input with type search? 39 02:47.660 --> 02:50.480 We can make this field required. 40 02:50.690 --> 02:57.830 So if it's blank, I want to show a little cross ❌ and when it's valid, I want that cross to change to 41 02:57.830 --> 02:58.550 a tick ✔. 42 02:58.580 --> 02:59.780 How can we do that? 43 02:59.810 --> 03:03.410 Hint: I am going to be using the ::after pseudo elements. 44 03:03.440 --> 03:05.390 We've done this a few times in the course. 45 03:06.300 --> 03:07.620 Give it a think 🤔. 46 03:07.620 --> 03:09.990 And in the next lecture, let's code together. 47 03:10.110 --> 03:10.680 I can't wait. 48 03:10.730 --> 03:11.160 See you now.