LT3,5BIO

3. list  and table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lists and Table Example</title>
</head>
<body>

    <!-- i) Display Text with Bullets / Numbers - Using Lists -->
    <h1>Lists</h1>

    <!-- Unordered List (Bullets) -->
    <h2>Unordered List</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>

    <!-- Ordered List (Numbers) -->
    <h2>Ordered List</h2>
    <ol>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
        <li>Fourth Item</li>
    </ol>

    <!-- ii) Display the Table Format Data -->
    <h1>Table Example</h1>

    <table border="1">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Col 1</td>
                <td>Row 1, Col 2</td>
                <td>Row 1, Col 3</td>
            </tr>
            <tr>
                <td>Row 2, Col 1</td>
                <td>Row 2, Col 2</td>
                <td>Row 2, Col 3</td>
            </tr>
            <tr>
                <td>Row 3, Col 1</td>
                <td>Row 3, Col 2</td>
                <td>Row 3, Col 3</td>
            </tr>
        </tbody>
    </table>

</body>
</html>


5.Biodata 


index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bio-Data Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            text-align: center;
        }
        form {
            width: 60%;
            margin: auto;
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        label {
            font-weight: bold;
            display: block;
            margin: 10px 0 5px;
        }
        input, textarea, select {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: blue;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        button:hover {
            background-color: darkblue;
        }
    </style>
</head>
<body>

    <h1>Bio-Data Form</h1>

    <form id="biodataForm" onsubmit="saveDataAndRedirect()">
        <!-- Name -->
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" required>

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

        <!-- Phone -->
        <label for="phone">Phone Number:</label>
        <input type="tel" id="phone" name="phone" required>

        <!-- Address -->
        <label for="address">Address:</label>
        <textarea id="address" name="address" rows="4" required></textarea>

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

        <!-- Date of Birth -->
        <label for="dob">Date of Birth:</label>
        <input type="date" id="dob" name="dob" required>

        <!-- Educational Qualification -->
        <label for="qualification">Educational Qualification:</label>
        <input type="text" id="qualification" name="qualification" required>

        <!-- Skills -->
        <label for="skills">Skills:</label>
        <textarea id="skills" name="skills" rows="4" required></textarea>

        <!-- Submit button -->
        <button type="submit">Submit and View Result</button>
    </form>

    <script>
        function saveDataAndRedirect() {
            event.preventDefault(); // Prevent form from submitting the default way
            
            // Store form data in localStorage
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const phone = document.getElementById('phone').value;
            const address = document.getElementById('address').value;
            const gender = document.getElementById('gender').value;
            const dob = document.getElementById('dob').value;
            const qualification = document.getElementById('qualification').value;
            const skills = document.getElementById('skills').value;

            localStorage.setItem('name', name);
            localStorage.setItem('email', email);
            localStorage.setItem('phone', phone);
            localStorage.setItem('address', address);
            localStorage.setItem('gender', gender);
            localStorage.setItem('dob', dob);
            localStorage.setItem('qualification', qualification);
            localStorage.setItem('skills', skills);

            // Redirect to the result page
            window.location.href = "result.html";
        }
    </script>

</body>
</html>


result.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bio-Data Result</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1, h2 {
            text-align: center;
        }
        .biodata {
            width: 60%;
            margin: auto;
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        p {
            font-size: 18px;
            line-height: 1.5;
        }
    </style>
</head>
<body>

    <h1>Bio-Data Submitted Successfully!</h1>
    <h2>Your Information:</h2>

    <div class="biodata">
        <p><strong>Full Name:</strong> <span id="displayName"></span></p>
        <p><strong>Email:</strong> <span id="displayEmail"></span></p>
        <p><strong>Phone Number:</strong> <span id="displayPhone"></span></p>
        <p><strong>Address:</strong> <span id="displayAddress"></span></p>
        <p><strong>Gender:</strong> <span id="displayGender"></span></p>
        <p><strong>Date of Birth:</strong> <span id="displayDOB"></span></p>
        <p><strong>Educational Qualification:</strong> <span id="displayQualification"></span></p>
        <p><strong>Skills:</strong> <span id="displaySkills"></span></p>
    </div>

    <script>
        // Retrieve and display form data from localStorage
        document.getElementById('displayName').innerText = localStorage.getItem('name');
        document.getElementById('displayEmail').innerText = localStorage.getItem('email');
        document.getElementById('displayPhone').innerText = localStorage.getItem('phone');
        document.getElementById('displayAddress').innerText = localStorage.getItem('address');
        document.getElementById('displayGender').innerText = localStorage.getItem('gender');
        document.getElementById('displayDOB').innerText = localStorage.getItem('dob');
        document.getElementById('displayQualification').innerText = localStorage.getItem('qualification');
        document.getElementById('displaySkills').innerText = localStorage.getItem('skills');
    </script>

</body>
</html>

Comments

Post a Comment

Popular posts from this blog

PHP 4 to 10

Program 4 Read form data   <!DOCTYPE html> <html> <head>  <title> PHP Form </title>  <style>  #field-container { width: 300px; margin: 50px auto; }  input, select, textarea { width: 100%; padding: 5px; margin-top: 2px; box-sizing: border-box; }  </style> </head> <body>  <div id="field-container">  <h2> Reading Form Data </h2>  <?php   if ($_SERVER["REQUEST_METHOD"] == "POST") {  $name = $_POST['name'];   $gender = $_POST['gender'];   $hobbies = isset($_POST['hobbies']) ? implode(', ', $_POST['hobbies']) : 'None';  $comments = $_POST['comments'];   $branch = $_POST['branch'];  echo "<h3>Submitted Data:</h3> Name: $name<br>Gender: $gender<br>Branch:  $branch<br>Hobbies: $hobbies<br>Comments: $comments<br>";  } else {?>  <form action="" method="post...
Read more

PHP

1.string handling <!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title></title> </head> <body>  <style type="text/css">  table tr td { padding:5px; } </style> <?php $name="Welcome to KGISL IIM!"; echo "<center style='font-size:20px'>"; echo "<h3>Input String: ".$name ."</h3>"; echo "<br><br>"; echo "<table border=1> <th>Method </th> <th> Syntax </th> <th>Result </th>"; echo "<tr><td>String Length</td> <td>strlen(input_string) </td> <td> ".strlen($name)."</td></tr>"; echo "<tr><td>Word Count</td> <td>str_word_count(input_string)</td> <td> ".str_word_cou...
Read more

2,4

2. countries  <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>World Countries</title>     <style>         body {             font-family: Arial, sans-serif;             line-height: 1.6;         }         a {             color: blue;             text-decoration: none;             font-weight: bold;         }         a:hover {             text-decoration: underline;         }     </style> </head> <body>     <h1>Welcome to the World of Countries</h1> ...
Read more