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

# `up.form`

Features to submit and validate forms without a full page load.

Set an [`[up-submit]`](https://unpoly.com/api/up-submit.md) attribute to let Unpoly handle a form, or call [`up.submit()`](https://unpoly.com/api/up.submit.md) from JavaScript. The [`up:form:submit`](https://unpoly.com/api/up:form:submit.md) event lets your code observe or prevent any submission.

To render a new form state while the user is still typing, mark fields with [`[up-validate]`](https://unpoly.com/api/up-validate.md). This shows validation errors as the user moves through the form, and can update other fields that depend on the changed value. [`[up-switch]`](https://unpoly.com/api/up-switch.md) shows, hides or disables other elements depending on a field's value, without a server request. [`[up-autosubmit]`](https://unpoly.com/api/up-autosubmit.md) submits the form whenever a field changes, and [`up.watch()`](https://unpoly.com/api/up.watch.md) runs your own callback instead.

<nav aria-label="Guides">

- [Learn: Forms](https://unpoly.com/learn/forms.md)

</nav>

---

## Features {#features}

- ### [up.autosubmit(element, [options])](https://unpoly.com/api/up.autosubmit.md) (JavaScript function)

  Automatically submits a form when a field changes.

- ### [[up-autosubmit]](https://unpoly.com/api/up-autosubmit.md) (HTML attribute)

  Automatically submits a form when a field changes.

- ### [[up-disable-for]](https://unpoly.com/api/up-disable-for.md) (HTML attribute)

  Disables this element while an input field with `[up-switch]` has one of the given values.

- ### [[up-enable-for]](https://unpoly.com/api/up-enable-for.md) (HTML attribute)

  Enables this element while an input field with `[up-switch]` has one of the given values.

- ### [[up-fieldset]](https://unpoly.com/api/up-fieldset.md) (HTML attribute) (deprecated)

  Marks this element as a from group, which (usually) contains a label, input and error message.

- ### [up.form.config](https://unpoly.com/api/up.form.config.md) (Configuration object)

  Sets default options for form submission and validation.

- ### [up.form.fields(root)](https://unpoly.com/api/up.form.fields.md) (JavaScript function)

  Returns a list of form fields within the given element.

- ### [up.form.group(element, [options])](https://unpoly.com/api/up.form.group.md) (JavaScript function) (experimental)

  Returns the form group for the given element.

- ### [[up-form-group]](https://unpoly.com/api/up-form-group.md) (HTML attribute)

  Marks this element as a form group, which (usually) contains a label, input and error message.

- ### [up.form.isField(element)](https://unpoly.com/api/up.form.isField.md) (JavaScript function)

  Returns whether the given element is a form field, such as `input` or `select`.

- ### [up.form.isSubmittable(form)](https://unpoly.com/api/up.form.isSubmittable.md) (JavaScript function)

  Returns whether the given form will be submitted through Unpoly instead of making a full page load.

- ### [up:form:submit](https://unpoly.com/api/up:form:submit.md) (DOM event)

  This event is emitted when a form is submitted through Unpoly.

- ### [up.form.submitButtons(root)](https://unpoly.com/api/up.form.submitButtons.md) (JavaScript function) (experimental)

  Returns a list of submit buttons within the given element.

- ### [up.form.submitOptions(form)](https://unpoly.com/api/up.form.submitOptions.md) (JavaScript function)

  Parses the render options that would be used to submit the given form, but does not render.

- ### [up:form:switch](https://unpoly.com/api/up:form:switch.md) (DOM event)

  When an `[up-switch]` field changes, this event is emitted on all dependent elements.

- ### [up:form:validate](https://unpoly.com/api/up:form:validate.md) (DOM event)

  This event is emitted before a form is being validated.

- ### [[up-hide-for]](https://unpoly.com/api/up-hide-for.md) (HTML attribute)

  Hides this element while an input field with `[up-switch]` has one of the given values.

- ### [[up-observe]](https://unpoly.com/api/up-observe.md) (HTML attribute) (deprecated)

  Watches form fields and runs a callback when a value changes.

- ### [up.observe(elements, [options], onChange)](https://unpoly.com/api/up.observe.md) (JavaScript function) (deprecated)

  Observes form fields and runs a callback when a value changes.

- ### [[up-show-for]](https://unpoly.com/api/up-show-for.md) (HTML attribute)

  Only shows this element if an input field with `[up-switch]` has one of the given values.

- ### [up.submit(form, [options])](https://unpoly.com/api/up.submit.md) (JavaScript function)

  Submits a form via JavaScript and updates a fragment with the server response.

- ### [[up-submit]](https://unpoly.com/api/up-submit.md) (HTML attribute)

  Submits this form via JavaScript and updates a fragment with the server response.

- ### [[up-switch]](https://unpoly.com/api/up-switch.md) (HTML attribute)

  Controls the state of another element when this field changes.

- ### [up.validate(element, options, [options])](https://unpoly.com/api/up.validate.md) (JavaScript function)

  Renders a new form state from its current field values, to show validation errors or update dependent elements.

- ### [[up-validate]](https://unpoly.com/api/up-validate.md) (HTML attribute)

  Renders a new form state when a field changes, to show validation errors or update dependent elements.

- ### [up.watch(element, [options], callback)](https://unpoly.com/api/up.watch.md) (JavaScript function)

  Watches form fields and runs a callback when a value changes.

- ### [[up-watch]](https://unpoly.com/api/up-watch.md) (HTML attribute)

  Watches form fields and runs a callback when a value changes.