Problem Statement
What does a reset button do?
Explanation
A reset button clears all form fields and returns them to their default values. When clicked, it resets every input, select, and textarea in the form to its initial state. If an input had a default value attribute, it returns to that value. If it was empty initially, it becomes empty again. Reset buttons do not submit the form or communicate with the server. They only affect the current page. Reset buttons are created using input type equals reset or button type equals reset. However, reset buttons are rarely used in modern web development because they can frustrate users who accidentally click them and lose all their entered data. It is generally better to let users manually clear fields or provide an undo feature instead of a reset button.
Code Solution
SolutionRead Only
<!-- Reset button using input --> <form> <input type="text" name="firstname" value="John"> <input type="text" name="lastname" value="Doe"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> <!-- Clicking Reset returns firstname to "John" and lastname to "Doe" --> <!-- Reset button using button element --> <form> <input type="email" name="email" placeholder="Email"> <textarea name="message"></textarea> <button type="submit">Send</button> <button type="reset">Clear Form</button> </form> <!-- Modern alternative: No reset button --> <form> <input type="text" name="name" placeholder="Name"> <input type="email" name="email" placeholder="Email"> <button type="submit">Submit</button> <!-- No reset button - users can manually clear if needed --> </form>
