-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform-table.html
112 lines (101 loc) · 2.77 KB
/
form-table.html
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<title>User Information Form</title>
<style>
/* Style the form */
form {
width: 50%;
margin: 0 auto;
}
label,
input {
display: block;
margin-bottom: 10px;
width: 100%;
}
input[type="submit"] {
margin-top: 20px;
padding: 10px;
background-color: #4caf50;
color: #fff;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
/* Style the table */
table {
width: 50%;
margin: 20px auto;
border-collapse: collapse;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4caf50;
color: #fff;
}
/* Hide the table initially */
#user-info {
display: none;
}
</style>
</head>
<body>
<form id="user-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="address">Address:</label>
<input type="text" id="address" name="address" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required />
<input type="submit" value="Submit" />
</form>
<!-- Table to display user info -->
<table id="user-info">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
const form = document.querySelector("form");
const table = document.querySelector("#user-info tbody");
form.addEventListener("submit", function (event) {
event.preventDefault();
// Get form values
const name = document.querySelector("#name").value;
const address = document.querySelector("#address").value;
const email = document.querySelector("#email").value;
const phone = document.querySelector("#phone").value;
// Append row to table
const row = table.insertRow();
const nameCell = row.insertCell(0);
const addressCell = row.insertCell(1);
const emailCell = row.insertCell(2);
const phoneCell = row.insertCell(3);
nameCell.innerHTML = name;
addressCell.innerHTML = address;
emailCell.innerHTML = email;
phoneCell.innerHTML = phone;
// Clear form fields
form.reset();
// Show the table
document.querySelector("#user-info").style.display = "table";
});
</script>
</body>
</html>