NOTE This file was generated by Descript 1 00:00:00,500 --> 00:00:01,790 Hi guys and welcome back. 2 00:00:01,790 --> 00:00:03,829 In this video, let's take a look at textarea. 3 00:00:03,829 --> 00:00:07,439 Textareas behave in pretty much the same way as input fields as 4 00:00:07,439 --> 00:00:09,059 we've seen in the last video. 5 00:00:09,180 --> 00:00:11,673 So there's not much that's going to be new here. 6 00:00:11,550 --> 00:00:12,300 Let's get started. 7 00:00:13,173 --> 00:00:15,303 Most form elements behave similarly. 8 00:00:15,333 --> 00:00:19,323 Give them a name and that's what the data is going to be called when it gets sent. 9 00:00:19,653 --> 00:00:22,953 Give them an ID and that's what you're gonna use to link to a label. 10 00:00:23,163 --> 00:00:27,303 So for our microblog instead of sample and an input of type text. 11 00:00:27,483 --> 00:00:30,930 We're going to use a label with a better name and a text area. 12 00:00:31,296 --> 00:00:34,866 Remember that the label in our design was hidden, but it's still a good 13 00:00:34,866 --> 00:00:40,326 idea, even if it's not displayed to users to have a label there for screen 14 00:00:40,326 --> 00:00:44,016 readers to know what you're talking about when you refer to a field. 15 00:00:44,186 --> 00:00:48,086 So let's have a label that is going to be for entry and instead of 16 00:00:48,086 --> 00:00:53,656 all of this, we're going to have a text area with a name of content. 17 00:00:53,886 --> 00:00:55,816 An ID of entry. 18 00:00:56,186 --> 00:00:59,096 And textareas are actually not void elements, so we're 19 00:00:59,096 --> 00:01:01,196 going to close it like that. 20 00:01:01,226 --> 00:01:04,796 That's because we can put text inside it that will be shown in the text area. 21 00:01:05,276 --> 00:01:06,566 Instead of sample here. 22 00:01:06,566 --> 00:01:09,986 We're going to add entry contents just like that . So 23 00:01:09,986 --> 00:01:11,096 now if we refreshed the page. 24 00:01:11,096 --> 00:01:13,976 You can see that we've got this text area there that allows us to 25 00:01:13,976 --> 00:01:16,166 write text into multiple lines. 26 00:01:16,666 --> 00:01:21,406 Instead of submit, we're going to call this add entry as per our designs. 27 00:01:21,796 --> 00:01:24,616 Remember that we're going to restyle all of this later on. 28 00:01:24,736 --> 00:01:27,646 So don't worry that it doesn't look quite right just yet. 29 00:01:28,146 --> 00:01:33,246 It's usually a good idea to group input together with their labels so that styling 30 00:01:33,246 --> 00:01:37,206 them and referring to the label plus the input at a group is a little bit easier. 31 00:01:37,323 --> 00:01:41,163 Our form has a single label and input so it's maybe not that important. 32 00:01:41,433 --> 00:01:44,433 But as forms grow, it can become more and more important so we're 33 00:01:44,433 --> 00:01:48,853 going to add a paragraph element here with a class="form__input". 34 00:01:49,758 --> 00:01:53,298 And inside it, we're going to put our label and text area. 35 00:01:53,478 --> 00:01:54,378 Just like that. 36 00:01:54,878 --> 00:01:56,768 Note that here , I'm using BEM. 37 00:01:56,798 --> 00:02:01,808 So I'm going to give my form a class of form as usual and the label we're 38 00:02:01,808 --> 00:02:06,298 going to give it a class="form__label", and our textarea is going to 39 00:02:06,298 --> 00:02:08,738 have a class="form__textarea". 40 00:02:09,298 --> 00:02:14,398 The submit button is also going to have a class="form__submit" just like that. 41 00:02:15,398 --> 00:02:18,938 Finally, I'm also going to change the form method to post because 42 00:02:18,938 --> 00:02:22,808 we've got a text area and that can be really long pieces of text. 43 00:02:22,988 --> 00:02:24,578 We don't want to put that in the URL. 44 00:02:24,788 --> 00:02:29,358 URLs can have a size limit, so we don't want to get even close to that and also 45 00:02:29,358 --> 00:02:33,078 they look really terrible if you have a very long URL with all your content in it. 46 00:02:33,298 --> 00:02:34,828 That's why we're using POST instead. 47 00:02:35,008 --> 00:02:37,858 But other than that, they both work in pretty much the same way. 48 00:02:38,358 --> 00:02:42,528 If you find it weird to surround label and textarea with a paragraph. 49 00:02:43,008 --> 00:02:43,458 Don't worry. 50 00:02:43,458 --> 00:02:45,138 That is what they're meant to do! 51 00:02:45,198 --> 00:02:49,668 As per the MDN documentation, HTML paragraphs can be any structural grouping 52 00:02:49,668 --> 00:02:54,398 of related content, such as images or form fields as well as of course text. 53 00:02:54,423 --> 00:02:56,408 So this is what they were designed to do. 54 00:02:57,408 --> 00:02:59,628 All right, as weird as it looks on the page. 55 00:02:59,658 --> 00:03:01,458 We have our form completed. 56 00:03:01,458 --> 00:03:04,278 This is everything we need for our microblog. 57 00:03:04,308 --> 00:03:06,078 The rest is all going to be CSS. 58 00:03:06,138 --> 00:03:07,878 So thank you guys for joining me in this video. 59 00:03:07,998 --> 00:03:08,868 I hope you've enjoyed it. 60 00:03:09,018 --> 00:03:10,308 And I'll see you in the next one.