Content · Web Development · HTML

HTML <form> Element: Reference and Examples

Learn <form> element reference with a clear explanation, practical HTML markup, a walkthrough and common mistakes to avoid.

1 views Published Oct 19, 2026 Updated Oct 19, 2026 Admin

You might see <form> Element reference while reading someone else’s HTML, or need it while building a page of your own. Instead of memorizing a definition, look at a working example and see when the element makes sense.

The Idea in Plain English


Collects named controls for submission. action selects the receiver; method chooses how data is transported. A server is needed to process real submissions.

For a reference page, pay attention to where the element is allowed, whether it needs a closing tag, and what other elements it can contain.

A Working Example


Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<form action="/contact" method="post">
    <label for="visitor-name">Name</label>
    <input id="visitor-name" name="visitor_name" required>
    <button type="submit">Send</button>
</form>

What Each Part Does


  • The form collects and submits named fields to the destination specified by action.
  • The label tells visitors and assistive tools what a control is for.
  • The input creates a field; its type changes the editing controls and the name identifies submitted data.
  • for connects a visible label to the control with the same ID.
  • action sets the URL that receives a submitted form.
  • method chooses GET or POST for form submission.

The browser checks the required field and submits it to /contact when valid.

Try It Yourself


Try replacing the example content with your own while keeping the valid HTML structure.

Common Beginner Mistakes


  • Forgetting the name attribute or relying on HTML alone to store messages.
  • Changing several parts of the example at once, making it difficult to see which part caused a different result.
  • Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways


  • Collects named controls for submission. action selects the receiver; method chooses how data is transported. A server is needed to process real submissions.
  • The browser checks the required field and submits it to /contact when valid.
  • Test the markup in a browser, and check accessibility and real-world behavior where relevant.
Share this resourceSend this page to someone who may find it useful.