The Button Element

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