EX:NO:01 IMPLEMENT CLIENT-SIDE FORM DESIGN AND VALIDATION
DATE:31/01/2024
AIM:
To implement a client -side form design and validation using HTML, CSS and JS.
PROCEDURE:
HTML:
• The HTML code defines a basic structure for a login form.
• It includes fields for the user to input their email and password.
• The form has a submit button that users can click to submit their login credentials.
• There's also a link for users to navigate to a registration page if they don't have an
account yet.
CSS:
• The CSS code styles the login form and its elements to make it visually appealing and
user-friendly.
• It sets the background color, font family, and overall layout of the form.
• Styles for labels, input fields, and buttons are defined to ensure consistency and
readability.
• There are hover effects defined for the submit button to provide visual feedback to
users.
JavaScript:
We have given the java script inside the html itself. which contains the <script> tag in it.
The validate () function in <script> is expected to handle form validation before submission.
Procedure:
To make this form fully functional, you need to implement the following steps:
[Link] Validate ():
• Define the validate () function to handle form validation.
• Ensure that the function checks if the email and password fields are not empty.
• Implement any additional validation logic you require, such as checking for valid email
format.
[Link] form submission:
• Ensure that the form submission is handled properly. This might involve sending the
form data to a server-side script for authentication.
• You can use JavaScript to prevent the default form submission behavior if client-side
validation fails.
[Link] the server-side logic:
• Once the form is submitted, the server-side code should handle authentication.
• It should verify the user's credentials against a database or any other authentication
mechanism you're using.
• If authentication is successful, you can redirect the user to a dashboard or home page.
[Link] and UI/UX enhancements:
• Customize the CSS to match your desired look and feel.
• Consider adding additional features such as error messages for invalid input, password
strength indicators, etc.
SOURCE CODE:
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validations</title>
<link rel="stylesheet" href="[Link]">
</head>
<body id="bo">
<div class="container">
<div class="fr">
<form >
<input type="text" placeholder="Username" id="efr"><br>
<input type="password" placeholder="Password" id="efr"><br>
<input type="password" placeholder="Confirm Password" id="efr"><br><br>
<a href="[Link] Password?</a><br><br>
</form>
<a href="[Link]"><input type="submit" value="SUBMIT" id="sub"></a>
</div>
</div>
</body>
</html>
[Link]:
*
{
margin: 0px;
padding: 0px;
}
.container
{
top: 50%;
left: 50%;
position:absolute;
transform: translate(-50%,-50%);
}
.fr
{
padding: 60px 40px 50px 60px;
background-color: black;
border-radius: 20px;
}
#efr
{
border: none;
outline: none;
background: transparent;
border-bottom: 1px solid white;
padding: 5px;
color: white;
width: 300px;
height: 30px;
}
a
{
font-size: 15px;
margin-bottom: 20px;
}
#sub
{
border: none;
outline: none;
background-color: dodgerblue;
width: 100px;
height: 35px;
margin-left: 90px;
margin-top: 12px;
font-size: 14px;
}
#sub:hover
{
background-color: blanchedalmond;
}
body
{
background-image: url("[Link]");
background-size: 100% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submited Page</title>
<style>
body
{
background-image: url("[Link]");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
fieldset
{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
width: 1000px;
height: 180px;
color: rgb(33, 28, 123);
font-family:Georgia, 'Times New Roman', Times, serif;
font-size:35px;
border-radius: 20px;
}
article
{
padding: 20px;
font-size: 29px;
color:rgb(8, 5, 5);
font-family: Arial, Helvetica, sans-serif;
}
#subm
{
margin-left: 890px;
border: none;
outline: none;
background: transparent;
font-size: large;
cursor: pointer;
background-color:rgb(6, 11, 15);
color: white;
width: 100px;
height: 30px;
font-family: 'Times New Roman', Times, serif;
}
#subm:hover
{
color: rgb(18, 210, 191);
}
</style>
</head>
<body>
<fieldset>
<legend>
Login Successfully!!!
</legend>
<article>
Your Mail Id Login Successfull. <br>
Please Fill the Your Details In Next Form.
</article>
<a href="[Link]"><input type="submit" name="" value="Next >>" id="subm"></a>
</fieldset>
</body>
</html>
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validations</title>
<style>
body {
background-image: url("[Link]");
background-size: 100% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
.container {
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.fd {
padding: 60px 40px 50px 60px;
background-color: rgb(5, 17, 17);
border-radius: 20px;
color: rgb(244, 242, 242);
width: 700px;
padding: 20px;
}
#name, #email, #mobile, #dob, #address, #file {
border: none;
outline: none;
border-radius: 5px;
width: 300px;
height: 25px;
border-spacing: 20px;
}
#he {
margin-bottom: 25px;
text-align: center;
font-size: 35px;
}
#su {
border: none;
outline: none;
background-color: dodgerblue;
width: 100px;
height: 35px;
margin-left: 300px;
margin-top: 12px;
font-size: 14px;
}
#su:hover {
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="container">
<div class="fd">
<h3 id="he">Registration Form</h3>
<form id="registrationForm" onsubmit="return validateForm()">
<label>Name:</label><br>
<input type="text" id="name"><br>
<label>E-Mail:</label><br>
<input type="email" id="email"><br>
<label>Mobile Number:</label><br>
<input type="text" id="mobile"><br>
<label>Gender:</label><br>
<input type="radio" name="gender" value="male" checked> <label
for="male">Male</label>
<input type="radio" name="gender" value="female"> <label
for="female">Female</label><br>
<label>DOB:</label><br>
<input type="date" id="dob"><br>
<label>Address:</label><br>
<textarea cols="30" rows="10" id="address"></textarea><br>
<label>Qualification:</label>
<input type="checkbox">SSLC <input type="checkbox"> HSC<input
type="checkbox"> DIPLOMA <input type="checkbox">B.E <br>
<label>Select Your City:</label>
<select id="city">
<option>Virudhunagar</option>
<option>Madurai</option>
<option>Chennai</option>
<option>Trichy</option>
<option>Covai</option>
</select><br>
<label>Upload Your Photo:</label>
<input type="file" id="file"><br>
<input type="checkbox" id="agreement">
<label>Are You Fill This Above Details</label><br>
<input type="submit" value="submit" id="su">
</form>
</div>
</div>
<script>
function validateForm() {
var name = [Link]('name').value;
var email = [Link]('email').value;
var mobile = [Link]('mobile').value;
var dob = [Link]('dob').value;
var address = [Link]('address').value;
var file = [Link]('file').value;
var agreement = [Link]('agreement').checked;
if (name === "" || email === "" || mobile === "" || dob === "" || address === "" || file ===
"" || !agreement) {
alert("Please fill in all fields and agree to the terms.");
return false;
}
return true;
}
</script>
</body>
</html>
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FINAL</title>
<style>
.container
{
top: 50%;
left: 50%;
position:absolute;
transform: translate(-50%,-50%);
}
h2
{
margin-left: 55px;
}
body{
background-color: aqua;
}
</style>
</head>
<body>
<div class="container">
<div class="dc">
<h1>DETAILS SAVED!!</h1>
</div>
<h2> THANK YOU </h2>
</div>
</body>
</html>
OUTPUT:
RESULT:
Implementation of Client-side Form validation is successfully executed.