A real button vs a div
Press Tab in the preview: focus visits the email box and both real buttons but skips the div. A tabIndex of -1 means "not in the Tab order".
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
The button's form is: signup
signup submitted by a button
signup submitted by a input
button tabIndex: 0 | div tabIndex: -1