Let's look at the different jobs a button can have inside a form.
- <button> creates a clickable button. - type="submit" tells the browser that this button submits its form. - type="button" creates a normal button that does not submit the form by itself. - type="reset" resets the form controls to their initial values, so use it only when that behavior is genuinely helpful. - Put clear text inside the button so users know what will happen. - A button can be used outside a form too, especially when JavaScript will add an action. - Do not use a plain <div> as a fake button when a real <button> can do the job. - A real button provides built-in keyboard and accessibility behavior that a generic element does not provide automatically.
The key lesson is to choose the button type based on the action you want, not just on how the button should look.