Form

Form creates a form with method set to POST and a couple of enhancements.

POST by default

Most of the forms we build use POST (over GET), so we made it a default to save a couple of keystrokes every time.

<Form> ... </Form>

<form method="post">...</form>

Built-in spam prevention

Form contains a hidden input to make it a tiny bit easier to prevent spam. To disable this feature, just set the preventSpam option to false.

<Form> ... </Form>

<form method="post">
  <input type="hidden" name="spam" />
  ...
</form>

Parses and sanitizes data for you

If you provide Form with a onSubmit handler, Form will use JavaScript to parse and sanitize data for you — without you having to lift a finger.

<script>
  function onSubmit (data) {
    // Do something with your data
  }
</script>

<Form {onSubmit}> ... </Form>

Data

{
  name: ""
}

Receive an array of objects

Form contains a helper that lets you send an array of objects through your forms. This is useful when you need to send multiple items of the same type.

<Form {onSubmit}>
  <TextInput name="members[0][name]" label="Member 1 Name" />
  <TextInput name="members[1][name]" label="Member 2 Name" />
  <TextInput name="members[2][name]" label="Member 3 Name" />
  <button type="submit">Submit</button>
</Form>

Data

{

}

Basic Usage

Form creates a <form> element that does the following:

It sets method to POST
It includes a hidden input for simple spam prevention

<script>
  import { Form } from '@splendidlabz/svelte'
</script>

<Form>...</Form>

<form method="post">
  <input type="hidden" name="spam" />
  ...
</form>

Changing Method and other properties

Method and other <form> attributes can be directly added to the Form.

<TextInput name="name" label="First Name"> ... </TextInput>

<form method="get" action="/somewhere">
  <input type="hidden" name="spam" />
  ...
</form>

Disabling Spam prevention

If you don’t want to use the spam prevention feature, set preventSpam to false.

<Form options={{ preventSpam: false }}> ... </Form>

<form method="post">...</form>

Form Submission

Form will submit the form via the standard HTML way if onSubmit is not present.

<!-- Standard Submit  -->
<Form>...</Form>

Custom Form Submission

You can intercept a form submission by providing a onSubmit callback. When you do this, Form will:

Prevent the submit action
Parse and sanitize the form data — for safer and easier usage
Pass the parsed data to your onSubmit callback

<script>
  function onSubmit(data) {
    // Do something with your data here
  }
</script>

<Form {onSubmit}> ... </Form>

Data

{
  name: ""
}

Note

For Astro users: You can’t pass an onSubmit function into Form from an .astro file. This is an Astro limitation.

If you want to benefit from the parsing enhancements we added here, consider using a Svelte component to handle the form submission or, use the parseData server helper.

Disabling sanitization

You can disable the sanitization of form data by setting the sanitize option to false.

<script>
  function onSubmit(data) {
    // Do something with your data here
  }
</script>

<Form {onSubmit} options={{ sanitize: false }}> ... </Form>

Unsanitized Data

{
  name: ""
}

POST an array of objects

Form includes a helper to send an array of objects. To activate this, make sure you have onSubmit. Then, use the following syntax for naming your inputs:

<input name="property[index][nestedProperty]" />

Here’s an example of this at work:

<Form {onSubmit}>
  <TextInput name="members[0][name]" label="Member 1 Name" />
  <TextInput name="members[1][name]" label="Member 2 Name" />
  <TextInput name="members[2][name]" label="Member 3 Name" />
  <button type="submit">Submit</button>
</Form>

Data

{

}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

HTML Output

Form produces the following HTML:

<form class="Form" method="post">
  <input type="hidden" name="spam" />
  ...
</form>

Properties and Classes

The following properties can be used to add classes to Form.

Property	Description
`class`	Class for the `<form>`
`styles`	Inline styles for the `<form>`

<Form class="Yay">...</Form>

<form class="Form Yay" method="post">...</form>

Custom properties

All other custom properties will be passed directly to <form>.

<Form data-extra="form">...</Form>

<form method="post" data-extra="form">...</form>

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Slots

Name	Description
Default	HTML to insert into the `<form>`.

Properties

Property	Type	Description
`method`	`string`	HTTP method for form submission
`action`	`string`	URL to submit the form data
`onSubmit`	`function`	Callback function triggered on form submission
`options`	`object`	Form configuration. See `Options`

Types

Options

Configuration object for Form component.

Property	Type	Default	Description
`sanitize`	`boolean`	`true`	Sanitize form inputs before passing to `onSubmit`.
`preventSpam`	`boolean`	`true`	Include a hidden input with `name="spam"` for spam prevention.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.