Scribd
Upload
31 views

6th Css

The document contains code for 3 examples of HTML forms with client-side scripting: 1) A simple login form, 2) An employee registration form with validation, and 3) An interactive web form that outputs submitted data. The code demonstrates form inputs like text, password, radio buttons, select menus, checkboxes, and textareas. It also includes JavaScript form validation and handling form submissions without reloading the page.

Uploaded by

Ganesh Ekambe
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

6th Css

The document contains code for 3 examples of HTML forms with client-side scripting: 1) A simple login form, 2) An employee registration form with validation, and 3) An interactive web form that outputs submitted data. The code demonstrates form inputs like text, password, radio buttons, select menus, checkboxes, and textareas. It also includes JavaScript form validation and handling form submissions without reloading the page.

Uploaded by

Ganesh Ekambe
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 06
Code.
1. Simple form
<html>
<head>
<h1> Login Form</h1>
</head>
<body>
<form action="">
User name:<br>
<input type="text" name="userid"><br>
User password:<br>
<input type="password" name="psw"><br>
<input type="submit" value="Submit"><br>
</form>
</body>
</html>

Output
Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 06
2. Registration page

<!DOCTYPE html>
<html>
<head>

<title>Employee Registration</title>
</head>
<body>
<h1>Employee Registration Form</h1>
<form id="employeeForm">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required><br>

<label for="lastName">Last Name:</label>


<input type="text" id="lastName" name="lastName" required><br>

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

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female"
required>
<label for="female">Female</label>
<br>

<label for="department">Department:</label>
<select id="department" name="department" required>
<option value="HR">HR</option>
<option value="IT">IT</option>
<option value="Finance">Finance</option>
<option value="Marketing">Marketing</option>
</select><br>

<label for="skills">Skills:</label>
<input type="checkbox" id="html" name="skills" value="HTML">
<label for="html">HTML</label>
Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 06
<input type="checkbox" id="css" name="skills" value="CSS">
<label for="css">CSS</label>
<input type="checkbox" id="javascript" name="skills"
value="JavaScript">
<label for="javascript">JavaScript</label>
<br>

<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="4"
cols="50"></textarea><br>

<input type="submit" value="Submit">


</form>

<script>
document.getElementById("employeeForm").addEventListener("submit",
function (event) {
event.preventDefault();
const formData = new FormData(this);
const formObject = {};
formData.forEach((value, key) => {
formObject[key] = value;
});
console.log(formObject);
});
</script>
</body>
</html>
Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 06

Output
Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 06

3. Form

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Interactive Web Form</title>
<style>
/* Add some basic CSS styles for better appearance */
label {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Interactive Web Form</h1>
<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="age">Age:</label>
<input type="number" id="age" name="age" required>

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

<label>Interests:</label>
Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 06
<input type="checkbox" id="coding" name="interests"
value="coding">
<label for="coding">Coding</label>
<input type="checkbox" id="reading" name="interests"
value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="traveling" name="interests"
value="traveling">
<label for="traveling">Traveling</label>

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4"
cols="50"></textarea>

<button type="submit">Submit</button>
</form>

<div id="output"></div>

<script>
// JavaScript for form validation and interaction
const form = document.getElementById("myForm");
const output = document.getElementById("output");

form.addEventListener("submit", function (event) {


event.preventDefault();
const formData = new FormData(form);

let result = "<h2>Form Data:</h2>";


for (const [key, value] of formData.entries()) {
result += `<p><strong>${key}:</strong> ${value}</p>`;
}

output.innerHTML = result;
});
</script>
</body>
</html>
Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 06

Output

You might also like