Class 2: Lists, Tables & Forms - Web Programming Lab

🎯 Learning Objectives

Master HTML list types: unordered, ordered, and description lists
Create complex nested list structures
Build professional HTML tables with advanced features
Implement table colspan and rowspan for complex layouts
Design and create HTML forms with various input types
Apply proper table styling and accessibility features

📝 HTML Lists

1. Unordered Lists (UL)

<!-- Basic Unordered List -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- Different Bullet Types -->
<ul type="square">
    <li>Square bullets</li>
</ul>

<ul type="circle">
    <li>Circle bullets</li>
</ul>

<ul type="disc">
    <li>Disc bullets (default)</li>
</ul>
                

2. Ordered Lists (OL)

<!-- Basic Ordered List -->
<ol>
    <li>Plan the project</li>
    <li>Write the code</li>
    <li>Test the application</li>
</ol>

<!-- Different Numbering Types -->
<ol type="I">
    <li>Roman numerals (upper)</li>
</ol>

<ol type="i">
    <li>Roman numerals (lower)</li>
</ol>

<ol type="A">
    <li>Letters (upper)</li>
</ol>

<ol type="a">
    <li>Letters (lower)</li>
</ol>

<!-- Custom Starting Number -->
<ol start="5">
    <li>Item 5</li>
    <li value="10">Item 10 (custom)</li>
    <li>Item 11</li>
</ol>
                

3. Description Lists (DL)

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dd>Used for creating web page structure</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dd>Used for styling web pages</dd>
    
    <dt>JavaScript</dt>
    <dd>Programming language for web interactivity</dd>
</dl>
                

4. Nested Lists

<ol>
    <li>Frontend Development
        <ul>
            <li>HTML5</li>
            <li>CSS3
                <ul>
                    <li>Flexbox</li>
                    <li>Grid</li>
                </ul>
            </li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend Development
        <ul>
            <li>Node.js</li>
            <li>PHP</li>
            <li>Python</li>
        </ul>
    </li>
</ol>
                

📊 HTML Tables

1. Basic Table Structure

<table border="1">
    <caption>Student Information</caption>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>232002256</td>
            <td>Majharul Islam</td>
            <td>CSE</td>
        </tr>
        <tr>
            <td>232002257</td>
            <td>Student 2</td>
            <td>CSE</td>
        </tr>
    </tbody>
</table>
                

**Demo: Student Information**
ID	Name	Department
232002256	Majharul Islam	CSE
232002257	Student 2	CSE

2. Advanced Table with Colspan and Rowspan

<table border="1">
    <tr>
        <th colspan="4">CSE Department</th>
    </tr>
    <tr>
        <th rowspan="2">Student ID</th>
        <th rowspan="2">Name</th>
        <th colspan="2">Program</th>
    </tr>
    <tr>
        <th>Day</th>
        <th>Evening</th>
    </tr>
    <tr>
        <td>232002256</td>
        <td>Majharul Islam</td>
        <td>Yes</td>
        <td>No</td>
    </tr>
</table>
                

3. Class Test: Teacher Routine Table

✅ Completed: Created a comprehensive teacher routine table for Tanpia Tasnim

Features Implemented:

7-column layout with time slots from 08:30-10:00 to 04:30-06:00
Course codes: CSE 300, CSE 201, CSE 301, CSE 312, CSE 311
Room assignments: B-1005, B-411, D-702, B-802
Colspan for merged cells (committee meetings)
Professional CSS styling and responsive design
Academic standards formatting

View Complete Class Test →

📝 HTML Forms

1. Basic Form Structure

<form action="submit.php" method="POST">
    <label for="name">Full 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="password">Password:</label>
    <input type="password" id="password" name="password" required>
    
    <button type="submit">Submit</button>
</form>
                

2. Input Types

<!-- Text Inputs -->
<input type="text" placeholder="Enter text">
<input type="email" placeholder="Enter email">
<input type="password" placeholder="Enter password">
<input type="number" min="1" max="100">
<input type="tel" placeholder="Phone number">
<input type="url" placeholder="Website URL">

<!-- Date and Time -->
<input type="date">
<input type="time">
<input type="datetime-local">

<!-- Selection Inputs -->
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="checkbox" name="terms"> Accept Terms

<!-- File Input -->
<input type="file" accept=".jpg,.png,.pdf">

<!-- Other Inputs -->
<input type="range" min="0" max="100" value="50">
<input type="color" value="#ff0000">
                

3. Select and Textarea

<!-- Dropdown Select -->
<select name="department">
    <option value="">Select Department</option>
    <option value="cse">Computer Science</option>
    <option value="eee">Electrical Engineering</option>
    <option value="bba">Business Administration</option>
</select>

<!-- Multiple Select -->
<select name="courses" multiple>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
</select>

<!-- Textarea -->
<textarea name="message" rows="5" cols="50" 
          placeholder="Enter your message"></textarea>
                

4. Complete Student Registration Form

<form action="register.php" method="POST" enctype="multipart/form-data">
    <fieldset>
        <legend>Personal Information</legend>
        
        <label for="fullname">Full Name:</label>
        <input type="text" id="fullname" name="fullname" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="phone">Phone:</label>
        <input type="tel" id="phone" name="phone">
        
        <label for="dob">Date of Birth:</label>
        <input type="date" id="dob" name="dob">
        
        <label>Gender:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label>
    </fieldset>
    
    <fieldset>
        <legend>Academic Information</legend>
        
        <label for="student_id">Student ID:</label>
        <input type="text" id="student_id" name="student_id" required>
        
        <label for="department">Department:</label>
        <select id="department" name="department" required>
            <option value="">Select Department</option>
            <option value="cse">Computer Science & Engineering</option>
            <option value="eee">Electrical & Electronic Engineering</option>
            <option value="bba">Business Administration</option>
        </select>
        
        <label for="photo">Profile Photo:</label>
        <input type="file" id="photo" name="photo" accept="image/*">
    </fieldset>
    
    <fieldset>
        <legend>Additional Information</legend>
        
        <label for="address">Address:</label>
        <textarea id="address" name="address" rows="4"></textarea>
        
        <input type="checkbox" id="terms" name="terms" required>
        <label for="terms">I accept the terms and conditions</label>
        
        <input type="checkbox" id="newsletter" name="newsletter">
        <label for="newsletter">Subscribe to newsletter</label>
    </fieldset>
    
    <button type="submit">Register</button>
    <button type="reset">Reset Form</button>
</form>
                

✅ Lab Manual 2 - Achievements Summary

🎯 Completed Tasks:

✅ Implemented all HTML list types (UL, OL, DL)
✅ Created complex nested list structures
✅ Built professional HTML tables with styling
✅ Used advanced table features (colspan, rowspan)
✅ Completed class test: Teacher routine table
✅ Designed comprehensive HTML forms
✅ Implemented various input types and validation

📊 Skills Developed:

List Mastery: All list types with custom attributes
Table Expertise: Complex layouts with merged cells
Form Creation: Interactive forms with validation
Data Organization: Structured information presentation
Accessibility: Proper labels and semantic structure

🏆 Special Achievement:

Class Test Success: Created a professional teacher routine table matching university standards with advanced HTML table features and responsive CSS styling.

📋 Class 2: Lists, Tables & Forms

Lab Manual 2: Creating Lists, Tables & Forms using HTML Tags

📋 Lab Manual 2 Overview