HTML Exam 2: Forms and Advanced Tables | 20 Practical Challenges

Exercise 1 Merging Table Cells (Colspan & Rowspan)

Create a table that includes:

A header cell spanning two columns (`colspan=\"2\"`) titled “Employee Data”.
In the next rows, a cell spanning two rows (`rowspan=\"2\"`) with the department “IT”.
Add a border to the table.

Solution

<table border="1">
    <tr>
        <th colspan="2">Employee Data</th>
    </tr>
    <tr>
        <td rowspan="2">IT</td>
        <td>Ahmed</td>
    </tr>
    <tr>
        <td>Sara</td>
    </tr>
</table>

Exercise 2 Dropdown Lists (Select & Option)

Create a country dropdown:

Include 3 options (Egypt, Saudi Arabia, Morocco).
Make the first option “Choose your country” disabled and selected by default.
Add `name=\"country\"` to the select.

Solution

<select name="country">
    <option value="" disabled selected>Choose your country</option>
    <option value="eg">Egypt</option>
    <option value="sa">Saudi Arabia</option>
    <option value="ma">Morocco</option>
</select>

Exercise 3 Radio Buttons & Checkboxes

Create a form that includes:

Gender selection (Male/Female) using radio buttons.
Hobbies selection (Reading/Travel) using checkboxes.
Add labels for each option.

Solution

<!-- Radio Buttons -->
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>

<br>

<!-- Checkboxes -->
<label><input type="checkbox" name="hobby1" value="reading"> Reading</label>
<label><input type="checkbox" name="hobby2" value="travel"> Travel</label>

Exercise 4 Modern Input Types (HTML5 Inputs)

Use the appropriate input fields:

Birth date (`date`).
Favorite color (`color`).
A rating from 1 to 10 (`range`).
Add labels for each field.

Solution

<label>Birth date: <input type="date" name="birthdate"></label>
<br>
<label>Favorite color: <input type="color" name="favcolor"></label>
<br>
<label>Rating: <input type="range" name="rating" min="1" max="10"></label>

Exercise 5 Description Lists

Create a description list that defines terms:

HTML: HyperText Markup Language.
CSS: Cascading Style Sheets.
Use `dl`, `dt`, and `dd` correctly.

Solution

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language.</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets.</dd>
</dl>

Exercise 6 Quotations

Use quotation tags:

Use `blockquote` to display a quote with a source (`cite`).
Use `q` for a short quote inside a paragraph.
Add a `cite` element to reference the source.

Solution

<blockquote cite="https://example.com">
    Programming is the art of thinking.
</blockquote>

<p>The teacher said: <q>Knowledge is light</q> and we believe it.</p>

<p>From the book <cite>Learn Programming</cite></p>

Exercise 7 Embeds (Iframes)

Embed external content:

Embed example.com using an iframe.
Set the dimensions to 400x300 pixels.
Add a descriptive `title` for the iframe.

Solution

<iframe 
    src="https://www.example.com" 
    width="400" 
    height="300" 
    title="External website">
</iframe>

Exercise 8 Figures & Captions (Figure & Figcaption)

Use semantic elements for images:

Use `figure` to display “chart.png”.
Add a `figcaption` titled “Sales Statistics”.
Add appropriate alt text for the image.

Solution

<figure>
    <img src="chart.png" alt="Sales chart">
    <figcaption>Sales Statistics</figcaption>
</figure>

Exercise 9 Meta Tags

Write the required meta tags:

Set the viewport for mobile devices.
Add a page description.
Add keywords.

Solution

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the page content">
<meta name="keywords" content="HTML, CSS, JavaScript">

Exercise 10 Interactive Elements (Details & Summary)

Create collapsible content:

Use `details` and `summary`.
Set the title to “Read more”.
Add a paragraph inside the hidden content.

Solution

<details>
    <summary>Read more</summary>
    <p>This text appears only when the summary is clicked.</p>
</details>

Exercise 11 Advanced Textarea Intermediate

Create an advanced textarea:

Set it to 50 columns and 10 rows.
Add the placeholder “Write your message here”.
Make it required.
Set the max length to 500 characters.

Solution

<textarea 
    cols="50" 
    rows="10" 
    placeholder="Write your message here" 
    required 
    maxlength="500"
    name="message">
</textarea>

Exercise 12 Fieldset & Legend Intermediate

Group a form using fieldset:

Create a fieldset for personal information.
Add a legend titled “Personal Information”.
Inside it, add name and email fields.

Solution

<fieldset>
    <legend>Personal Information</legend>
    
    <label>Name: <input type="text" name="name"></label>
    <br>
    <label>Email: <input type="email" name="email"></label>
</fieldset>

Exercise 13 Optgroup in Dropdowns Intermediate

Group options in a dropdown list:

Create a `select` for cars.
Group options under “German Cars” and “Japanese Cars”.
Add at least two options in each group.

Solution

<select name="cars">
    <optgroup label="German Cars">
        <option value="bmw">BMW</option>
        <option value="audi">Audi</option>
    </optgroup>
    <optgroup label="Japanese Cars">
        <option value="toyota">Toyota</option>
        <option value="honda">Honda</option>
    </optgroup>
</select>

Exercise 14 Output Element Intermediate

Use `output` to display a result:

Create a form with two numeric fields (a and b).
Add an output to display their sum.
Use `oninput` to update the result automatically.

Solution

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0"> =
    <output name="result" for="a b">0</output>
</form>

Exercise 15 Advanced Table with Caption Intermediate

Create a professional table:

Add a caption titled “Student List”.
Use `colgroup` to style columns.
Add `thead`, `tbody`, and `tfoot`.

Solution

<table border="1">
    <caption>Student List</caption>
    <colgroup>
        <col style="background-color:lightblue">
        <col style="background-color:lightgreen">
    </colgroup>
    <thead>
        <tr><th>Name</th><th>Score</th></tr>
    </thead>
    <tbody>
        <tr><td>Ahmed</td><td>90</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Total</td><td>90</td></tr>
    </tfoot>
</table>

Exercise 16 Complete Registration Form Advanced

Create a full registration form:

Fields: name, email, password, confirm password.
Use `autocomplete=\"off\"` for the password fields.
Add a pattern for email validation.
Add a required checkbox to accept terms.

Solution

<form action="/en/register" method="POST">
    <label>Name: <input type="text" name="name" required></label><br>
    
    <label>Email: 
        <input type="email" name="email" 
               pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
    </label><br>
    
    <label>Password: 
        <input type="password" name="password" autocomplete="off" required>
    </label><br>
    
    <label>Confirm password: 
        <input type="password" name="confirm" autocomplete="off" required>
    </label><br>
    
    <label>
        <input type="checkbox" name="terms" required>
        I agree to the terms and conditions
    </label><br>
    
    <button type="submit">Register</button>
</form>

Exercise 17 Complex Data Table Advanced

Create a student grades table:

Use `colspan` and `rowspan` together.
Add `scope` to headers (col/row).
Organize data in `thead`, `tbody`, and `tfoot`.

Solution

<table border="1">
    <thead>
        <tr>
            <th rowspan="2" scope="col">Student</th>
            <th colspan="2" scope="colgroup">Grades</th>
        </tr>
        <tr>
            <th scope="col">Term 1</th>
            <th scope="col">Term 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Ahmed</th>
            <td>85</td>
            <td>90</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Average</th>
            <td colspan="2">87.5</td>
        </tr>
    </tfoot>
</table>

Exercise 18 Advanced Search Form Advanced

Create a robust search form:

Use `input type=\"search\"` with `autofocus`.
Add a `datalist` for suggestions.
Add a reset button (`type=\"reset\"`).
Use `method=\"GET\"`.

Solution

<form action="/en/search" method="GET">
    <input type="search" 
           name="q" 
           list="suggestions" 
           placeholder="Search..." 
           autofocus>
    
    <datalist id="suggestions">
        <option value="HTML">
        <option value="CSS">
        <option value="JavaScript">
    </datalist>
    
    <button type="submit">Search</button>
    <button type="reset">Reset</button>
</form>

Exercise 19 File Upload Form Advanced

Create a file upload form:

Use `input type=\"file\"` with `accept` for images only.
Allow multiple files (`multiple`).
Use `enctype=\"multipart/form-data\"`.
Add a max file size in HTML.

Solution

<form action="/en/upload" method="POST" enctype="multipart/form-data">
    <label>Choose images:
        <input type="file" 
               name="photos" 
               accept="image/*" 
               multiple
               required>
    </label>
    
    <!-- Note: max file size is enforced on the server -->
    <input type="hidden" name="MAX_FILE_SIZE" value="5000000">
    
    <button type="submit">Upload</button>
</form>

Exercise 20 Project: Complete Survey Form Advanced

Create a full survey form that includes:

Personal info (fieldset): name, age, gender.
Ratings (range inputs): service quality, speed.
Multiple choices (checkboxes): favorite features.
Comments (textarea): additional notes.
Use best practices (labels, required, validation).

Solution

<form action="/en/survey" method="POST">
    <fieldset>
        <legend>Personal Information</legend>
        <label>Name: <input type="text" name="name" required></label><br>
        <label>Age: <input type="number" name="age" min="18" max="100"></label><br>
        <label><input type="radio" name="gender" value="m"> Male</label>
        <label><input type="radio" name="gender" value="f"> Female</label>
    </fieldset>
    
    <fieldset>
        <legend>Ratings</legend>
        <label>Service quality: 
            <input type="range" name="quality" min="1" max="10" value="5">
        </label><br>
        <label>Speed: 
            <input type="range" name="speed" min="1" max="10" value="5">
        </label>
    </fieldset>
    
    <fieldset>
        <legend>Favorite Features</legend>
        <label><input type="checkbox" name="features[]" value="design"> Design</label><br>
        <label><input type="checkbox" name="features[]" value="speed"> Speed</label><br>
        <label><input type="checkbox" name="features[]" value="support"> Support</label>
    </fieldset>
    
    <label>Additional notes:
        <textarea name="comments" rows="5" cols="50" placeholder="Write your notes..."></textarea>
    </label><br>
    
    <button type="submit">Submit survey</button>
</form>

DevArabi

HTML Course

HTML Exam 2: Advanced Forms and Tables (20 Practical Challenges)

HTML Exam 2: Intermediate

DevArabi

HTML Course

HTML Exam 2: Advanced Forms and Tables (20 Practical Challenges)

HTML Exam 2: Intermediate

Smart Editor