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
A form is not complete without a submit button. Once a user has finished filling out a form, they should be able to click a button that sends their data to the web server.
HTML Elements
- <button> - Just as the name implies, the button element will render a clickable button. The type attribute specifies whether the button should submit the form data, reset the form, or have no default behavior for use with JavaScript.
Resources
-
0:00
A form is not complete without a Submit button.
-
0:03
Once a user has finished filling out a form,
-
0:06
they should be able to click a button that
-
0:08
sends their data to the web server via the
-
0:11
action and method attributes we specified in the form element.
-
0:15
As I mentioned previously, it would take more server
-
0:18
side code programming to make this form actually submit anywhere.
-
0:22
But it's still important to learn about the HTML elements that make up a form.
-
0:28
One of those important form elements is the Button element.
-
0:32
I'm going to type one out and then will explain how it works.
-
0:36
Just below my text area here, I'm going to type a Button element.
-
0:42
And I'm going to make it of type Submit.
-
0:48
And then it will automatically close my Button element if I'm using workspaces.
-
0:54
And inside of it, I can type Sign Up.
-
0:58
So let's save that out, switch over to the browser, and refresh the page.
-
1:02
And as you can see, we have a nicely styled
-
1:05
button that we can click, and it will submit our form.
-
1:10
Of course in this particular case, we're not
-
1:11
actually submitting anywhere so it won't quite work.
-
1:15
But that's generally what a button will look like if it's styled.
-
1:20
Similar to the text area element, buttons are not self closing.
-
1:24
They require an opening and a closing tag.
-
1:28
The type attribute in this particular case is Submit.
-
1:33
But there are two other types called Reset and Button.
-
1:39
The Reset type will automatically clear all form data when it's clicked.
-
1:43
The Button type has no default behavior, and it's
-
1:46
mostly intended to be used in combination with JavaScript.
-
1:50
The type we've used here is Submit.
-
1:53
The default behavior of the Submit type is to, as the name
-
1:57
implies, submit the form and send all the data over to the server.
-
2:01
That`s it for buttons.
-
2:03
Next up, we`ll learn how to organize our form.
You need to sign up for Treehouse in order to download course files.
Sign up