1 00:00:01,260 --> 00:00:04,490 The last input field we want to create is the text area 2 00:00:08,530 --> 00:00:16,180 the text area is similar to the input field but it allows much more text to be input and across multiple 3 00:00:16,180 --> 00:00:19,940 lines so let's take a look at an example 4 00:00:26,960 --> 00:00:34,190 you'll notice if I copy and paste this over and over again the text area allows for school bars and 5 00:00:34,190 --> 00:00:38,710 we can also expanded and contracted. 6 00:00:38,730 --> 00:00:45,630 This makes it much more convenient for the user when it comes to inputting large amounts of text 7 00:00:52,670 --> 00:00:59,870 so before we create a text field we'll start with our label which is additional comments. 8 00:01:01,800 --> 00:01:03,180 And in the call them next to it 9 00:01:06,320 --> 00:01:08,990 we'll start we'll create we'll input the text area 10 00:01:13,240 --> 00:01:15,550 so to do that we'll create a text area tag 11 00:01:21,730 --> 00:01:24,070 and we'll explain what the attributes mean in just a moment 12 00:01:39,900 --> 00:01:44,220 the open text area tag does require a closing text area tag 13 00:01:48,460 --> 00:01:49,420 so as you can see 14 00:01:52,560 --> 00:01:57,580 it includes the name attribute just like all the other fields we created. 15 00:01:57,840 --> 00:02:05,730 It also allows you to specify the width of the text area which is represented by calls and the height 16 00:02:05,730 --> 00:02:10,100 specified by the number of rows. 17 00:02:10,200 --> 00:02:16,550 In this case our text area will be five rows in height beyond five rows of text. 18 00:02:16,760 --> 00:02:19,440 The scroll bars will be enabled automatically 19 00:02:22,310 --> 00:02:31,540 so let's save our file and take a look. 20 00:02:31,600 --> 00:02:32,910 So this is our text area here 21 00:02:37,510 --> 00:02:39,510 and you can see that the scroll bars do activate 22 00:02:50,570 --> 00:02:57,890 the last part of this form that we want to create is the submit and reset button the submit button will 23 00:02:57,950 --> 00:03:06,680 submit the form data to our send a dot BHP script or whichever file you've specified in the action attribute 24 00:03:06,680 --> 00:03:12,880 of your form the reset button will empty the data input it into the fields 25 00:03:20,230 --> 00:03:22,240 and so that's how that works. 26 00:03:22,240 --> 00:03:28,850 So let's go ahead and create those two buttons and we want to insert this in the second column on the 27 00:03:28,850 --> 00:03:31,160 ninth row our last row 28 00:03:42,100 --> 00:03:43,600 so the button is an input. 29 00:03:43,600 --> 00:03:47,770 We have to specify that the type which is a submit button 30 00:03:53,630 --> 00:03:54,670 will give it a name. 31 00:03:54,690 --> 00:03:55,640 We'll just call it submit 32 00:03:58,510 --> 00:03:59,200 and devalue 33 00:04:06,970 --> 00:04:11,080 and then we just closed the input and we'll do the same for the reset button 34 00:04:40,190 --> 00:04:48,680 which just capitalize the first letter so let's go ahead and save the file and take a look at the entire 35 00:04:48,680 --> 00:04:55,980 form. 36 00:04:56,880 --> 00:04:59,400 So that's the entire form we'll know. 37 00:04:59,640 --> 00:05:07,320 You see we have the two text inputs our select menus are working and we're checkboxes 38 00:05:11,020 --> 00:05:19,700 and the radio buttons text area and let's just test our reset button. 39 00:05:19,820 --> 00:05:21,020 So that works. 40 00:05:21,130 --> 00:05:27,860 Now the submit button will not work because we have not created this send it dot BHP file it that's 41 00:05:27,920 --> 00:05:33,950 that's the file that all this data will be transmitted to and then that BHP file instructs our web server 42 00:05:33,980 --> 00:05:35,520 on what to do with the data. 43 00:05:35,780 --> 00:05:42,320 Is it going to be sent to a database to an email address or some other form of processing. 44 00:05:42,380 --> 00:05:45,620 We'll learn how to do that in the p p part of this course.