1 00:00:00,180 --> 00:00:03,270 The first element we'll learn about is the form element. 2 00:00:03,270 --> 00:00:08,600 This special element wraps all the other elements that go inside of our form. 3 00:00:08,600 --> 00:00:13,160 I'm going to type out a form element, and then I'll explain how it works. 4 00:00:13,160 --> 00:00:18,170 So inside of our work space here, we want to jump into the body. 5 00:00:18,170 --> 00:00:23,820 And inside of the body, we'll type form. 6 00:00:23,820 --> 00:00:26,430 And because of work spaces code completion, 7 00:00:26,430 --> 00:00:29,730 it should automatically type the closing form tag. 8 00:00:30,930 --> 00:00:32,830 So let's save this. 9 00:00:32,830 --> 00:00:36,070 And let's open up our preview area, which you can 10 00:00:36,070 --> 00:00:39,250 get to by clicking the little Preview icon right here. 11 00:00:40,670 --> 00:00:45,340 And, right now it's blank, but I'm going to refresh the page. 12 00:00:45,340 --> 00:00:49,690 And you should see a very light gray area right here. 13 00:00:49,690 --> 00:00:54,650 And that's because of the styling that's being applied to form elements. 14 00:00:54,650 --> 00:00:58,650 So let's go back, and one thing I want to point out before 15 00:00:58,650 --> 00:01:04,990 we move any further is that you cannot have forms nested inside other forms. 16 00:01:04,990 --> 00:01:09,085 So [SOUND] you cannot type something like that 17 00:01:09,085 --> 00:01:13,741 because it's invalid HTML, and it won't work. 18 00:01:13,741 --> 00:01:15,543 So let's remove that. 19 00:01:15,543 --> 00:01:20,096 Our form won't actually submit data anywhere, but with a server 20 00:01:20,096 --> 00:01:25,660 side language like PHP, Ruby, or Python, we could process the data. 21 00:01:25,660 --> 00:01:29,060 Part of processing that data involves two important 22 00:01:29,060 --> 00:01:32,430 attributes that are attached to the form element. 23 00:01:32,430 --> 00:01:35,570 So I'm going to type those out and then explain them. 24 00:01:35,570 --> 00:01:36,130 Let's take a look. 25 00:01:37,590 --> 00:01:46,090 First is the action attribute, and inside of this I'm going to type a URL. 26 00:01:47,440 --> 00:01:50,060 In this case, I'm typing a relative URL, and 27 00:01:50,060 --> 00:01:54,870 it's going to be index.html which is actually this file. 28 00:01:54,870 --> 00:01:59,670 But, in other cases, we might have this submit elsewhere to a server side script. 29 00:02:02,420 --> 00:02:05,150 Then I'm going to type the method attribute. 30 00:02:05,150 --> 00:02:10,250 And in this case, I'm going to give it the value post. 31 00:02:11,490 --> 00:02:15,750 As I mentioned previously, the action attribute is the web address 32 00:02:15,750 --> 00:02:20,710 of a program that processes the information submitted via the form. 33 00:02:20,710 --> 00:02:27,020 The method attribute is the HTTP method that the browser uses to submit the form. 34 00:02:27,020 --> 00:02:30,560 Possible values are POST or GET. 35 00:02:30,560 --> 00:02:34,060 POST corresponds to the HTTP POST method. 36 00:02:34,060 --> 00:02:41,090 That means that data from the body of the form is sent, or posted, to the server. 37 00:02:41,090 --> 00:02:44,720 GET corresponds to the HTTP GET method. 38 00:02:44,720 --> 00:02:47,240 In this case, data is sent inside of the 39 00:02:47,240 --> 00:02:50,990 URL, and parameters are separated with a question mark. 40 00:02:52,300 --> 00:02:54,860 Most of the time, you'll use POST. 41 00:02:54,860 --> 00:02:57,880 If you're working on a team and you're not the person 42 00:02:57,880 --> 00:03:02,140 writing the server-side code, be sure to talk to the other developers. 43 00:03:02,140 --> 00:03:06,215 It's important to coordinate this piece of front-end code with the 44 00:03:06,215 --> 00:03:10,200 back-end so that the client and server can talk to one another.