Submit, reset and plain buttons
The Save button has no type, yet it reports submit: that is the default inside a form. Reset brought back the value attribute, Tea.
A <button> inside a form submits it unless you say otherwise: type="submit" sends, type="reset" restores the starting values and type="button" does nothing until JavaScript gives it a job. A real button comes with keyboard, focus and screen-reader support that a clickable <div> lacks.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a form with a text input title, a Publish submit button, a Save draft submit button that skips validation, and a Cancel button that doesn't submit.
Write a button that sits outside a search form but submits it.
Explain it without notes
What are the three button types, and which is the default inside a form?
Why should you use <button> instead of a clickable <div>?
How can one form have both "Publish" and "Save draft" buttons, and how does the server know which was pressed?
What does the form attribute on a button do?
Preview
Console
Nothing logged yet.Expected console output
Types: submit reset button
submitted by: save
submitted by: draft
after reset: Tea
Preview clicked: no submit