PolymerElements/iron-form

Name: iron-form

Owner: PolymerElements

Description: Custom form element

Created: 2015-05-13 01:01:02.0

Updated: 2018-04-19 16:39:40.0

Pushed: 2018-05-23 02:28:47.0

Homepage: https://www.webcomponents.org/element/PolymerElements/iron-form

Size: 336

Language: HTML

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Demo and API docs

<iron-form>

<iron-form> is a wrapper around the HTML <form> element, that can validate and submit both custom and native HTML elements.

It has two modes: if allow-redirect is true, then after the form submission you will be redirected to the server response. Otherwise, if it is false, it will use an iron-ajax element to submit the form contents to the server.

Example:

<iron-form>
  <form method="get" action="/form/handler">
    <input type="text" name="name" value="Batman">
    <input type="checkbox" name="donuts" checked> I like donuts<br>
    <paper-checkbox name="cheese" value="yes" checked></paper-checkbox>
  </form>
</iron-form>

By default, a native <button> element (or input type="submit") will submit this form. However, if you want to submit it from a custom element's click handler, you need to explicitly call the iron-form's submit method.

Example:

<paper-button raised onclick="submitForm()">Submit</paper-button>

function submitForm() {
  document.getElementById('iron-form').submit();
}

Changes in 2.0

• since type-extensions are not available in 2.0, <iron-form> is now a wrapper around a native <form>
• related, since elements are now distributed to the iron-form, they no longer need to implement IronFormElementBehavior to register for submission. However they are required to have a name and a value attribute (which the behaviour also added), and to optionally implement the validate() method to control validation of their shadowRoot validatable elements.
• the serialize method has been renamed to serializeForm (because Polymer 2.0 is already using a serialize method, and we can't stomp over it).
• in iron-form 2.x, the reset and submit methods now accept an event as input, which will be prevented if it exists.
• the disableNativeValidationUi property has been removed: because iron-form is no longer a type extension, it can't actually trigger any native UI, so this property is essentially always true.
• the contentType property has been removed in favor of the native <form enctype> attribute; you can still use the application/json value e.g.

  n-form>
  m enctype="application/json"> ... </form>
  on-form>