What a form does

Which controls are submitted

Identify successful form controls and understand why disabled, unnamed, unchecked, or unselected controls may be absent from submitted data.

8 minute lesson

~~~

A submitted form does not include every control inside it. The browser builds the data set from successful controls.

Consider this form:

<form action="/preferences" method="post">
  <input name="displayName" value="Ada">
  <input value="not sent">
  <input name="accountId" value="42" disabled>

  <label>
    <input name="newsletter" type="checkbox" value="yes">
    Join the newsletter
  </label>

  <button name="action" value="save">Save</button>
</form>

The browser sends displayName=Ada. It does not send the unnamed input. It omits the disabled input and the unchecked checkbox. It includes action=save only when that submit button initiated submission.

This matters on the server. Missing newsletter might mean “not selected,” but a missing required displayName is an error. Treat absence according to the endpoint contract instead of turning every missing value into an empty string.

Do not use disabled to protect an important value. A visitor can change the HTML or construct a request by hand. If the server already knows the account ID from the authenticated session or route, use that trusted value rather than accepting it from the form.

readonly behaves differently from disabled: a read-only text control is normally submitted. It can be useful for a visible value, but the server must still verify it.

Try checking the newsletter box and submitting with the Network panel open. Compare both payloads.

Lesson completed