46 lines
1.3 KiB
HTML
46 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Advanced HTML & CSS - Simple Form</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="wrapper">
|
|
|
|
<form class="form" id="userForm">
|
|
<h3>User Form</h3>
|
|
|
|
<input type="text" id="name" name="name" placeholder="Name" required>
|
|
<input type="email" id="email" name="email" placeholder="Email" required>
|
|
<input type="text" id="city" name="city" placeholder="City">
|
|
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
|
|
<div class="display">
|
|
<h3>Entered Details</h3>
|
|
<p>Name: <span id="displayName">______</span></p>
|
|
<p>Email: <span id="displayEmail">______</span></p>
|
|
<p>City: <span id="displayCity">______</span></p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('userForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
var name = document.getElementById('name').value.trim();
|
|
var email = document.getElementById('email').value.trim();
|
|
var city = document.getElementById('city').value.trim();
|
|
|
|
document.getElementById('displayName').textContent = name || '______';
|
|
document.getElementById('displayEmail').textContent = email || '______';
|
|
document.getElementById('displayCity').textContent = city || '______';
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|