Scribd
Upload
2 views

CSS Practical No 08

The document provides a complete HTML form that includes various input elements such as text fields, radio buttons, checkboxes, a dropdown, and a textarea, along with basic validation functionality. It includes JavaScript to validate user inputs for fields like name, email, password, gender, and country, displaying error messages when inputs are invalid. The form is styled with CSS for a clean and user-friendly interface.

Uploaded by

faizanmulla1202
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

CSS Practical No 08

The document provides a complete HTML form that includes various input elements such as text fields, radio buttons, checkboxes, a dropdown, and a textarea, along with basic validation functionality. It includes JavaScript to validate user inputs for fields like name, email, password, gender, and country, displaying error messages when inputs are invalid. The form is styled with CSS for a clean and user-friendly interface.

Uploaded by

faizanmulla1202
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Practical No 08

Q.1) Program to create a form with all html elements and


perform basic validation on it.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Validation</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: auto;
padding: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
}
input, select, textarea {
padding: 10px;
margin-top: 5px;
font-size: 16px;
}
.error {
color: red;
font-size: 14px;
display: none;
}
button {
padding: 10px;
margin-top: 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<h1>Form with HTML Elements and Validation</h1>


<form id="myForm" onsubmit="return validateForm()">
<!-- Text Input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<span class="error" id="nameError">Name is required.</span>

<!-- Email Input -->


<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
<span class="error" id="emailError">Please enter a valid email.</span>

<!-- Password Input -->


<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
<span class="error" id="passwordError">Password must be at least 6 characters.</span>

<!-- Radio Buttons -->


<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<span class="error" id="genderError">Please select your gender.</span>

<!-- Checkbox -->


<label>Hobbies:</label>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="travelling" name="hobbies" value="travelling">
<label for="travelling">Travelling</label>
<input type="checkbox" id="sports" name="hobbies" value="sports">
<label for="sports">Sports</label>

<!-- Select Dropdown -->


<label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select your country</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
<span class="error" id="countryError">Please select your country.</span>

<!-- Textarea -->


<label for="comments">Comments:</label>
<textarea id="comments" name="comments" placeholder="Enter your comments"
rows="4"></textarea>

<!-- Submit Button -->


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

<script>
function validateForm() {
// Clear previous errors
document.querySelectorAll('.error').forEach(function(error) {
error.style.display = 'none';
});

let isValid = true;

// Validate Name
let name = document.getElementById("name").value;
if (name === "") {
document.getElementById("nameError").style.display = 'inline';
isValid = false;
}

// Validate Email
let email = document.getElementById("email").value;
let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
document.getElementById("emailError").style.display = 'inline';
isValid = false;
}

// Validate Password
let password = document.getElementById("password").value;
if (password.length < 6) {
document.getElementById("passwordError").style.display = 'inline';
isValid = false;
}

// Validate Gender (Radio Button)


let genderMale = document.getElementById("male").checked;
let genderFemale = document.getElementById("female").checked;
if (!genderMale && !genderFemale) {
document.getElementById("genderError").style.display = 'inline';
isValid = false;
}

// Validate Country (Select Dropdown)


let country = document.getElementById("country").value;
if (country === "") {
document.getElementById("countryError").style.display = 'inline';
isValid = false;
}

return isValid; // Prevent form submission if validation fails


}
</script>

</body>
</html>
Output:

You might also like