Certainly! Here's an example of a form with submit and reset buttons, along with the functionality of each button using HTML, CSS, and JavaScript:

HTML:
html
<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit" id="submitButton">Submit</button>
    <button type="reset" id="resetButton">Reset</button>
</form>

CSS:
css
form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}

label {
    font-weight: bold;
}

input {
    padding: 8px;
    margin: 5px 0;
    border-radius: 4px;
    border: 1px solid #ccc;
}

button {
    padding: 8px 16px;
    margin-top: 10px;
    border-radius: 4px;
    border: none;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}

button[type="reset"] {
    background-color: #f44336;
}

JavaScript:
javascript
// Get the form element
const form = document.getElementById('myForm');

// Add event listener to the form submit event
form.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission

    // Get the input values
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;

    // Perform further actions with the input values
    console.log('Name:', name);
    console.log('Email:', email);

    // Reset the form
    form.reset();
});

// Add event listener to the reset button
const resetButton = document.getElementById('resetButton');
resetButton.addEventListener('click', function(event) {
    event.preventDefault(); // Prevent default button behavior

    // Reset the form
    form.reset();
});

In this example, the HTML code defines a form with two input fields for name and email, along with a submit button and a reset button. The CSS code styles the form, input fields, and buttons, giving them some padding, border, and background colors. The JavaScript code adds event listeners to the form's submit event and the reset button's click event. When the form is submitted, it prevents the default form submission behavior, retrieves the input values, performs any further actions you may require (in this case, printing the input values to the console), and resets the form. Similarly, when the reset button is clicked, it prevents the default button behavior and resets the form.

Output:

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc