Scribd Logo
Upload

Welcome to Scribd!

  • HTML

    Uploaded by

    ccrown861
    12 views2 pages
    The document contains HTML and CSS code to create a form with fields for name, email, and age. It uses JavaScript to validate that all fields are filled out and displays a success message with the input values or an error if fields are missing when the submit button is clicked.

    Original Description:

    an HTML program

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains HTML and CSS code to create a form with fields for name, email, and age. It uses JavaScript to validate that all fields are filled out and displays a success message with the input values or an error if fields are missing when the submit button is clicked.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    12 views2 pages

    HTML

    Uploaded by

    ccrown861
    The document contains HTML and CSS code to create a form with fields for name, email, and age. It uses JavaScript to validate that all fields are filled out and displays a success message with the input values or an error if fields are missing when the submit button is clicked.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complex HTML Example</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    }

    form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    label {
    display: block;
    margin-bottom: 8px;
    }

    input {
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    box-sizing: border-box;
    }

    button {
    background-color: #4caf50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    }

    button:hover {
    background-color: #45a049;
    }

    #result {
    margin-top: 20px;
    font-weight: bold;
    }
    </style>
    </head>
    <body>
    <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>

    <button type="button" onclick="submitForm()">Submit</button>


    </form>

    <div id="result"></div>

    <script>
    function submitForm() {
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    var age = document.getElementById('age').value;

    // Simple validation
    if (name && email && age) {
    var resultMessage = 'Form submitted successfully!';
    resultMessage += '<br>Name: ' + name;
    resultMessage += '<br>Email: ' + email;
    resultMessage += '<br>Age: ' + age;

    document.getElementById('result').innerHTML = resultMessage;
    } else {
    alert('Please fill in all fields');
    }
    }
    </script>

    </body>
    </html>

    You might also like