1 00:00:02,140 --> 00:00:05,070 Now that's it for the different input fields, 2 00:00:05,070 --> 00:00:06,620 which I want to show. 3 00:00:06,620 --> 00:00:09,640 We are going to explore the file input field 4 00:00:09,640 --> 00:00:10,710 later in the course, 5 00:00:10,710 --> 00:00:13,860 once we're able to also handle the file upload 6 00:00:13,860 --> 00:00:14,850 on the server. 7 00:00:14,850 --> 00:00:17,090 That's what we'll ignore it for now. 8 00:00:17,090 --> 00:00:19,180 And therefore, I now want to 9 00:00:19,180 --> 00:00:20,300 come to an end, 10 00:00:20,300 --> 00:00:25,250 at least regarding that overview of available HTML elements 11 00:00:25,250 --> 00:00:27,530 by having a look at the text area 12 00:00:27,530 --> 00:00:29,850 and the select element, 13 00:00:29,850 --> 00:00:32,490 which are the last two important elements 14 00:00:32,490 --> 00:00:33,773 I want to introduce. 15 00:00:34,610 --> 00:00:37,093 And let's start with the text area. 16 00:00:38,050 --> 00:00:38,883 For this, 17 00:00:38,883 --> 00:00:41,270 and it is quite long form, 18 00:00:41,270 --> 00:00:45,050 which we'll restructure with HTML a bit later, 19 00:00:45,050 --> 00:00:46,950 I'll come back to the top here 20 00:00:46,950 --> 00:00:48,653 and below my username, 21 00:00:49,760 --> 00:00:52,310 before I have the email address field, 22 00:00:52,310 --> 00:00:54,140 I want to add a new input, 23 00:00:54,140 --> 00:00:57,830 which allows the user to enter some multi-line text. 24 00:00:57,830 --> 00:01:02,010 Let's say here, we expect your message. 25 00:01:02,010 --> 00:01:04,680 So the label says your message. 26 00:01:04,680 --> 00:01:08,090 And now we could use input type text here, 27 00:01:08,090 --> 00:01:13,090 but this will always render such a single line input. 28 00:01:13,380 --> 00:01:14,450 And for a message, 29 00:01:14,450 --> 00:01:17,100 we might want a multi-line input 30 00:01:17,100 --> 00:01:19,130 where the user is able to 31 00:01:19,130 --> 00:01:22,020 write longer texts in a more convenient way, 32 00:01:22,020 --> 00:01:26,253 and also structure this text with a line breaks and so on. 33 00:01:27,710 --> 00:01:28,920 And for this, we got the 34 00:01:28,920 --> 00:01:31,623 text area element. 35 00:01:32,530 --> 00:01:36,230 Now the interesting thing about this text area element 36 00:01:36,230 --> 00:01:39,260 is that it's not a white element, 37 00:01:39,260 --> 00:01:42,130 but that it has a closing tag. 38 00:01:42,130 --> 00:01:44,940 Why? Just for historic reasons, 39 00:01:44,940 --> 00:01:47,710 there really is no good explanation for this. 40 00:01:47,710 --> 00:01:50,220 It's just something you have to memorize. 41 00:01:50,220 --> 00:01:54,290 Input is a wide element with no content between opening and 42 00:01:54,290 --> 00:01:57,320 closing tags and therefore no closing tag. 43 00:01:57,320 --> 00:02:01,250 Text area also typically has no content 44 00:02:01,250 --> 00:02:03,550 between opening and closing tags, 45 00:02:03,550 --> 00:02:05,510 but it still has a closing tag. 46 00:02:05,510 --> 00:02:07,143 Yeah, it is what it is. 47 00:02:08,060 --> 00:02:10,720 Now. We can still use it as we learn it before, though, 48 00:02:10,720 --> 00:02:13,910 we can connect the label by using an ID, 49 00:02:13,910 --> 00:02:14,743 for example, 50 00:02:14,743 --> 00:02:17,310 user message. 51 00:02:17,310 --> 00:02:19,350 And adding that ID here, 52 00:02:19,350 --> 00:02:21,773 to the text area like this. 53 00:02:23,760 --> 00:02:26,680 We don't have a type attribute here though. 54 00:02:26,680 --> 00:02:31,620 A text area is always there for a long standard text, 55 00:02:31,620 --> 00:02:35,850 not for a long email address or anything like that. 56 00:02:35,850 --> 00:02:39,500 Hence, if I now saved this, we got this text area here. 57 00:02:39,500 --> 00:02:42,640 Now it's currently unstyled and therefore I'll go to 58 00:02:42,640 --> 00:02:44,590 Styles CSS, 59 00:02:44,590 --> 00:02:48,700 and I want to give it the same style as I have for my input. 60 00:02:48,700 --> 00:02:51,900 Hence, I'll use this group Combinator 61 00:02:51,900 --> 00:02:54,090 and add a comma after input 62 00:02:54,090 --> 00:02:58,090 to apply the same styling rules here, 63 00:02:58,090 --> 00:02:59,500 not only to the input, 64 00:02:59,500 --> 00:03:01,940 but also to the text area selector. 65 00:03:01,940 --> 00:03:04,460 So two text area elements. 66 00:03:04,460 --> 00:03:06,960 And I'll do the same here for the 67 00:03:06,960 --> 00:03:09,410 focus pseudo style and 68 00:03:09,410 --> 00:03:13,303 apply to same styling to both inputs and text areas. 69 00:03:15,270 --> 00:03:17,600 With that, we've got this look 70 00:03:17,600 --> 00:03:19,870 and now here we can type. 71 00:03:19,870 --> 00:03:22,370 And here I can now also add line breaks. 72 00:03:22,370 --> 00:03:23,220 And as you see, 73 00:03:23,220 --> 00:03:26,453 it's automatically scrollable and so on. 74 00:03:27,660 --> 00:03:30,198 Now we also want to give this text area a name 75 00:03:30,198 --> 00:03:33,030 like user dash message 76 00:03:33,030 --> 00:03:34,750 so that if we submit this: 77 00:03:34,750 --> 00:03:37,920 hi, there, my message. 78 00:03:37,920 --> 00:03:39,210 If I submit this, 79 00:03:39,210 --> 00:03:42,070 it's all a part of the submitted data. 80 00:03:42,070 --> 00:03:45,120 This now looks very strange here in the URL, 81 00:03:45,120 --> 00:03:48,750 but these strange characters with the percentage signs here 82 00:03:48,750 --> 00:03:51,610 are just automatically added by the browser 83 00:03:51,610 --> 00:03:54,620 to kind of end code that line break 84 00:03:54,620 --> 00:03:59,320 and special characters into a URL friendly format. 85 00:03:59,320 --> 00:04:02,300 Not something you have to worry about right now. 86 00:04:02,300 --> 00:04:03,900 The only thing that matters here 87 00:04:03,900 --> 00:04:06,040 is that indeed the message we entered 88 00:04:06,040 --> 00:04:08,030 will also be sent to the server 89 00:04:08,030 --> 00:04:10,453 just like all the other input values.