Scribd
Upload
30 views5 pages

WT 6

Uploaded by

rahulsinghqe97
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
30 views5 pages

WT 6

Uploaded by

rahulsinghqe97
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/ 5

Experiment 6

Aim: Create HTML Page that contains form with fields Name, Email, Mobile
No, Gender, Favourite Colour and a button now write a JavaScript code to
combine and display the information in textbox when the button is clicked and
implement validation

Code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />

<label for="email">Email:</label>
<input type="email" id="email" name="email"
required />

<label for="mobile">Mobile No:</label>


<input type="tel" id="mobile" name="mobile"
required />

<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>

<label for="color">Favorite Color:</label>


<input type="color" id="color" name="color" />

<button type="button"
onclick="displayInfo()">Submit</button>
</form>

<div id="result"></div>

<script src="script.js"></script>
</body>
</html>

CSS:
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
padding: 10px 20px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
}

JAVASCRIPT:
function displayInfo() {
// Get form values
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var mobile = document.getElementById("mobile").value;
var gender = document.getElementById("gender").value;
var color = document.getElementById("color").value;

// Validation
if (name === "" || email === "" || mobile === "" ||
gender === "") {
alert("Please fill out all required fields.");
return;
}

// Combine information
var info =
"Name: " +
name +
"\n" +
"Email: " +
email +
"\n" +
"Mobile No: " +
mobile +
"\n" +
"Gender: " +
gender +
"\n" +
"Favorite Color: " +
color;

document.getElementById("result").textContent = info;
}
OUTPUTS:

Colour Picker:

Select Gender:
Form Validation:

Form Submission:

You might also like