Form Data & Name-Value Pairs

Technical Deep Dive & Specifications

The WHATWG "Submittable Elements"

Not all HTML elements participate in form submission. The WHATWG specification defines a strict category of submittable elements:

• <button> (only if it is the submitter button that triggered submission)
• <input> (types: text, password, checkbox, radio, hidden, email, url, number, date, etc.)
• <select> (selected <option> values)
• <textarea> (raw text value)
• <object> (legacy plugin data)

                              HTMLElement
                                   ▲
                                   │
                           Form-Associated
                                   ▲
                                   │
                           Submittable Elements
               ┌───────────┬───────┴───────┬────────────┐
             <button>   <input>        <select>    <textarea>

The Entry List Construction Algorithm

When a form is submitted, the browser executes the Form Data Construction Algorithm:

1. Initialize: Create an empty list of name-value pairs called the entry list.
2. Iterate Controls: Traverse all submittable elements within form.elements in DOM tree order.
3. Filter Out Disqualified Controls:
   • Element is disabled (disabled attribute is present) ❌
   • Element has no name attribute or name="" (empty string) ❌
   • Element is a button, but NOT the button that initiated the submit ❌
   • Element is <input type="checkbox"> or <input type="radio"> and is NOT checked ❌
   • Element is <input type="file"> with no file selected ❌
4. Append Entries: For each qualifying element, take its name string and its current value string, and append the pair (name, value) to the entry list.

URL Percent-Encoding Mechanics (application/x-www-form-urlencoded)

In the default encoding format, name-value pairs are concatenated using the ampersand (&) delimiter, and keys are joined to values with the equals sign (=):

key1=value1&key2=value2&key3=value3

Because characters like &, =, ?, /, spaces, and non-ASCII glyphs have structural meaning in URLs, the browser converts them using Percent-Encoding:

Example Serialization Walkthrough:

<form>
  <input name="user name" value="Ada Lovelace">
  <input name="formula" value="A = B & C">
  <input name="city" value="São Paulo">
</form>

Serialized Wire String:

user+name=Ada+Lovelace&formula=A+%3D+B+%26+C&city=S%C3%A3o+Paulo

Multi-Value Inputs and Array Keys

What happens if multiple inputs share the same name?

<input type="checkbox" name="hobbies" value="reading" checked>
<input type="checkbox" name="hobbies" value="coding" checked>
<input type="checkbox" name="hobbies" value="gaming" checked>

Serialized Output:

hobbies=reading&hobbies=coding&hobbies=gaming

• In standard HTTP specifications, duplicate keys are completely valid.
• Some backend frameworks (PHP, Ruby on Rails) require explicit bracket notation (name="hobbies[]") to automatically parse duplicates into an array.
• Python (Django, FastAPI), Node.js (Express with extended: true), and Go can parse duplicate keys directly or via bracket conventions.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 28 (name="full_name" value="Jane & Tarzan @ Jungle"): Contains spaces, ampersands, and at-symbols to demonstrate percent-encoding transformations.
• Line 33 (<input type="text" id="noNameInput" ...>): Purposely lacks a name attribute. During entry list construction, the browser ignores this field entirely.
• Line 38–40 (name="skills"): Multiple checkboxes sharing the identical name attribute. Only checked boxes are added to the entry list as independent key-value entries.
• Line 57 (new FormData(form)): Instantiates the standard browser FormData object, automatically executing the WHATWG entry list construction algorithm.
• Line 65 (new URLSearchParams(formData).toString()): Converts the entry list into an application/x-www-form-urlencoded query string.

Expected Browser Render Output

Form Data Serialization Inspector
[ Candidate Profile Fieldset ]
Full Name: [ Jane & Tarzan @ Jungle ]
Input with NO name: [ I will not be serialized! ]
Selected Skills: [x] HTML5  [x] CSS3  [ ] WebAssembly
[ Inspect Serialized Payload ]

Live Serialization Output
--- 1. Parsed Entry List (Key -> Value) ---
  • "full_name" => "Jane & Tarzan @ Jungle"
  • "skills" => "HTML5"
  • "skills" => "CSS3"

--- 2. Raw URL-Encoded Wire Payload ---
full_name=Jane+%26+Tarzan+%40+Jungle&skills=HTML5&skills=CSS3