HTML Exercise: Build a Contact Form

A good contact form asks only for information needed to reply. Each field needs a label, useful name, and clear requirement status. Use this as a chance to build something rather than just read about it. There is no need to remember every tag immediately.

What You Need to Know

The browser can check required fields, but the server must still validate and safely process the message. An action URL is only a destination, not an implemented email service.

Try solving the task before checking the example. It is fine to make mistakes: each browser refresh gives you another chance to see what the markup actually does.

Example: See It in Action

Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<form action="/contact" method="post">
    <label for="contact-name">Your name</label>
    <input id="contact-name" name="name" required>
    <label for="contact-message">Message</label>
    <textarea id="contact-message" name="message" required></textarea>
    <button type="submit">Send message</button>
</form>

Let’s Understand the Example

• Form groups controls that send named values to an endpoint when submitted.
• Label tells people what a control is for. For connects the label to the control with the matching id.
• Input creates a form control. Its type decides whether people type text, choose a date, move a slider and more.
• Action names the destination where the browser sends a form submission. A real server handler must exist there.
• Method controls how a form submits; GET makes values part of the URL, while POST sends them in the request body.
• For links a label to the input whose id matches, so clicking the label can focus the control.

The browser can submit values with keys such as name, message. A control without a name normally contributes no entry. Whether the submission produces a result depends on the action URL and the server behind it.

What Should You See?

The page should include “Your name”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.

Try to explain the example to someone else in two sentences. If one line is mysterious, inspect that line instead of copying it blindly.

Try It Yourself

1. Add an email field and explain how the server will know which key contains it.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Publishing a contact form without any server endpoint or confirmation handling.
• A page may appear fine while containing mistakes. Inspect the source and use a validator to check what you wrote.

Key Takeaways

• A good contact form asks only for information needed to reply.
• Form groups controls that send named values to an endpoint when submitted.
• The browser can check required fields, but the server must still validate and safely process the message. An action URL is only a destination, not an implemented email service.