Scribd
Upload
8 views7 pages

SDL Practical 2

The document is an HTML code for a static website contact page titled 'Discount Mart'. It includes a form for users to submit their email, name, gender, country, and a message, with JavaScript validation for required fields. The page also features navigation links to Home, About, and Services sections.

Uploaded by

sushantasole21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views7 pages

SDL Practical 2

The document is an HTML code for a static website contact page titled 'Discount Mart'. It includes a form for users to submit their email, name, gender, country, and a message, with JavaScript validation for required fields. The page also features navigation links to Home, About, and Services sections.

Uploaded by

sushantasole21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Assignment No.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact | Static Website</title>
<style>
table {
border: 1px solid black;
}
#mar {
margin-bottom: 10px;
}
</style>

<link rel="stylesheet" href="style.css" />


<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"> -->

<script>
function validateForm() {
var email = document.contactForm.email.value;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (email == "") {
alert("Please enter your email.");
document.contactForm.email.focus();
return false;
} else if (!email.match(emailPattern)) {
alert("Please enter a valid email address.");
document.contactForm.email.focus();
return false;
}

var name = document.contactForm.name.value;


if (name == "") {
alert("Please enter your name.");
document.contactForm.name.focus();
return false;
}

var gender = document.contactForm.gender.value;


if (gender == "") {
alert("Please select your gender.");
return false;
}
var country = document.contactForm.country.value;
if (country == "Default") {
alert("Please select a country.");
document.contactForm.country.focus();
return false;
}

var message = document.contactForm.message.value;


if (message == "") {
alert("Please enter your message.");
document.contactForm.message.focus();
return false;
}

alert("Form submitted successfully!");


return true;
}
</script>
</head>
<body>
<h1>Discount Mart</h1>
<div>
<table style="border-radius: 5px;">
<thead>
<th><a href="index.html">Home</a></th>
<th><a href="about.html">About</a></th>
<th><a href="services.html">Services</a></th>
<th><a href="contact.html">Contact</a></th>
</thead>
</table>
</div>
<div>
<hr id="mar" />
<h2>Contact Us</h2>
<form name="contactForm" onsubmit="return validateForm()" action="myserver.php">
<ul>
<div id="mar">
<li>
<label for="email">Email</label>
</li>
<input type="email" name="email" placeholder="Enter your email" style="margin-top:
3px;" />
</div>
<div id="mar">
<li>
<label for="name">Name</label>
</li>
<input type="text" name="name" placeholder="Enter your name" style="margin-top:
3px;" />
</div>
<div id="mar">
<li>
<label for="gender">Gender</label><br />
<input type="radio" name="gender" value="Male" /> Male
<input type="radio" name="gender" value="Female" /> Female
</li>
</div>
<div id="mar">
<li>
<label for="country">Country</label><br />
<select name="country">
<option value="Default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AD">USA</option>
</select>
</li>
</div>
<div id="mar">
<li>
<label for="message">Message</label>
</li>
<textarea name="message" placeholder="Your Message" style="margin-top:
3px;"></textarea>
</div>
</ul>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<hr id="mar" />
</div>
</body>
</html>
Output:

You might also like