The Form Element3:11 with Nick Pettit
The first element we’ll learn about is the form element. This special element wraps all the other elements that go inside of our form.
- <form> - The form element wraps a section of the document that contains form controls. The action attribute specifies the web address of a program that processes the information submitted via the form. The method attribute specifies the HTTP method that the browser should use to submit the form, such as POST or GET. Forms cannot be nested inside one another.
The first element we'll learn about is the form element. 0:00 This special element wraps all the other elements that go inside of our form. 0:03 I'm going to type out a form element, and then I'll explain how it works. 0:08 So inside of our work space here, we want to jump into the body. 0:13 And inside of the body, we'll type form. 0:18 And because of work spaces code completion, 0:23 it should automatically type the closing form tag. 0:26 So let's save this. 0:30 And let's open up our preview area, which you can 0:32 get to by clicking the little Preview icon right here. 0:36 And, right now it's blank, but I'm going to refresh the page. 0:40 And you should see a very light gray area right here. 0:45 And that's because of the styling that's being applied to form elements. 0:49 So let's go back, and one thing I want to point out before 0:54 we move any further is that you cannot have forms nested inside other forms. 0:58 So [SOUND] you cannot type something like that 1:04 because it's invalid HTML, and it won't work. 1:09 So let's remove that. 1:13 Our form won't actually submit data anywhere, but with a server 1:15 side language like PHP, Ruby, or Python, we could process the data. 1:20 Part of processing that data involves two important 1:25 attributes that are attached to the form element. 1:29 So I'm going to type those out and then explain them. 1:32 Let's take a look. 1:35 First is the action attribute, and inside of this I'm going to type a URL. 1:37 In this case, I'm typing a relative URL, and 1:47 it's going to be index.html which is actually this file. 1:50 But, in other cases, we might have this submit elsewhere to a server side script. 1:54 Then I'm going to type the method attribute. 2:02 And in this case, I'm going to give it the value post. 2:05 As I mentioned previously, the action attribute is the web address 2:11 of a program that processes the information submitted via the form. 2:15 The method attribute is the HTTP method that the browser uses to submit the form. 2:20 Possible values are POST or GET. 2:27 POST corresponds to the HTTP POST method. 2:30 That means that data from the body of the form is sent, or posted, to the server. 2:34 GET corresponds to the HTTP GET method. 2:41 In this case, data is sent inside of the 2:44 URL, and parameters are separated with a question mark. 2:47 Most of the time, you'll use POST. 2:52 If you're working on a team and you're not the person 2:54 writing the server-side code, be sure to talk to the other developers. 2:57 It's important to coordinate this piece of front-end code with the 3:02 back-end so that the client and server can talk to one another. 3:06
You need to sign up for Treehouse in order to download course files.Sign up