Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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 <form> element
- The
form-element wraps a section of the document that contains form controls. Theactionattribute specifies the web address of a program that processes the information submitted via the form. Themethodattribute specifies the HTTP method that the browser should use to submit the form, such as POST or GET. A form cannot be nested inside one another form.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up