Submit Actions & Custom Buttons
What are Submit Buttons?
Think of a postbox. After you drop in your letter, you have to push the submit button on the panel to confirm it should be sent off to the sorting facility.In HTML, we use the <button> element to trigger form events:
type="submit": Sends the form data directly to the action endpoint. This is the default behavior.type="reset": Resets all inputs in the form back to their default empty states.type="button": Creates a clickable button that has no default action, typically targeted with custom JavaScript.Why does it matter?
Buttons are the trigger points of your web applications. Without submit buttons, forms cannot be sent, meaning users wouldn't be able to log in or register.How to write it
<form>
<button type="submit">Submit Form</button>
</form>
Common Mistakes
type attribute: If you leave the type attribute off a button inside a form, it defaults to type="submit". If you only wanted to trigger a local script, it will reload your page instead! Always specify type="button" for script triggers.Quick Reference
<button type="submit"> — Submits form data.<button type="button"> — Generic button, does not submit form data.Your Task
Create a `<button>` inside the form with `type="submit"` containing the text 'Submit Form'.
index.html
Type code above to start the lesson.
Live Preview