HTML Interactive Elements Exercise: Build a Settings Panel

Small interactions can make a webpage easier to use: opening a tip, changing a setting, or reusing an interface component.

What You Need to Know

A settings panel often needs a few native controls and a clear Save action, not a complicated component library. Group related settings and make the result of saving easy to understand.

In this example: build an FAQ plus preference modal.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<h1>Settings</h1>
<form action="/settings" method="post">
    <label for="theme-choice">Theme</label>
    <select id="theme-choice" name="theme">
        <option value="light">Light</option>
        <option value="dark">Dark</option>
    </select>
    <label><input type="checkbox" name="email-updates" value="yes"> Email updates</label>
    <button type="submit">Save settings</button>
</form>

Let’s Read the Code

<h1>: A top-level heading explains what the page is about.
<form>: The form groups controls and identifies where submitted data goes.
for: For connects a label or output with a control by ID.
id: An id uniquely identifies an element on this page.

What the example shows: A useful settings panel can begin with a native select, a checkbox, and a submit button—no custom components needed.

What Happens in the Browser?

When this example includes JavaScript, it supplies behavior that ordinary HTML does not automatically provide. Always think about a fallback.

Start with native behavior. Details, dialog, and popover each solve a different interface problem. Choose the simplest control that actually matches what a visitor wants to do, then test focus and dismissal as well as appearance.

Your Turn

Add a second checkbox and list the values submitted when it is unchecked.

Common Beginner Mistakes

Assuming new HTML syntax works in every browser without testing.
Saving settings requires a server or client storage logic, not HTML alone.

Key Takeaways

A settings panel often needs a few native controls and a clear Save action, not a complicated component library.
<h1>: A top-level heading explains what the page is about.
Test the behavior you expect rather than trusting how the snippet looks in your editor.