Check out a free preview of the full HTML Forms course
The "Submit Button" Lesson is part of the full, HTML Forms course featured in this preview video. Here's what you'd learn in this lesson:
Jen codes a submit button that will connect the backend to the information that was given to the form.
Transcript from the "Submit Button" Lesson
[00:00:00]
>> Jen Kramer: Anybody wanna tell me what we're missing from this form now? Other than like some kinda styling, cuz it looks awful? Yeah?
>> Speaker 2: Submit?
>> Jen Kramer: How about a Submit button?
>> Speaker 2: Or Reset.
>> Jen Kramer: That might be a good thing to add is a Submit button. The Reset buttons have historically been put in place.
[00:00:18]
But has anybody ever filled out a form before, and then clicked the Reset button by mistake?
>> [LAUGH]
>> Jen Kramer: By mistake, and then eased everything you typed in? I don't think they're really all that helpful. So I think you actually find people not doing the Reset buttons these days.
[00:00:31]
But a Submit button would be a great thing to add to this form, because it's not gonna work without it, right? So we need to go ahead and put that in. If you want it inside the fieldset, you're gonna put it here, in between the /label tag and the /fieldset around line 58.
[00:00:49]
If you want it outside of the fieldset, then you're gonna put in between line 59 and line 60. And it just depends on where you would like that button to be. I'm gonna put mine here outside of the fieldset. So it sort of will look like you have a section of the form, you completed another section of the form, and then the button down there by itself.
[00:01:10]
And so I've kind of been previewing what that tag might be. What might this tag be?
>> Speaker 2: Submit?
>> Jen Kramer: How about button?
>> Jen Kramer: So button type="submit", okay? And then we can put in our text, Submit.
>> Jen Kramer: That's the text that we wanna show on the button.
>> Jen Kramer: And then close your button tag.
[00:01:44]
No ID, because there's no label. No name, because the button has nothing to with any values that we're trying to process on the server. This is just sending the information over. And then therefore there's also no value for the button, right? Does that does that all make sense as to why this one's a little bit different?
[00:02:05]
>> Speaker 2: Yes.
>> Jen Kramer: Okay, all right, so the button type is submit. Okay, but the we put in the word Submit here. We could also say Order your abduction experience, that's cool too. You can say whatever you want on that particular button, right? Whatever you type in there will be the text that's on the button.
[00:02:27]
Go ahead and save it, and when you refresh the page, you should see a button. There it is. And when you click it, nothing should happen. Did it work, did absolutely nothing happen? Fabulous.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops