Scribd Logo
Upload

Welcome to Scribd!

  • Q1. Write An HTML Code To Process Placement Registration Form Which Accepts The Student

    Uploaded by

    SACHET KANCHUGAR
    486 views7 pages
    Html assignment on basic html, css and js commands

    Original Title

    Html Assigment

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Html assignment on basic html, css and js commands

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    486 views7 pages

    Q1. Write An HTML Code To Process Placement Registration Form Which Accepts The Student

    Uploaded by

    SACHET KANCHUGAR
    Html assignment on basic html, css and js commands

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Assignment 1

    Q1. Write an HTML code to process placement registration form which accepts the student
    details like name, address, email-id, contact number, date of birth, percentage, branch (must be
    selected using radio button) and technology-preferred (using checkbox). Write the JavaScript
    code to validate the following i. valid email id (@ and .) ii, all the fields must be filled before
    submission of the form. iii percentage validation is minimum first class (=> 60%).

    Solution

    In this program, I have written code of an HTML document and also an internal javascript added
    in that. It shows the user a form with fields name, address, email-id, contact number, date of
    birth, percentage, branch (must be selected using radio button) and technology-preferred (using
    checkbox)

    Code

    <html>
    <title>

    </title>
    <script> function validateform(){ var name =
    document.studentform.name.value; var address =
    document.studentform.address.value; var email =
    document.studentform.email.value; var contact =
    document.studentform.contact.value; var dob =
    document.studentform.dob.value;
    var percentages =
    document.studentform.percentage.value; var branch =
    document.studentform.branch.value; var tech =
    document.studentform.tech.value;

    if (name == "" || address == "" || email == "" || contact == "" || dob == "" || percentage
    == "" || branch == "")
    {
    /*const element = document.getElementById("div1"); const
    msg = document.createElement("p"); const node =
    document.createTextNode("Please fill all fields");
    msg.appendChild(node); element.replaceChild(msg);*/
    alert("Please fill all fields");
    } else if (!email.includes("@") || !
    email.includes(".") )
    { alert("Invalid Email");
    }

    else if (percentages <= 60)


    {
    alert("Percentage too low");
    }
    else
    {
    alert("Form Submitted");
    }
    }

    </script>
    <body>

    <h2>Form</h2>

    <form name="studentform" action="" style="text-align: left;">


    <label for="name">Name:</label><br>
    <input type="text" id="name"><br>
    <label for="address">Address:</label><br>
    <input type="text" id="address"><br><br>
    <label for="email">Email ID:</label><br>
    <input type="text" id="email"><br><br>
    <label for="contact">Contact No:</label><br>
    <input type="text" id="contact"><br><br>
    <label for="dob">DOB:</label><br>
    <input type="text" id="dob"><br><br>
    <label for="dob">Percentage:</label><br>
    <input type="text" id="percentage"><br><br>

    <input type="radio" id="CMPN" name="branch" value="CMPN">


    <label for="CMPN">CMPN</label><br>
    <input type="radio" id="INFT" name="branch" value="INFT">
    <label for="INFT">INFT</label><br>
    <input type="radio" id="ELEC" name="branch" value="ELEC">
    <label for="ELEC">ELEC</label><br>
    <input type="radio" id="MECH" name="branch" value="MECH">
    <label for="MECH">MECH</label><br>

    <input type="checkbox" id="web" name="tech" value="web">


    <label for="vehicle1"> Web Development </label><br>
    <input type="checkbox" id="aiml" name="tech" value="aiml">
    <label for="vehicle2"> AI and ML</label><br>
    <input type="checkbox" id="blockchain" name="tech" value="blockchain">
    <label for="vehicle3"> Blockchain</label><br>

    <button onclick="validateform()" type="submit" value="Submit" >


    </form>

    <p>Click Submit Button</p>


    <div id="div1" style="color:red">

    </div>

    </body>
    </html>

    Output

    Q2. .Write a HTML5 code for embedding audio &amp; video elements in web page.
    In this program I have embedded both audio and video files using HTML 5

    Code
    <!DOCTYPE html>
    <html>
    <body>

    <div>
    <video width="320" height="240" controls autoplay muted>
    <source src="https://cdn.videvo.net/videvo_files/video/free/2021-
    04/small_watermarked/210329_
    06B_Bali_1080p_013_preview.webm" type="video/webm">
    Your browser does not support the video tag.
    </video>

    <br>
    <audio controls>
    <source
    src="https://content.videvo.net/videvo_files/audio/premium/audio0181/originalContent/T
    h e-Lark-From-Children's-Album-CLM0111.mp3" type="audio/mp3">

    Your browser does not support the audio element.


    </audio>
    </div>
    </body>
    </html>

    Output

    Q3. Write an external stylesheet and link it with HTML code. The stylesheet should include the
    following The web page will have the background image "img1.jpg". ii. The table headings will
    have red background color. iii. Background color of alternate paragraphs are different. iv. The
    hyperlinks on the web page will not have underline.

    Code

    question3.html
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <link rel="stylesheet" href="styles.css">
    <body>

    <h2>My Table</h2>
    <p></p>

    <table>
    <tr>
    <th>Subject</th>
    <th>Marks Scored</th>
    <th>Grade</th>
    </tr>
    <tr>
    <td>Physics</td>
    <td>87</td>
    <td>A</td>
    </tr>
    <tr>
    <td>Chemistry</td>
    <td>74</td>
    <td>C+</td>
    </tr>
    <tr>
    <td>Maths</td>
    <td>80</td>
    <td>B</td>
    </tr>
    <tr>
    <td>Computers</td>
    <td>98</td>
    <td>A+</td>
    </tr>
    </table>
    <b>
    <a href = "https://www.google.com/"> Link 1 </a><br>
    <a href = "https://www.yahoo.com/"> Link 2 </a><br>
    <a href = "localhost:3000"> Link 3 </a>
    </b>
    </body>
    </html>

    styles.css body {
    background-image: url("img1.jpg"); color
    : white;
    font-family: Verdana, sans-serif;
    } table
    {
    border-collapse:
    collapse; width: 100%;
    color : black;
    }
    th, td {
    text-align: left;
    padding: 8px;
    } th{ background-
    color:red;
    }

    tr:nth-child(even) {background-color: #a6ffd1;} tr:nth-


    child(odd) {background-color: #5c9c7b;}

    a{
    font-size : 50px; text-
    decoration: none; color :
    white;
    }
    Output

    You might also like