The name Attribute Deep Dive

Technical Deep Dive & Specifications

The Submittable Element Pipeline

When a form is submitted or passed to new FormData(form), the browser runs the WHATWG submittable element algorithm. An element is only included in the submission payload if ALL of the following criteria are met:

                  ┌─────────────────────────────────────┐
                  │ Candidate Form-Associated Element   │
                  └──────────────────┬──────────────────┘
                                     │
           Is the element disabled?  ───[YES]──► [IGNORED (Not submitted)]
                                     │ [NO]
         Does it have a `name`?     ───[NO]───► [IGNORED (Not submitted)]
                                     │ [YES]
       Is name empty string ("")?   ───[YES]──► [IGNORED (Not submitted)]
                                     │ [NO]
     Is it an unchecked checkbox/radio? ─[YES]─► [IGNORED (Not submitted)]
                                     │ [NO]
                                     ▼
                      ┌─────────────────────────────┐
                      │ ENCODE & APPEND TO PAYLOAD  │
                      │   `name=encode(value)`      │
                      └─────────────────────────────┘

[!WARNING] If a developer writes <input id="user-email" type="email" value="[email protected]"> without a name attribute, the value "[email protected]" will never reach the server or appear in FormData.

Wire Encoding Formats

1. application/x-www-form-urlencoded (Default for GET / POST)

Keys and values are URI-encoded, spaces are converted to + or %20, and pairs are separated by &:

POST /api/register HTTP/1.1
Content-Type: application/x-www-form-urlencoded

username=alex+smith&email=alex%40example.com&tier=pro

2. multipart/form-data (Required for file uploads)

Each input is transmitted in a distinct boundary-delimited section:

--WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="username"

alex smith
--WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="avatar"; filename="photo.jpg"
Content-Type: image/jpeg

[BINARY JPEG DATA]
--WebKitFormBoundary7MA4YWxkTrZu0gW--

Advanced Naming Architectures

1. Array Serialization with name="key[]"

When collecting multiple values for the same logical attribute (such as multi-selects, multiple checkboxes, or dynamic list items), append empty square brackets [] to the name:

<input type="checkbox" name="roles[]" value="admin" checked>
<input type="checkbox" name="roles[]" value="editor" checked>
<input type="checkbox" name="roles[]" value="billing">

Wire Payload: roles%5B%5D=admin&roles%5B%5D=editor

Backend Parsing:

• PHP: Automatically parses into $_POST['roles'] = ['admin', 'editor'].
• Node.js (Express with extended: true): Parses via qs into req.body.roles = ['admin', 'editor'].
• Ruby on Rails & Django: Automatically constructs an array list.

2. Nested Object & Dictionary Notation name="parent[child]"

To submit structured hierarchical data without manual client-side JSON serialization, use nested bracket notation:

<input type="text" name="customer[name]" value="Sarah Connor">
<input type="text" name="customer[address][city]" value="Los Angeles">
<input type="text" name="customer[address][zip]" value="90001">

Wire Payload: customer%5Bname%5D=Sarah+Connor&customer%5Baddress%5D%5Bcity%5D=Los+Angeles&customer%5Baddress%5D%5Bzip%5D=90001

Parsed Object on Server (req.body):

{
  "customer": {
    "name": "Sarah Connor",
    "address": {
      "city": "Los Angeles",
      "zip": "90001"
    }
  }
}

Attribute Comparison Matrix: id vs name

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 52–63 (name="client[name]" & name="client[email]"): Constructs a nested dictionary structure. The backend parser converts this to { client: { name: "...", email: "..." } }.
• Lines 71–79 (name="items[0][desc]" & name="items[1][desc]"): Uses indexed array of objects notation. This enables multi-row invoice line items to be processed as indexed collections on the server.
• Lines 84–88 (name="tags[]"): The empty square brackets tell backend frameworks to collect all checked checkboxes into a single array: ['vat_exempt', 'b2b'].
• Lines 105–118 (FormData inspection script): Iterates over the FormData object. Notice how every single key in the output matches the name attribute string exactly.

Expected Browser Render Output

=== URL-ENCODED QUERY STRING ===
client%5Bname%5D=Acme+Corp&client%5Bemail%5D=billing%40acme.com&items%5B0%5D%5Bdesc%5D=Web+Development&items%5B0%5D%5Bamount%5D=2500&items%5B1%5D%5Bdesc%5D=Cloud+Hosting+Setup&items%5B1%5D%5Bamount%5D=400&tags%5B%5D=vat_exempt&tags%5B%5D=b2b

=== FORMDATA ENTRIES (KEY -> VALUE) ===
client[name]             => Acme Corp
client[email]            => [email protected]
items[0][desc]           => Web Development
items[0][amount]         => 2500
items[1][desc]           => Cloud Hosting Setup
items[1][amount]         => 400
tags[]                   => vat_exempt
tags[]                   => b2b