Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

HTML Forms

Well done!

You have completed HTML Forms!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

The Form Element

3: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.

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