WEBVTT 0 00:00.400 --> 00:02.720 We are cruising 🚢 through all these types. 1 00:02.740 --> 00:06.600 Next, I want to talk about the input with type set to URL. 2 00:06.980 --> 00:10.630 Oh, I hadn't really designed that URL logo nicely, did I? 3 00:10.960 --> 00:13.150 But anyway, that's not what's important. 4 00:13.150 --> 00:15.260 And why would you want an input type of URL? 5 00:15.280 --> 00:15.880 I don't know, 6 00:15.910 --> 00:20.560 maybe you want to ask the user if they have a website of their own and you're asking them to type it 7 00:20.560 --> 00:21.070 in. 8 00:21.250 --> 00:24.790 Maybe you're asking them for their favorite search engine. 9 00:24.790 --> 00:25.570 I don't know. 10 00:25.570 --> 00:29.410 But let's say you want to include an input with type URL. 11 00:29.440 --> 00:30.550 How does it work? 12 00:30.580 --> 00:38.290 Well, obviously its use is to capture URLs. But it's got a huge downside and that is it only takes 13 00:38.290 --> 00:45.340 full absolute URLs and this, in my opinion, restricts its usefulness. 14 00:45.370 --> 00:46.600 It's just annoying. 15 00:46.600 --> 00:52.030 There's no option to be able to capture just a domain name or just a path, for example. 16 00:52.030 --> 00:58.510 And what this means is that the browser will display an error if no protocol is entered, such as HTTP 17 00:58.540 --> 01:02.570 for example, or if the URL is otherwise malformed. 18 01:02.630 --> 01:02.900 "Okay 19 01:02.900 --> 01:04.670 Clyde, give me an example." 20 01:05.180 --> 01:05.570 Okay. 21 01:05.570 --> 01:06.080 Okay. 22 01:06.380 --> 01:08.120 Take this as an example. 23 01:08.120 --> 01:09.200 This would pass. 24 01:09.230 --> 01:10.190 This makes sense. 25 01:10.190 --> 01:10.910 It's a URL. 26 01:10.940 --> 01:13.400 But what about if the user types one of these two? 27 01:13.430 --> 01:14.570 Do you think they would pass? 28 01:14.600 --> 01:15.650 No. 29 01:17.780 --> 01:23.180 This will result in an error being shown by the browser and it won't submit your form. 30 01:23.180 --> 01:26.960 How irritating. And over and above this, 31 01:26.960 --> 01:27.380 right, 32 01:27.380 --> 01:35.120 even if we take the top example of https://twitter.com, just because a URL is well-formed doesn't mean 33 01:35.120 --> 01:38.120 that it refers to a location that actually exists. 34 01:38.120 --> 01:41.060 You'd have to have server side code that checks this for you. 35 01:41.060 --> 01:45.680 And because of all these restrictions, it kind of feels like a missed opportunity for me that different 36 01:45.680 --> 01:48.740 parts of a URL cannot be specified. 37 01:48.800 --> 01:53.140 But it is what we have at the moment. And there is not only downsides with URLs. 38 01:53.150 --> 01:59.020 The other benefit we have, as with most other widgets, is the UI component. 39 01:59.030 --> 02:05.240 Phones usually customize keyboard pop-ups when the URL input type is used. 40 02:05.270 --> 02:07.910 For example, IOS 41 02:07.940 --> 02:10.670 customizes its keyboards 42 02:10.670 --> 02:11.480 with what? 43 02:11.510 --> 02:12.140 That's right. 44 02:12.170 --> 02:20.840 With these symbols, whenever it sees the type set to URL. And over and above the period, comma and forward 45 02:20.840 --> 02:21.560 slash, 46 02:21.860 --> 02:27.020 they also include common top-level domains such as ... ".com". 47 02:27.110 --> 02:34.070 So it just means you as a user don't have to type ".com", you just see the text displayed. 48 02:34.070 --> 02:36.650 So it does help from that aspect. 49 02:36.650 --> 02:39.320 And if you're anything like me, you love visual examples. 50 02:39.320 --> 02:40.970 So here you go, right? 51 02:40.970 --> 02:44.720 That's kind of what the keyboard will look like, and that does help. 52 02:44.720 --> 02:47.120 But anyway, I don't want to harp on too much on this type. 53 02:47.120 --> 02:49.130 I don't particularly find it that useful. 54 02:49.130 --> 02:50.060 So let's move on.