The form Tag

The <form> element wraps every field that belongs to one submission, and declares where and how that data gets sent.

Syntax

<form action="/submit-url" method="post" enctype="multipart/form-data">
    ...fields...
</form>

Basic Example

<form action="/login" method="post">
    <label for="username">Username</label>
    <input type="text" id="username" name="username" required>
    <button type="submit">Log In</button>
</form>

Browser output: a text field and a button; clicking "Log In" (or pressing Enter inside the field) collects every named field inside the form and sends it as a POST request to /login.

How It Works

1. Every <input>, <select>, and <textarea> nested inside a <form> (or associated with it via the form attribute) becomes part of that form's submitted data.
2. Submitting happens either by clicking a <button type="submit">, or by pressing Enter while focus is inside a text field.
3. The browser packages all named fields' values and sends them to action, using the HTTP method in method.

Important Attributes

Real-World Example

<form action="/upload-resume" method="post" enctype="multipart/form-data">
    <label for="resume">Upload your resume</label>
    <input type="file" id="resume" name="resume" accept=".pdf">
    <button type="submit">Upload</button>
</form>

A file-upload form — note the required enctype="multipart/form-data", without which a file input's actual file content never gets sent at all.

Common Mistakes

• Forgetting enctype="multipart/form-data" on any form containing a file input — the file simply won't upload without it
• Leaving out method, which silently defaults to GET — fine for a search box, risky for anything sensitive like a password

Best Practices

• Always set method explicitly rather than relying on the default
• Set enctype="multipart/form-data" on any form that includes a file input

Accessibility Considerations

A real <form> lets a screen reader announce it as a form landmark, and lets keyboard users submit naturally by pressing Enter — both lost if a form is faked with unrelated <div>s.

SEO Considerations

No direct ranking effect, though a broken or inaccessible contact/lead form directly hurts conversion — a real business outcome even if not a ranking factor.

Browser & Modern HTML Notes

Behavior is stable and consistent across all modern browsers; the novalidate attribute and the full set of HTML5 input types are the main additions since earlier HTML versions.

Mini Practice

1. Build a login form with method="post" and a real action.
2. Add file upload support to a form, remembering the required enctype.

Related HTML Notes

• Forms (overview)
• form-action
• form-method