QUESTION 1
unknown
html
a month ago
1.6 kB
9
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form and Table</title>
</head>
<body>
<h1>Form and Table</h1>
<form id="dataForm">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" required><br><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
</form>
<h2>Submitted Data</h2>
<table id="dataTable" border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
document.getElementById('dataForm').addEventListener('submit', function(event) {
event.preventDefault();
const name = document.getElementById('name').value;
const age = document.getElementById('age').value;
const email = document.getElementById('email').value;
const table = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
const newRow = table.insertRow();
newRow.insertCell(0).textContent = name;
newRow.insertCell(1).textContent = age;
newRow.insertCell(2).textContent = email;
document.getElementById('dataForm').reset();
});
</script>
</body>
</html>Leave a Comment