INTERNET CONCEPTS AND WEB DESIGN MCSL 016
Design a form for on-line subscription of newspaper having the input fields for users details and e-mail ID. There should be validation checks for null fields and e-mail ID. By clicking the submit button, users will get weekly news at their e-mail ID.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newspaper Subscription Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 20px auto;
text-align: center;
}
form {
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="email"], button {
width: 100%;
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.error {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h2>Newspaper Subscription Form</h2>
<form id="subscriptionForm" onsubmit="return validateForm()">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your full name"><br>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="Enter your email address"><br>
<span id="emailError" class="error"></span><br>
<button type="submit">Subscribe</button>
</form>
</div>
<script>
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var emailError = document.getElementById("emailError");
// Check if name and email are not empty
if (name.trim() == "") {
alert("Please enter your full name.");
return false;
}
if (email.trim() == "") {
alert("Please enter your email address.");
return false;
}
// Validate email format
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
emailError.textContent = "Please enter a valid email address.";
return false;
} else {
emailError.textContent = "";
}
// Subscription successful
alert("Thank you for subscribing! You will receive weekly news at your email address.");
return true;
}
</script>
</body>
</html>
No comments:
Post a Comment