HTML Form to JSON Object Converter
Convert HTML form markup to a JSON object and back. Supports nested names, arrays, checkboxes, selects, radios, and all input types.
About
Extracting structured data from HTML forms is a routine task that goes wrong in subtle ways. Bracket-notation names like user[address][city] must be parsed into nested objects. Array fields (items[]) must aggregate rather than overwrite. Unchecked checkboxes produce no entry at all. Multi-select elements return arrays while single selects return scalars. Getting any of these cases wrong means your API receives malformed payloads, your validation layer rejects clean data, or - worse - silent data loss reaches your database. This tool implements a standards-compliant form serialization algorithm that handles every standard HTML form element type, including nested name paths of arbitrary depth, radio groups, multi-selects, and boolean coercion for checkboxes.
The reverse operation - hydrating a form from a JSON object - is equally fragile. This converter reconstructs well-formed HTML <input> elements with correct name bracket notation, inferred type attributes, and proper nesting. It approximates structure assuming flat-to-nested mapping. Note: file inputs and complex widget states cannot be round-tripped through JSON. Pro tip: always validate that your server-side parser uses the same bracket-notation convention as your front-end serializer - PHP and Rails differ on trailing-bracket array syntax.
Formulas
The core algorithm converts a flat list of name/value pairs into a nested object using path decomposition.
parse(name) → segments = name.match(/([^\[\]]+)/g)
For each form element el with name and extracted value:
deepSet(obj, segments, value)
Where deepSet iterates through segments[0] … segments[n − 1], creating intermediate containers:
if nextSegment = empty string ("") → container is Array, push value
if nextSegment ∈ Z+ → container is Array, set at index
otherwise → container is Object, set key
Where obj = the root result object, segments = array of path keys extracted from the bracket notation, and value = the extracted element value after type coercion. Type coercion rules: type="number" and type="range" → parseFloat; type="checkbox" without explicit array name → TRUE/FALSE; empty string values are preserved as empty strings, not coerced to NULL.
Reference Data
| Element Type | Name Example | Value Extraction Rule | JSON Output Type |
|---|---|---|---|
| <input type="text"> | username | Read .value | String |
| <input type="number"> | age | Parse .value as Number | Number |
| <input type="checkbox"> | agree | Return TRUE/FALSE from .checked | Boolean |
| <input type="checkbox"> (with value) | colors[] | Collect all checked .values | Array of Strings |
| <input type="radio"> | gender | Read .value of checked radio | String |
| <input type="hidden"> | csrf_token | Read .value | String |
| <input type="email"> | user[email] | Read .value | String (nested) |
| <input type="date"> | dob | Read .value as ISO string | String (ISO 8601) |
| <input type="color"> | theme_color | Read .value as hex | String (#hex) |
| <input type="range"> | volume | Parse .value as Number | Number |
| <input type="password"> | pass | Read .value | String |
| <input type="file"> | avatar | Skipped (no serializable value) | Omitted |
| <textarea> | bio | Read .value | String |
| <select> | country | Read .value of selected option | String |
| <select multiple> | skills[] | Collect all selected .values | Array of Strings |
| Nested name | user[address][city] | Split path → deep-set | Nested Object |
| Array push name | items[] | Append to array | Array |
| Indexed array name | items[0][name] | Set at index → deep-set | Array of Objects |
| Disabled elements | Any | Skipped per HTML spec | Omitted |
| Elements without name | - | Skipped (not submittable) | Omitted |