Scribd Logo
Upload

Welcome to Scribd!

  • 20BEC111 WT Practical4

    Uploaded by

    Dhruv Prajapati
    6 views9 pages
    The document describes two web development tasks: 1. Create a table with nested elements like lists, images, and another table to demonstrate complex table structures. 2. Design a student registration form with various form elements like text fields, radio buttons, checkboxes, dropdowns, textarea, file upload, and range slider to collect applicant information. The tasks helped apply HTML table and form tags to build useful data storage and collection applications.

    Original Description:

    Original Title

    20BEC111_WT_Practical4

    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
    The document describes two web development tasks: 1. Create a table with nested elements like lists, images, and another table to demonstrate complex table structures. 2. Design a student registration form with various form elements like text fields, radio buttons, checkboxes, dropdowns, textarea, file upload, and range slider to collect applicant information. The tasks helped apply HTML table and form tags to build useful data storage and collection applications.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    6 views9 pages

    20BEC111 WT Practical4

    Uploaded by

    Dhruv Prajapati
    The document describes two web development tasks: 1. Create a table with nested elements like lists, images, and another table to demonstrate complex table structures. 2. Design a student registration form with various form elements like text fields, radio buttons, checkboxes, dropdowns, textarea, file upload, and range slider to collect applicant information. The tasks helped apply HTML table and form tags to build useful data storage and collection applications.

    Copyright:

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

    Department of Electronics and Communications

    Engineering Institute of Technology, Nirma University


    2CSOE77 Web technologies
    20BEC093-Dhruv Prajapati

    Practical 4
    Design web pages for the following:

    A.Table as given below:

    <html>

    <head>

    <title>Practical-3</title>

    </head>

    <body>

    <table border="1" align="center">


    <caption>Caption: Table Example</caption>

    <tr>

    <th colspan="3">Header-1</th>

    <th colspan = "2" rowspan="2">Right Corner of table</th>

    </tr>

    <tr>

    <th colspan="2">Header-2</th>

    <th>Header-3</th>

    </tr>

    <tr colspan="2">

    <td><ol>

    <li>Lists can be table data</li>

    <li>Image can be table data</li>

    </ol>

    </td>

    <td rowspan="2">Two Tall</td>

    <td colspan="2">Two Columns merged</td>

    </tr>

    <tr>

    <td ><img src="unnamed.png" height="230px"


    width="300px"></td>

    <td>Data Here</td>

    <td>

    <table border="1" align="center">

    <caption>Caption:Nested Table</caption>

    <tr>
    <th>Header</th>

    </tr>

    <tr>

    <td>Cell Data</td>

    </tr>

    </table>

    </td>

    <td>Mutiples Lines: <br>Line 1<br>Line 2<br>Line 3</td>

    </tr>

    <tfoot>

    <tr>

    <td colspan="5" style="text-align: center;">Table


    Footer</td>

    </tr>

    </tfoot>

    </table>

    </body>

    </html>
    B. Create registration form of your choice. Use appropriate form tags.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Application Form</title>
    </head>
    <body>
    <h2>Student Application Form</h2>
    <form action="/submit" method="post">
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName"
    required><br><br>

    <label for="lastName">Last Name:</label>


    <input type="text" id="lastName" name="lastName" required><br><br>

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

    <label for="password">Password:</label>
    <input type="password" id="password" name="password"
    required><br><br>

    <label for="dob">Date of Birth:</label>


    <input type="date" id="dob" name="dob" required><br><br>

    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="1" required><br><br>

    Gender:<br>
    <input type="radio" id="male" name="gender" value="male" required>
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female"
    required>
    <label for="female">Female</label><br><br>

    Subjects of Interest:<br>
    <input type="checkbox" id="math" name="subjects[]"
    value="Mathematics">
    <label for="math">Mathematics</label><br>
    <input type="checkbox" id="science" name="subjects[]"
    value="Science">
    <label for="science">Science</label><br>
    <input type="checkbox" id="history" name="subjects[]"
    value="History">
    <label for="history">History</label><br><br>

    <label for="year">Current Grade:</label>


    <select id="year" name="year">
    <option value="first-year">first-year</option>
    <option value="second-year">second-year</option>
    <option value="third-year">third-year</option>
    <option value="fourth-year">fourth-year</option>
    </select><br><br>

    <label for="about">Tell us about yourself:</label><br>


    <textarea id="about" name="about" rows="4" cols="50"
    required></textarea><br><br>

    <label for="profilePic">Upload a Profile Picture:</label>


    <input type="file" id="profilePic" name="profilePic"><br><br>

    <label for="confidenceLevel">Confidence Level (1-10):</label>


    <input type="range" id="confidenceLevel" name="confidenceLevel"
    min="1" max="10"><br><br>

    <input type="hidden" id="formType" name="formType" value="studentApplication">


    <input type="submit" value="Submit">
    </form>
    </body>
    </html>
    Conclusion: In this practical, I applied the table and the form tags of HTML, and created two useful
    applications, a table to store data and a form to get application data of students.

    You might also like