Question

I have an HTML form with two submit inputs. One of them resets the application form, and the other one proceeds to the next levels:

<form method="POST" action="#">
<input type="text" name="username" value="" required aria-required="true">
<input type="submit" name="info" value="Next Step">
<input type="submit" name="info" value="Reset">
</form>

Now i have used the “required” tag that doesn’t allow users proceed unless they have filled in the username filed.

Is there any way I can exclude the reset button because the reset button should’t need any verification.

One solution I can think of is to put the reset button outside of the form, but I would have some problems with aligning the buttons, because I want both buttons to be in one row and if one of them is inside a DIV tag inside of a form, and with the other one outside of the form, they will never get aligned in one row (I have tried a lot, it doesn’t work!).

I wonder if there are any other ways or workarounds to handle this…

Answer 1

Use the formnovalidate attribute:

<input type="submit" name="info" value="Reset" formnovalidate>

Browser support is limited, but probably roughly as limited as for the required attribute.

Note: The value (button text) “Reset” may be misleading, as it suggests that the button is a so-called reset button, which permanently destroys any data entered in the form but does not cause any server interaction. Such buttons (which should almost never be used, but are commonly used) are typically labeled with “Reset”.