{ } JSON Workbench0 network requests. Check DevTools

"Form to JSON":{ }

Paste an HTML form and get a clean JSON array of its fields: names, types, values, options, and flags. Great for scaffolding schemas, API shapes, or test fixtures. Runs 100% in your browser: zero network requests, so your markup never leaves the page.

What is a form to JSON converter?

A form-to-JSON converter reads an HTML <form> and turns its controls into a structured JSON list, one entry per field with its name, type, default value, options, and flags. It's handy when you're moving a hand-written form into a framework, generating a validation schema or API request shape from existing markup, or building test fixtures. Everything runs in your browser, so proprietary form markup never leaves your machine.

Fields it captures

  • input: name, type (defaults to text), value, placeholder, and required/checked flags.
  • select: the option list (value + label) and the selected value.
  • textarea: name and inner text as the value.

How to use

  1. Paste your HTML <form> markup into the Input pane.
  2. A JSON array describing each field, name, type, value, options, and flags, appears instantly.
  3. Controls without a name (like a submit button) are skipped, since they don't submit.
  4. Copy the JSON or use Download to save it. Your markup is never modified.
  5. Runs entirely in your browser; verify zero network calls in DevTools.

Examples

Inputs → JSON fields

Input
<input name="email" type="email" required>
<input name="age" type="number">
Output
[
  { "name": "email", "type": "email", "required": true },
  { "name": "age", "type": "number" }
]

Select with options

Input
<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro</option>
</select>
Output
[
  {
    "name": "plan",
    "type": "select",
    "value": "pro",
    "options": [
      { "value": "free", "label": "Free" },
      { "value": "pro", "label": "Pro" }
    ]
  }
]

Checkbox and textarea

Input
<input type="checkbox" name="subscribe" checked>
<textarea name="bio">Hi</textarea>
Output
[
  { "name": "subscribe", "type": "checkbox", "checked": true },
  { "name": "bio", "type": "textarea", "value": "Hi" }
]

FAQ

What does this tool output?

A JSON array with one object per named form control, in document order. Each object has the field's name and type, plus value, placeholder, required, checked, or options when present. It's a schema of the form, not submitted data.

Which controls are supported?

<input> (every type), <select> with its <option> list and selected value, and <textarea> with its text. Controls without a name attribute are skipped because browsers don't submit them.

Does it run the form or fetch anything?

No. It parses the markup as text, entirely in your browser. Nothing is submitted, executed, or uploaded, check DevTools for zero network requests.

Can I use this to scaffold an API or validation schema?

Yes. The field list is a convenient starting point for a request body shape, a validation schema, or test fixtures. Pair it with the JSON Schema generator to turn a sample payload into a schema.

My markup is messy, will it still work?

It tolerates extra whitespace and both single- and double-quoted attributes. Very unusual markup (attributes containing >, or controls split oddly) may parse imperfectly; clean, standard form markup works best.

Related tools