HTML Forms – Part 5 – Reset button control

This is part 5 of HTML Form series. You can read previous parts here. In this part you will learn about reset button control in HTML form.

The reset input type creates a button that resets the form to the default values.

If the value attribute is present, the value of that attribute will be the text on the button. If not, the default wording on the reset button is “Reset”.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input type reset button</title>
</head>

<body>
    <form>
        <label>User id: </label>
        <input type="text" name="user-id" value="user">
        <label>Password: </label>
        <input type="password" name="pass" value="pass"><br><br>
        <input type="submit" value="login">
        <input type="reset" value="Reset">
    </form>
</body>

</html>
input type reset button example

Try to change the input values of user id and password, then when you click on reset, it will reset input fields with default values.