EN
HTML - prevent button from submitting form
0
points
In this article, we would like to show you how to prevent the button from submitting the form in HTML.
Quick solution:
<button type="button">Click me</button>
Note:
To prevent the button from submitting the form set
buttontype to"button"since its default type is"submit".
Practical example
In this example, we set the button element type to "button" to prevent it from submitting the form.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form>
<label>
<span>input:</span>
<input type="text" name="field-1" />
</label>
<button type="button">Click me</button>
</form>
</body>
</html>
Alternative solutions
You can also prevent form from being submitted using preventDefault() method.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form onsubmit="event.preventDefault()">
<input type="text" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
or by returning false on submit event:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form onsubmit="return false;">
<input type="text" />
<input type="submit" value="Submit" />
</form>
</body>
</html>