Web Applications Lab Manual 1 - HTML,
CSS, JavaScript
1. HTML Form Creation
Create a student registration form using HTML5 form elements.
Steps:
Open a code editor (e.g., VS Code).
Create a file named `register.html`.
Use `<form>`, `<input>`, `<select>`, and `<textarea>` for fields like name, email, gender,
etc.
Use `type='submit'` to submit the form.
Open in a browser and test the form layout.
Code:
<!DOCTYPE html>
<html>
<head><title>Registration Form</title></head>
<body>
<h2>Student Registration Form</h2>
<form>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
2. CSS Styling
Design a personal portfolio page using HTML and external CSS.
Steps:
Create `portfolio.html` and `style.css`.
Link the CSS using `<link rel='stylesheet' href='style.css'>`.
Use CSS to style the header, sections, and footer.
Add hover effects using pseudo-classes.
Preview the final design in a browser.
Code:
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background: #333;
color: #fff;
padding: 10px;
text-align: center;
}
section {
padding: 20px;
margin: 10px;
background: #fff;
}
3. JavaScript Form Validation
Validate a user login form using JavaScript.
Steps:
Create `login.html` and include a `<script>` block.
Check if fields are empty before submitting.
Display an alert if fields are missing.
Use `onsubmit` event in form tag.
Open in browser and test validations.
Code:
<!DOCTYPE html>
<html>
<head><title>Login Validation</title></head>
<body>
<form onsubmit="return validateForm()">
Username: <input type="text" id="username"><br><br>
Password: <input type="password" id="password"><br><br>
<input type="submit" value="Login">
</form>
<script>
function validateForm() {
let user = document.getElementById("username").value;
let pass = document.getElementById("password").value;
if (user == "" || pass == "") {
alert("Both fields are required!");
return false;
}
return true;
}
</script>
</body>
</html>
4. JavaScript DOM Manipulation - To-Do List
Create a dynamic to-do list using JavaScript DOM methods.
Steps:
Create an HTML page with an input and a button.
Add an empty `<ul>` element to hold list items.
Use `document.createElement()` to add new `<li>` items.
Append each item to the list dynamically.
Add delete button for each list item.
Code:
<!DOCTYPE html>
<html>
<head><title>To-Do List</title></head>
<body>
<h2>To-Do List</h2>
<input type="text" id="task">
<button onclick="addTask()">Add</button>
<ul id="taskList"></ul>
<script>
function addTask() {
let taskInput = document.getElementById("task").value;
if (taskInput === "") return;
let li = document.createElement("li");
li.textContent = taskInput;
document.getElementById("taskList").appendChild(li);
document.getElementById("task").value = "";
}
</script>
</body>
</html>
5. JavaScript Events - Image Slider
Make an image slider using JavaScript and image array.
Steps:
Create `slider.html` and include image tags.
Store multiple image paths in an array.
Create `Next` and `Previous` buttons.
Change image source using JavaScript events.
Test functionality in browser.
Code:
<!DOCTYPE html>
<html>
<head><title>Image Slider</title></head>
<body>
<img id="slider" src="img1.jpg" width="300">
<br>
<button onclick="prev()">Previous</button>
<button onclick="next()">Next</button>
<script>
let images = ["img1.jpg", "img2.jpg", "img3.jpg"];
let i = 0;
function next() {
i = (i + 1) % images.length;
document.getElementById("slider").src = images[i];
}
function prev() {
i = (i - 1 + images.length) % images.length;
document.getElementById("slider").src = images[i];
}
</script>
</body>
</html>
