📝 Form Structure and Attributes

Why Forms Matter

A form is the structured way a web page collects input from a person and hands it off for processing. From a one-field newsletter box to a multi-step insurance application, forms are the primary channel through which users do things on the web rather than just read.

💡 A useful analogy: An HTML form is a digital version of a paper document. Each field is a blank to fill in, each label tells you what belongs there, and the submit button is the moment you drop the completed page into the mailbox. The <form> element is the envelope that keeps all of those fields together and knows the address to send them to.

Get the structure and attributes right and everything downstream — validation, accessibility, server processing, security — becomes far easier. Get them wrong and you ship forms that leak sensitive data into URLs, drop fields silently, or lock out keyboard and screen-reader users.

The Anatomy of a Form

Everything lives inside a single <form> container. That container holds controls (the fields), labels (what each field means), and at least one button to submit. Larger forms group related controls with <fieldset> and <legend>.

The <form> element itself does two jobs: it groups the controls so the browser knows which fields belong to one submission, and it defines the submission behavior through its attributes — where the data goes and how it travels. We'll spend the rest of the lesson on those attributes.

Basic Form Structure

Here is the smallest useful form: two labelled fields and a submit button.

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

  <label for="password">Password</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">Log in</button>
</form>

Notice the pairing pattern that repeats for every control: a <label> whose for matches the input's id, and an <input> whose name is the key the server will read. This label-to-input link is what lets a user click the label text to focus the field, and what lets a screen reader announce "Username, edit text" instead of just "edit text."

The Two Attributes That Matter Most: action & method

The action attribute — where the data goes

The action attribute is a URL: the address the browser sends the form data to when the user submits. It can be an absolute URL or a path relative to the site root.

<form action="/api/contact" method="post">
  <!-- controls -->
</form>

If you omit action, the form submits back to the current page's own URL — handy when the same page both shows and processes the form.

Envelope analogy: action is the mailing address written on the front of the envelope. Without it, the letter just gets returned to sender (the current page).

The method attribute — how the data travels

The method attribute picks the HTTP method used to send the data. The two you'll use constantly are get and post.

<!-- GET: the query ends up in the URL, e.g. /search?q=laptops -->
<form action="/search" method="get">
  <label for="q">Search</label>
  <input type="search" id="q" name="q">
  <button type="submit">Search</button>
</form>

<!-- POST: credentials travel in the body, never the URL -->
<form action="/login" method="post">
  <label for="user">Username</label>
  <input type="text" id="user" name="username">
  <label for="pass">Password</label>
  <input type="password" id="pass" name="password">
  <button type="submit">Log in</button>
</form>

The Supporting Cast: name, enctype, autocomplete & novalidate

The name attribute (on each control)

Although it lives on the individual controls rather than the <form>, the name attribute is what makes a form useful. It is the key under which a field's value is submitted. A control with no name is silently left out of the submission entirely.

<input type="text" name="first_name">
<input type="text" name="last_name">

Submitting the above with values "Ada" and "Lovelace" sends the data set first_name=Ada&last_name=Lovelace. The server reads those keys to know which value is which.

The enctype attribute

enctype controls how the body of a POST request is encoded. You only need to think about it in one situation — file uploads — but that case is mandatory.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="avatar">Profile photo</label>
  <input type="file" id="avatar" name="avatar">
  <button type="submit">Upload</button>
</form>

The autocomplete attribute

Set autocomplete="off" on the form (or a control) to stop the browser from pre-filling remembered values. Leave it on for most fields — modern browsers use specific token values like autocomplete="email" or autocomplete="current-password" to help password managers fill accurately.

<input type="email" name="email" autocomplete="email">
<input type="password" name="password" autocomplete="current-password">

The novalidate attribute

This boolean attribute tells the browser to skip its built-in HTML5 validation on submit. It's occasionally useful while developing, or when you handle all validation yourself in JavaScript — but for most forms you'll want the browser's validation left on.

<form action="/subscribe" method="post" novalidate>
  <input type="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>

How Form Data Flows

When a user submits, a precise sequence of events plays out between the browser and the server. Understanding it demystifies where things can go wrong.

Each control's name and current value become one entry in the data set. The method decides whether that set rides in the URL or the body; the action decides its destination; the enctype decides how it's packaged. Every attribute you just learned is a lever on this one flow.

Worked Example: A Complete Contact Form

Let's assemble everything into a realistic contact form. Read the attributes as a checklist of the decisions we've made: POST because it changes server state, an explicit action, labelled controls, and a mix of input types.

<form action="/api/contact" method="post" autocomplete="on">
  <div class="form-group">
    <label for="name">Your name</label>
    <input type="text" id="name" name="user_name" autocomplete="name" required>
  </div>

  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" id="email" name="user_email" autocomplete="email" required>
  </div>

  <div class="form-group">
    <label for="subject">Subject</label>
    <select id="subject" name="subject">
      <option value="general">General inquiry</option>
      <option value="support">Technical support</option>
      <option value="billing">Billing question</option>
    </select>
  </div>

  <div class="form-group">
    <label for="message">Your message</label>
    <textarea id="message" name="user_message" rows="5" required></textarea>
  </div>

  <div class="form-group">
    <input type="checkbox" id="newsletter" name="newsletter" value="yes">
    <label for="newsletter">Subscribe to our newsletter</label>
  </div>

  <button type="submit">Send message</button>
</form>

user_name=Ada+Lovelace&user_email=ada%40example.com&subject=support&user_message=Hello%21&newsletter=yes

Notice that the unchecked newsletter checkbox would simply be absent from the data — checkboxes only submit their value when checked. That's a small but important quirk to remember when your server reads the results.

Hands-on Exercise

<form action="/register" method="post">
  <label for="fullname">Full name</label>
  <input type="text" id="fullname" name="full_name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" autocomplete="email" required>

  <label for="password">Password</label>
  <input type="password" id="password" name="password"
         autocomplete="new-password" required>

  <label for="plan">Plan</label>
  <select id="plan" name="plan">
    <option value="free">Free</option>
    <option value="pro">Pro</option>
  </select>

  <input type="checkbox" id="terms" name="terms" value="agreed" required>
  <label for="terms">I agree to the terms of service</label>

  <button type="submit">Create account</button>
</form>

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — The <form> element
• MDN — Web Forms guide
• web.dev — Learn Forms

🚀 What's Next?

Now that the container and its attributes make sense, the next lesson zooms in on the fields themselves — the full range of input types (email, number, date, color, and more) and the attributes that shape how each one behaves and validates.