input type="button"
An <input type="button"> creates a general-purpose button. It does not submit its form; JavaScript or another handler must provide the action.
What you will learn
- Why
input type="button"does not submit a form - How it differs from
submitand thebuttonelement - How to preserve a clear label and keyboard operation
Basic example
<input type="button" value="Show details" id="show-details">
<script>
document.querySelector('#show-details').addEventListener('click', () => {
document.querySelector('#details').hidden = false;
});
</script>The value attribute supplies the visible label. Give the control a useful label that describes the action rather than relying on a vague word such as “Click.”
Choose the right control
submit: send the form's data to its action.button: a flexible button that can contain richer text or markup.input type="button": a simple button whose action is supplied separately.
Do not use a non-button element with a click handler when a native button can do the job. Native controls provide expected keyboard and focus behavior.