---
name: "up.Params.fromForm"
area: "API"
kind: "Class method"
parent: "up.Params class"
url: "https://unpoly.com/api/up.Params.fromForm"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.Params class](https://unpoly.com/api/up.Params.md)</nav>

# up.Params.fromForm(form, [options])

Constructs a new [`up.Params`](https://unpoly.com/api/up.Params.md) instance from the given `<form>`.

The returned params may be passed as `{ params }` option to [`up.request()`](https://unpoly.com/api/up.request.md) or [`up.render()`](https://unpoly.com/api/up.render.md).

The params are built with the browser's own [form-data algorithm](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData), so they contain exactly what a regular form submission would send:

- All `<input>` types are supported.
- Field values are usually strings, but an `<input type="file">` will produce [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) values.
- An `<input type="radio">` or `<input type="checkbox">` is only added if it is checked.
- A `<select>` adds every selected option.
- Fields that are disabled, or inside a `<fieldset disabled>`, are ignored.
- Fields without a `[name]` attribute are ignored.
- Fields [outside the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form) that reference it with a `[form]` attribute are included.
- [Form-associated custom elements](https://unpoly.com/learn/custom-form-fields.md#form-associated) are included.
- Values appended by a [`formdata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event) event listener are included.
- The [submit button](#submit-button) contributes its `[name]` and `[value]`.

On top of that, [elements registered as fields](https://unpoly.com/learn/custom-form-fields.md#registering) in [`up.form.config.fieldSelectors`](https://unpoly.com/api/up.form.config.md#config.fieldSelectors) are included. The browser cannot know about those.

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Submit buttons](#submit-button)
- [Disabled fields](#disabled-fields)
- [Parameters](#parameters)
- [Return value](#return-value)

</nav>

## Example {#example}

Given this HTML form:

```html
<form id="signup">
  <input type="text" name="email" value="foo@bar.com">
  <input type="password" name="pass" value="secret">
</form>
```

This serializes the form into params:

```js
let params = up.Params.fromForm(document.querySelector('#signup'))
let email = params.get('email') // email is now 'foo@bar.com'
let pass = params.get('pass') // pass is now 'secret'
```

## Submit buttons {#submit-button}

A submit button only contributes params when it is the one that submitted the form. Pass the button as a `{ submitButton }` option, or `false` to submit no button at all. Without the option the first submit button is assumed, which is also what a browser does when the user submits from a field by pressing `Enter`.

The button must belong to the form. Like the browser's [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData), `up.Params.fromForm()` throws an error for a button of another form.

## Disabled fields {#disabled-fields}

Like in a browser submission, a disabled field contributes no params. The exceptions are fields and buttons that a [preview](https://unpoly.com/api/up.Preview.prototype.disable.md) disabled while a request is loading, e.g. with [`[up-disable]`](https://unpoly.com/api/up-submit.md#up-disable). These still count as part of the form, so a second submission sends the same params as the first one.

---

## Parameters {#parameters}

### form {#form}

(required)

A `<form>` element.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)

### [options.submitButton] {#options.submitButton}

(optional)

The submit button that submitted the form.

The button must belong to the form, or an error is thrown. Pass `false` to include no submit button.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | false

---

## Return value {#return-value}

A new [`up.Params`](https://unpoly.com/api/up.Params.md) instance with values from the given form.

Type: [up.Params](https://unpoly.com/api/up.Params.md)