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