Module 10: HTML Forms Fundamentals
name, value, and Successful Form Controls
Understand which controls are included when a form is submitted and how name/value pairs are constructed.
A form submits data as name/value pairs. The name attribute supplies the key, and the current control value supplies the value.
<form action="/preferences/" method="get">
<label for="display-name">Display name</label>
<input id="display-name" name="displayName" value="Sam">
<label>
<input type="checkbox" name="weeklyDigest" value="yes" checked>
Send a weekly digest
</label>
<button type="submit">Save preferences</button>
</form>
When submitted with GET, the checked values might be encoded in the query string. Controls without a name are not submitted. Disabled controls are not submitted. An unchecked checkbox or radio button is not submitted. A button contributes a value only when it is the submitter and has the appropriate name/value attributes.
id identifies an element in the document. It is used by labels, fragments, CSS, and scripts. name identifies a field in the submitted data. Many forms need both.
Use the Network panel to inspect a form submission. You can see the request method, URL, headers, and submitted data. This is a useful way to understand why a field is missing.