WEBVTT 0 00:00.200 --> 00:01.200 Woo hoo! 1 00:01.250 --> 00:01.670 Welcome. 2 00:01.670 --> 00:02.620 Welcome back. 3 00:02.630 --> 00:08.690 This is going to be such an exciting section because we know that the [html] input is one of the most powerful 4 00:09.230 --> 00:10.190 elements there is. 5 00:10.220 --> 00:11.330 And I've kept saying it. 6 00:11.330 --> 00:16.190 And the reason why it's so powerful is because there are so many different things we can do with the 7 00:16.190 --> 00:16.850 input element. 8 00:16.850 --> 00:22.400 It is going to blow your mind. And I have to high level go through some of them because this course will 9 00:22.400 --> 00:23.060 just never end 10 00:23.090 --> 00:30.110 if I had to go into detail for every single [input] type. And up until now we've seen the input type text attribute 11 00:30.110 --> 00:36.260 used many, many times and that just allows the user to input text into a box. 12 00:36.260 --> 00:39.770 But as I keep alluding to, there are a ton of other input types. 13 00:39.770 --> 00:41.150 "So Clyde, what are they?" 14 00:41.360 --> 00:43.010 Oh, good question. 15 00:43.700 --> 00:44.390 Here they are. 16 00:48.650 --> 00:54.470 And this is a bit of a half truth because these are only the "original" input types, 17 00:54.710 --> 00:58.280 "original" meaning what came out in the old spec. 18 00:58.310 --> 01:00.130 We have new input types now. 19 01:00.140 --> 01:05.600 I'm going to be talking about the newer ones later on in the course, but these original ones are still 20 01:05.600 --> 01:08.240 useful for a lot of input types. 21 01:08.240 --> 01:11.000 So let's do these first and then we can discuss the new ones. 22 01:11.000 --> 01:12.740 So let's start, let's look at password. 23 01:12.740 --> 01:13.850 What is that all about? 24 01:14.540 --> 01:16.250 Well, that's what it looks like, right? 25 01:16.250 --> 01:20.060 It's a single line text field whose value is obscured. 26 01:20.060 --> 01:23.180 The browser will alert the user if the site is not secure. 27 01:23.210 --> 01:26.480 So that's the password type. The radio button, 28 01:26.480 --> 01:29.480 we've even seen examples of this so far in the course. 29 01:29.480 --> 01:30.590 What does that look like? 30 01:31.190 --> 01:31.830 Well, there we go. 31 01:31.850 --> 01:38.120 It's just a button, and a radio button allows a single value. 32 01:38.120 --> 01:38.380 Okay. 33 01:38.390 --> 01:45.110 One value to be selected out of multiple choices with the same "name" attribute in each control. 34 01:45.110 --> 01:46.420 We're going to be looking at this later. 35 01:46.430 --> 01:50.660 Don't worry if you don't know how to use them or code them, but for now, just know that's what it 36 01:50.660 --> 01:55.130 looks like. And it allows ONE value to be selected out of multiple choices. 37 01:55.130 --> 01:56.150 Pretty straightforward. 38 01:56.150 --> 01:56.960 Pretty easy. 39 01:57.890 --> 02:02.360 Next, we've got the input type of button. 40 02:02.360 --> 02:03.350 What does that look like? 41 02:03.830 --> 02:09.050 Well, if there's no text inside, it just has kind of styling applied to it that makes it look like 42 02:09.050 --> 02:09.680 a button. 43 02:09.680 --> 02:14.330 It's basically a push button with no default behavior and it's empty by default. 44 02:14.330 --> 02:18.350 If you want to put a value in it, you can by using the value attribute. 45 02:18.350 --> 02:20.930 But like I mentioned, it's empty by default. 46 02:20.930 --> 02:22.280 So that's the button type. 47 02:22.280 --> 02:23.500 And then we've got checkboxes. 48 02:23.510 --> 02:25.340 Don't confuse this with a radio button. 49 02:25.460 --> 02:29.420 A checkbox allows a value to be selected or deselected. 50 02:29.420 --> 02:35.870 In fact, you can select multiple values, as many as you like all at once, or just one, or nothing. 51 02:36.020 --> 02:37.730 So that's what a checkbox looks like. 52 02:37.970 --> 02:41.960 Then we've got a input type of file. 53 02:42.350 --> 02:43.370 What is that? 54 02:43.400 --> 02:44.570 Well, that's what it looks like. 55 02:44.570 --> 02:50.270 It'll ask the user to select a file and it's a control that lets the user, you guessed it, select 56 02:50.270 --> 02:58.770 a file! And we can use the "accept" attribute to define the types of files that the control can select. 57 02:58.770 --> 03:00.510 But again, we're going to be looking at this later. 58 03:00.540 --> 03:02.040 Don't stress about it now. 59 03:02.040 --> 03:03.210 What's the next type? 60 03:03.210 --> 03:08.550 We can look at a type of hidden and of course we can't see anything. 61 03:08.550 --> 03:12.000 There is no default look because that control is hidden. 62 03:12.000 --> 03:16.440 But what's important is that its value is submitted to the server. 63 03:16.470 --> 03:19.980 Don't worry what this hidden is and why we would use it. 64 03:20.010 --> 03:21.810 We're going to be talking about it later. 65 03:22.080 --> 03:22.650 Okay. 66 03:23.040 --> 03:27.690 The next type is an image type, [where] type is set to image. 67 03:27.690 --> 03:31.410 It's basically a submit button, but with an image of your choice. 68 03:31.410 --> 03:34.500 In other words, it's a graphical submit button. 69 03:34.500 --> 03:40.200 It displays an image defined by the src attribute and the alt attribute displays if the image source 70 03:40.230 --> 03:41.040 is missing. 71 03:41.040 --> 03:42.900 I don't typically like using images 72 03:42.900 --> 03:47.520 I'll be honest with you, my students, because it takes longer to render and display to the screen. 73 03:47.520 --> 03:52.290 I always like using CSS where possible, but anyway, that is available to us. 74 03:52.290 --> 03:54.510 Then we've got this reset. 75 03:54.540 --> 03:55.470 What is that? 76 03:55.500 --> 03:56.520 It's very intuitive. 77 03:56.520 --> 04:01.440 It's a button that resets the content of the form to its default values. 78 04:01.830 --> 04:06.480 It's not really recommended to use this because the user can click it by mistake and then they've just 79 04:06.480 --> 04:07.800 lost all of their work. 80 04:08.160 --> 04:12.030 And then finally, drum roll 🥁 ... we've got the submit. 81 04:12.060 --> 04:18.390 Obviously, this is very, very important because how else is a user going to submit a form? 82 04:18.390 --> 04:24.900 And what's interesting and you may be asking me, "Hey, Clyde, this is weird because we don't have 83 04:24.900 --> 04:27.150 to use an input to create a submit button. 84 04:27.150 --> 04:29.880 Why don't we just use the button HTML element?" 85 04:29.880 --> 04:30.960 Well, that's a very good question. 86 04:30.960 --> 04:35.220 And we are, or I am, going to be addressing that later on in the course. 87 04:35.370 --> 04:38.340 So I just wanted this to be a high level. 88 04:38.340 --> 04:44.430 This is all related to the input types, the different type attributes we can set for an input 89 04:44.430 --> 04:45.990 element in HTML. 90 04:46.170 --> 04:46.400 WooHoo! 91 04:46.470 --> 04:48.480 I know, and these are only the original ones. 92 04:48.480 --> 04:51.150 Remember there are still newer ones, fun ones, 93 04:51.150 --> 04:52.290 we're going to have a look later. 94 04:52.290 --> 04:57.720 But now that you know the high level, let's start digging deeper into some of these. 95 04:57.720 --> 04:58.920 See you now.