Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Learn how to use the form element to collect information from your website or application. Use *div* to separate content into and *input* to collect different types of data.
Vocabulary:
Action: The web address of a program that processes the information submitted via the form.
Method: The HTTP method that the browser uses to submit the form.
Post: Corresponds to the HTTP POST method. That means that data from the body of the form is sent or POSTed to the server.
Get: Corresponds to the HTTP GET method. In this case, data is sent inside of the URL and parameters are separated with a question mark.
Mozilla Developer Network or take the HTML Forms course on Treehouse!
-
0:00
Forms are used all over the web.
-
0:01
Whether you're signing up for a Treehouse account, filling in a personal profile, or
-
0:06
ordering something from your favorite store,
-
0:08
you're constantly filling in forms online.
-
0:11
Let's learn more about forms so you can use them in your next website.
-
0:15
A [SOUND] form could look like empty boxes, [SOUND] choice boxes,
-
0:19
radio [SOUND] buttons, drop-down [SOUND] menus and text [SOUND] areas.
-
0:24
No matter what kind of form you're making,
-
0:26
you're going to want to wrap your questions in form tags.
-
0:30
Looking at a preview of the code in the browser,
-
0:33
you can see that we have these blank text areas to fill in.
-
0:38
Switching over to our HTML document,
-
0:40
you can see it's a form element we're using to make our Web page.
-
0:45
The form starts up here at the top of the body and
-
0:49
ends down here at the end of the inputs.
-
0:53
Inside our opening form tag is the action attribute.
-
0:57
This is used to specify the location that the form data should be sent to.
-
1:03
The action attribute tells the web browser where to send the form information so
-
1:08
that the web server can perform some action such as saving data.
-
1:13
For this, you would have to know some server-side programming like PHP,
-
1:18
Ruby, or Python.
-
1:20
And in this course, we don't need to send or receive data for a program to work.
-
1:25
So that's why we're gonna leave it blank.
-
1:27
Method goes with the action and is used to tell the web browser whether the form is
-
1:32
sending data to put into a database or get information from a server.
-
1:38
You use post when ordering a product and
-
1:42
get when searching a database for information.
-
1:46
Well, post and get are more complicated than this.
-
1:49
You can think about post as posting data to a database, and
-
1:53
get as fetching existing data from a web server.
-
1:57
If you're interested in learning more about post and
-
2:00
get, I'll put some information about this in the teacher's notes.
-
2:04
The next element is called a div.
-
2:06
Div is short for document divisions, and has historically been the most
-
2:11
commonly used element for defining the structure of an HTML document.
-
2:16
Divs are a great way to group a number of other elements together.
-
2:20
By creating div elements in your HTML and giving them ids or classes,
-
2:26
it will enable you to target these specific elements using CSS.
-
2:33
Down here, we call all of the divs for each column in our game choice_bucket.
-
2:39
This will make sure when we're writing our CSS, we can identify these and
-
2:43
style them the same way.
-
2:47
The main form control element that we use in our web form is the input element.
-
2:54
This element is a jack of all trades kind of element because it's used to
-
2:58
collect all sorts of data from your users.
-
3:02
You can specify what sort of data you want to collect using the type attribute.
-
3:08
By default, all input elements have the type text.
-
3:14
However, it's always good to be explicit when writing code and
-
3:18
it's good to specify the type.
-
3:20
Now, we didn't do that here, but
-
3:22
it would be good practice to go through each input and add a type attribute.
-
3:28
It would also be interesting to look at what each of
-
3:31
these different types look like in the browser.
-
3:35
That was a lot of new information about HTML, but not nearly all of it.
-
3:40
For more examples of form elements,
-
3:42
I've linked the Mozilla Developer Network page on forms in the teacher's notes.
You need to sign up for Treehouse in order to download course files.
Sign up