Creating a form

A form is a collection of inputs that allow users to create and edit 'things' within the Jadu platform. Pulsar forms provide consistent styling as well as sensible defaults so that developers can quickly compose useful, accessible forms.

The Forms section lists all of the currently supported inputs, these should be placed within a suitable form element which can be created using the helper elements listed here.

Basic usage

Twig

{{ form.create() }}
    ...
{{
  form.end({
    'actions': [
      form.submit({
        'class': 'btn--primary',
        'label': 'Primary Action'
      }),
      html.button({
        'class': 'btn--naked',
        'type': 'link',
        'label': 'Cancel',
        'href': '#home'
      })
    ]
  })
}}

React

<Form>
  ...
  <FormActions>
    <Button type="submit" className="btn--primary">Primary Action</Button>
    <Button type="link" href="/path/to/cancel" className="btn--naked">Cancel</Button>
  </FormActions>
</Form>

HTML

<form method="POST" enctype="application/x-www-form-urlencoded" class="form">
  ...
  <div class="form__actions">
    <button type="submit" class="btn btn--primary">Primary Action</button>
    <a href="#home" class="btn btn--naked">Cancel</a>
  </div>
</form>

Helper options

You can configure this helper using the common helper options, the following options are specific to this helper.

Option	Type	Description
action	string	URL to post to, will submit to self if empty
class	string	A space separated list of class names
enctype	string	How the form-data should be encoded (requires method = POST)
id	string	A unique identifier, if required
name	string	The name of the form
nonce	string	Random string used to prevent CSRF, adds a hidden nonce input after form
method	string	The HTTP method to be used to submit the form
data-*	string	Data attributes, eg: 'data-foo': 'bar'

Enctype

The enctype attribute will be set to application/x-www-form-encoded by default unless you’re using a method other than POST.

<form method="POST" encype="application/x-www-form-urlencoded" class="form">

Using PUT

If you specify PUT as the method in Twig or React, then a hidden input will be created automatically after the form element, and the method attribute on the form element will be set to POST.

Twig

{{
  form.create({
    'method': 'PUT'
  })
}}
  ...
{{ form.end() }}

React

<Form method="PUT">
  ...
</Form>

HTML

<form method="POST" enctype="application/x-www-form-urlencoded" class="form">
  <input name="_method" value="PUT" type="hidden" />
  ...
</form>

CSRF protection

Supply a nonce and it will be added as a hidden input after the opening form element.

Twig

{{
  form.create({
    'nonce': 'D2A619A309DCE1BEF50F01F08EB764B42D9B36BF8128A8D303FD6DCF91E5FDD6'
  })
}}
  ...
{{ form.end() }}

React

<Form nonce="D2A619A309DCE1BEF50F01F08EB764B42D9B36BF8128A8D303FD6DCF91E5FDD6">
  ...
</Form>

HTML

<form method="POST" enctype="application/x-www-form-urlencoded" class="form">
  <input name="nonce" value="D2A619A309DCE1BEF50F01F08EB764B42D9B36BF8128A8D303FD6DCF91E5FDD6" type="hidden" />
  ...
</form>

Form actions

You need to provide a way for the user to submit the form, and ideally a way to cancel what they’re doing and return to where they started.

The first button in the form actions will usually be the submit button and be a primary button in most cases.

Cancel

Alignment

Form actions are normally positioned so they’re inline with the form controls above them.

If the form is editing an existing ‘thing’ rather than creating something new then you may also want to provide a delete action, use the u-float-right utility class to move this to the right hand side.

Example

Cancel

You can make the actions align to the left hand edge of a form by adding the .form__actions--flush class.

Example

Cancel