Study/form.html at main · vikneshbabu/Study · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
  <!DOCTYPE html>
<html>
    <style>
        #grad1 {
  height: 200px;
  background-color:
#81b9f0
; /* For browsers that do not support gradients */
  background-image: linear-gradient(to top,
#81b9f0
 , #9de9f5);
 width: 100%;
 height: 100%;
}
    </style>
<head>
    <title>Password Management</title>
</head>
<body id="grad1">
    <h1>Password Management</h1>

    <form id="passwordForm">
        <label for="website">Website:</label>
        <input type="text" id="website" name="website" required><br><br>

        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><br>

        <input type="submit" value="Save Password">
    </form>

    <h2>Saved Passwords</h2>
    <ul id="passwordList">
        <!-- Saved passwords will be displayed here -->
    </ul>

    <script>
        // JavaScript code for handling form submission and displaying saved passwords
        const passwordForm = document.getElementById("passwordForm");
        const passwordList = document.getElementById("passwordList");

        passwordForm.addEventListener("submit", function (e) {
            e.preventDefault();

            const website = document.getElementById("website").value;
            const username = document.getElementById("username").value;
            const password = document.getElementById("password").value;

            // Create a new list item to display the saved password
            const listItem = document.createElement("li");
            listItem.innerHTML = `<strong>Website:</strong> ${website}<br><strong>Username:</strong> ${username}<br><strong>Password:</strong> ${password}`;
            passwordList.appendChild(listItem);

            // Clear the form
            passwordForm.reset();
        });
    </script>
</body>
</html>