Form

/libs/granite/ui/components/coral/foundation/form

Form is a component to represent a standard HTML form (<form>).

It has the following content structure:

granite:Form
  1. granite:commonAttrs
  2. granite:renderCondition
  3. granite:container
actionstringel

The action attribute.

The value MUST be resolved into a relative URL starting with the path, query, or fragment component. e.g. http://example.org/ is not valid, while /abc.html and abc.html are.

enctypestring

The enctype attribute.

methodstring
  1. get
  2. post

The method attribute.

targetstring

The target attribute.

autocompletestring

Indicates if input elements can by default have their values automatically completed by the browser.

See also MDN documentation regarding autocomplete attribute.

novalidateboolean

The novalidate attribute to indicate that the form is not to be validated when submitted.

dataPathstringel

The path to the resource to be used as the values by the contained form fields.

The ValueMap of the resource is used as the FormData that is matched by name property of the field.

Given the following structure:

+ /apps/example/myformvalues
  - name1 = "value1"
  - name2 = ["value1", "value2"]

+ /apps/example/myform
  - sling:resourceType = "granite/ui/components/coral/foundation/form"
  - dataPath = "/apps/example/myformvalues"
  + items
    + textfield
      - sling:resourceType = "granite/ui/components/coral/foundation/form/textfield"
      - name = "name1"

The textfield will be matched with name1 key. The textfield will then use value1 as its value.

The value of the field name can be any string that can be passed to ValueMap#get(). So relative value works. e.g. name1, ./name1, ./childNode1/prop1.

The form is often used in conjunction with SlingPostServlet as the submission endpoint, where it defines a certain field name convention.

nameNotFoundModestring
  1. ignore-freshness
  1. check-freshness
  2. ignore-freshness

The mode on how to handle the scenario when the FormData doesn’t have an entry of a certain name.

See FormData.NameNotFoundMode.

stylestring
  1. vertical
  2. aligned

The layout style of the form.

(no value)
No style is applied.
vertical
The form fields (and their labels) are laid out in vertical manner.
aligned
The each form field is laid out side-by-side with its label.
autosubmitFormboolean

true to make the form (assigned to this layout) submitable when pressing “Enter”. It is implemented by generating the submit button automatically, and leverage the native browser behavior.

marginboolean

Put vertical margin to the root element.

maximizedboolean

Make the element maximized to fill the available space.

foundationFormboolean

Enable the foundation-form. This will add foundation-form class to the form.

asyncboolean
  1. true

true if the form is to be submitted using ajax asynchronously, instead of standard synchronous behavior.

Only applicable when foundationForm is true.

loadingMaskboolean
  1. true

true to show a mask during form submission. Otherwise no mask is shown at all.

Only applicable when foundationForm is true.

uistring

none to suppress certain UI behavior; otherwise an error UI is shown during error response.

Only applicable when foundationForm is true.

successresponse

The config of success response behaviour. See build-in responses.

Only applicable when foundationForm is true.

Components: