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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Button Element

2:06 with Nick Pettit

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.

<button> element

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

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up