<head>
    <!-- meta information goes here -->
</head>

<body>
    <!-- visible content goes here -->
</body>

<!DOCTYPE html>
<html>

<head>
    <title>BIT Web Tech</title>
</head>

<body bgcolor="lightblue">

    <h1 align="center">Welcome to BIT Web Tech</h1>
    <hr>

    <h2>Course Information</h2>

    <table border="1" cellpadding="5" cellspacing="0">
        <tr bgcolor="yellow">
            <th>S.N.</th>
            <th>Course Name</th>
            <th>Credit Hour</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Web Technology</td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Database Management</td>
            <td>3</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Programming in C</td>
            <td>3</td>
        </tr>
    </table>

     

    <h2>Key Features</h2>
    <ul>
        <li>HTML and CSS</li>
        <li>JavaScript</li>
        <li>PHP and MySQL</li>
    </ul>

    <h2>Semester List</h2>
    <ol>
        <li>First Semester</li>
        <li>Second Semester</li>
        <li>Third Semester</li>
    </ol>

    <hr>
    <p align="center">
        <b>Contact us at:</b>
        <a href="mailto:[email protected]">[email protected]</a>
    </p>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Signup Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 500px;
            margin: 40px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
        }
        h2 {
            text-align: center;
            color: #333;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }
        input[type="text"],
        input[type="password"],
        input[type="email"],
        select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #aaa;
            border-radius: 4px;
        }
        .error {
            color: red;
            font-size: 13px;
            margin-top: 4px;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

<h2>Signup Form</h2>

<form name="signupForm" onsubmit="return validateForm()">

    <!-- Username -->
    <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" placeholder="Enter username">
        <span class="error" id="usernameError"></span>
    </div>

    <!-- Password -->
    <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Enter password">
        <span class="error" id="passwordError"></span>
    </div>

    <!-- Email -->
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter email">
        <span class="error" id="emailError"></span>
    </div>

    <!-- Country -->
    <div class="form-group">
        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="">-- Select Country --</option>
            <option value="nepal">Nepal</option>
            <option value="india">India</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
            <option value="australia">Australia</option>
        </select>
        <span class="error" id="countryError"></span>
    </div>

    <!-- Gender -->
    <div class="form-group">
        <label>Gender:</label>
        <input type="radio" name="gender" value="male"> Male
        <input type="radio" name="gender" value="female"> Female
        <input type="radio" name="gender" value="other"> Other
        <span class="error" id="genderError"></span>
    </div>

    <!-- Hobbies -->
    <div class="form-group">
        <label>Hobbies:</label>
        <input type="checkbox" name="hobbies" value="reading"> Reading
        <input type="checkbox" name="hobbies" value="gaming"> Gaming
        <input type="checkbox" name="hobbies" value="travelling"> Travelling
        <input type="checkbox" name="hobbies" value="cooking"> Cooking
        <span class="error" id="hobbiesError"></span>
    </div>

    <!-- Submit -->
    <div class="form-group">
        <input type="submit" value="Sign Up">
    </div>

</form>

<script>
    function validateForm() {

        // Clear all previous error messages
        var errorIds = [
            "usernameError", "passwordError", "emailError",
            "countryError", "genderError", "hobbiesError"
        ];
        for (var i = 0; i < errorIds.length; i++) {
            document.getElementById(errorIds[i]).innerText = "";
        }

        var isValid = true;

        // ---- 1. Username Validation ----
        var username = document.getElementById("username").value.trim();

        if (username === "") {
            document.getElementById("usernameError").innerText
                = "Username is required.";
            isValid = false;
        } else if (username.length < 8) {
            document.getElementById("usernameError").innerText
                = "Username must be at least 8 characters long.";
            isValid = false;
        }

        // ---- 2. Password Validation ----
        var password = document.getElementById("password").value.trim();
        var hasDigit = /\d/;  // Regular expression to check for at least one digit

        if (password === "") {
            document.getElementById("passwordError").innerText
                = "Password is required.";
            isValid = false;
        } else if (password.length < 6) {
            document.getElementById("passwordError").innerText
                = "Password must be at least 6 characters long.";
            isValid = false;
        } else if (!hasDigit.test(password)) {
            document.getElementById("passwordError").innerText
                = "Password must contain at least one digit.";
            isValid = false;
        }

        // ---- 3. Email Validation ----
        var email = document.getElementById("email").value.trim();
        var emailPattern = /^[a-zA-Z0-9._+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

        if (email === "") {
            document.getElementById("emailError").innerText
                = "Email is required.";
            isValid = false;
        } else if (!emailPattern.test(email)) {
            document.getElementById("emailError").innerText
                = "Please enter a valid email address.";
            isValid = false;
        }

        // ---- 4. Country Validation (dropdown) ----
        var country = document.getElementById("country").value;

        if (country === "") {
            document.getElementById("countryError").innerText
                = "Please select a country.";
            isValid = false;
        }

        // ---- 5. Gender Validation (radio buttons) ----
        var genders = document.getElementsByName("gender");
        var genderChosen = false;
        for (var g = 0; g < genders.length; g++) {
            if (genders[g].checked) {
                genderChosen = true;
                break;
            }
        }
        if (!genderChosen) {
            document.getElementById("genderError").innerText
                = "Please select your gender.";
            isValid = false;
        }

        // ---- 6. Hobbies Validation (checkboxes) ----
        var hobbies = document.getElementsByName("hobbies");
        var hobbyCount = 0;
        for (var h = 0; h < hobbies.length; h++) {
            if (hobbies[h].checked) {
                hobbyCount++;
            }
        }
        if (hobbyCount === 0) {
            document.getElementById("hobbiesError").innerText
                = "Please select at least one hobby.";
            isValid = false;
        }

        // ---- Final result ----
        if (isValid) {
            alert("Signup successful.");
        }

        // false prevents submission, true allows it
        return isValid;
    }
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>HTML Form Events</title>
</head>
<body>

    <h2>HTML Form Events Demo</h2>

    <form>

        <!-- onfocus event on text input -->
        <label>Name:</label>
        <input
            type="text"
            id="nameField"
            onfocus="document.getElementById('msg1').innerHTML =
                     'Name field is now focused! Please enter your name.'"
            placeholder="Enter your name"
        />
          

        <!-- onchange event on text input -->
        <label>Email:</label>
        <input
            type="text"
            id="emailField"
            onchange="document.getElementById('msg2').innerHTML =
                      'Email has been changed to: ' + this.value"
            onfocus="document.getElementById('msg1').innerHTML =
                     'Email field is now focused! Please enter your email.'"
            placeholder="Enter your email"
        />
          

        <!-- onchange event on dropdown -->
        <label>Select Course:</label>
        <select
            id="courseSelect"
            onchange="document.getElementById('msg3').innerHTML =
                      'You selected: ' + this.value"
            onfocus="document.getElementById('msg1').innerHTML =
                     'Dropdown is focused! Please select a course.'"
        >
            <option value="">-- Choose --</option>
            <option value="CSIT">BSc CSIT</option>
            <option value="BCA">BCA</option>
            <option value="BIT">BIT</option>
        </select>
          

    </form>

    <!-- Output messages -->
    <p id="msg1" style="color: blue;"></p>
    <p id="msg2" style="color: green;"></p>
    <p id="msg3" style="color: red;"></p>

</body>
</html>

<p>John</p>
<b>Engineer</b>

<?xml version="1.0" encoding="UTF-8"?>
<school>
    <student>
        <rollno>101</rollno>
        <name>Ram Sharma</name>
        <faculty>BSc CSIT</faculty>
        <semester>5</semester>
    </student>
    <student>
        <rollno>102</rollno>
        <name>Sita Thapa</name>
        <faculty>BSc CSIT</faculty>
        <semester>5</semester>
    </student>
</school>

<?xml version="1.0" encoding="UTF-8"?>
<hospital>
    <patient>
        <patientid>P001</patientid>
        <name>Hari Bahadur</name>
        <disease>Fever</disease>
        <doctor>Dr. Laxmi</doctor>
    </patient>
</hospital>