Sure! Here's an example of a "Forgot Password" feature implemented using HTML, CSS, and JavaScript:

HTML:
html
<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <button type="button" id="resetButton">Reset Password</button>
    <div id="resetMessage"></div>
</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;
}

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

// Get the reset button and reset message element
const resetButton = document.getElementById('resetButton');
const resetMessage = document.getElementById('resetMessage');

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

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

    // Perform password reset request (simulated here)
    simulatePasswordReset(email);
});

// Function to simulate password reset request
function simulatePasswordReset(email) {
    // Simulate async request
    setTimeout(function() {
        // Check if email is valid
        if (validateEmail(email)) {
            // Display success message
            resetMessage.innerHTML = 'Password reset instructions sent to your email.';
            resetMessage.style.color = 'green';
        } else {
            // Display error message
            resetMessage.innerHTML = 'Invalid email address.';
            resetMessage.style.color = 'red';
        }
    }, 1500);
}

// Function to validate email address
function validateEmail(email) {
    // Regular expression pattern for email validation
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    // Check if the email matches the pattern
    return emailPattern.test(email);
}

In this example

The HTML code represents a form with an email input field and a "Reset Password" button. There is also a `div` element to display the reset message. The CSS code styles the form, input field, and button.

The JavaScript code adds an event listener to the reset button's click event. When the reset button is clicked, it prevents the default button behavior, retrieves the input email value, and calls the `simulatePasswordReset` function. In this example, the `simulatePasswordReset` function simulates an asynchronous password reset request. It checks if the email address is valid using the `validateEmail` function, and then displays a success or error message in the `resetMessage` element accordingly.

Please note that in this example, the password reset functionality is simulated and doesn't actually send any emails. You can modify the `simulatePasswordReset` function to include your own implementation for sending reset instructions to the user's email.

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