# Form & input fields
{% hint style="info" %}
[Upgrade your free account](https://docs.bravostudio.app/get-started/unlock-power-features-to-create-interactive-apps) to the **Bravo Solo plan** to use this feature.
{% endhint %}
Add forms in your apps to receive data from users! Use different input types to create native forms in your apps.
## ๐ฒ Input types
Bravo supports the following input types for the forms. See the [example design](#undefined) to see how to set them up in the design file.
**Single-line text**
Create a single-line text input.
* The field in your backend should be of type text.
```
[component:input-text]
```
**Multi-line text (text area)**
Create a multi-line text box.
* The field in your backend should be of type text.
```
[component:input-textarea]
```
**Number**
Create a numeric input
* The field in your backend should be of type interger.
```
[component:input-number]
```
**Email**
Create a text input in email format
* The field in your backend should be of type email or text.
```
[component:input-email]
```
**Phone**
Create an input for a phone number
* The field in your backend should be of type text.
```
[component:input-tel]
```
**Date**
Create an input with a date picker.
* This is sent as `yyyy-MM-dd` format to the backend.
```
[component:input-date]
```
**Date & Time**
In case you want to send the date as per [ISO 8601](https://es.wikipedia.org/wiki/ISO_8601) (`yyyy-MM-dd'T'HH:mm:ss'Z'`), you can use the following tag (note that the hour will be sent as 00:00:00):
```
[component:input-date:datetime]
```
**Time**
Create an input with a time picker.
* This is sent as `HH:mm` format to the backend.
```
[component:input-time]
```
**URL**
Create an input for a URL
* The field in your backend should be of type text or URL.
```
[component:input-url]
```
**Password**
Create an input for a password. The characters in the input will be hidden while the user inputs them.
* The field in your backend should be of type text or password.
```
[component:input-password]
```
**Selector**
Create a dropdown selector with different options. You can specify the options in the design file, or obtain them via API request. See [this page](https://docs.bravostudio.app/bravo-tags/form-and-input-fields/dropdown-selector) to see how to set it up.
* This is sent as text to the backend.
```
[component:input-select]
```
**Image (from phone camera)**
Allows to take a picture with the phone camera and upload it in the form. The phone camera is opened when the user presses the area with the input tag.
* This is sent as image URL to the backend.
```
[component:input-image]
```
**Video (from phone camera)**
Allows to record a video with the phone camera and upload it in the form. The phone camera is opened when the user presses the area with the input tag.
This is sent as video URL to the backend.
{% hint style="warning" %}
The maximum video size is 200MB.
{% endhint %}
```
[component:input-video]
```
**File**
Allows to upload a file that already exists in the phone storage. The option to select a file is opened when the user presses the area with the input tag.
* This is sent as URL to the backend.
```
[component:input-file]
```
\
**Hidden** **Input**
Hidden form field from the user interface but still exists within Bravo. This type of input field can be used to store session identifiers or any other data that needs to be passed along with form submissions but doesnโt need to be visible or editable by the user.
```
[component:input-hidden]
```
### Adding a required input field
You can easily make an input field **required** (mandatory for the user to fill in before sending the form), by appending `:required` at the end of the input tag. For instance, `[component:input-text:required]`.
If a user tries to submit the form without filling in all the required fields in the form (if any), an alert message will be displayed, and the form won't be submitted.
{% hint style="info" %}
The `[component:input-select]`and [radio button (single-select)](https://docs.bravostudio.app/bravo-tags/form-and-input-fields/stateful-input/radio-buttons-single-select) component **do not support the** [`:required`](#adding-a-required-input-field) attribute and **requires an option selection by default**. However, its possible to add an empty option such as "`=None`" so users can select an empty value.
{% endhint %}
## ๐จ Creating a form in the design file
To create a form in your app, add as many of the inputs above as you wish. Each input type will require a different setup, check out the [example design file](#example-design-file) to see how to create them.
Once you have added all the inputs, surround them with a [container](https://docs.bravostudio.app/bravo-tags/broken-reference). All the form inputs must be inside the same container.
Finally, add a button that will trigger the submit action when pressing it, once the user has filled in the form fields. This button **must be inside the form container**. To add it, create the button design, and attach the `action:submit` tag to it.
Also, note that all the form inputs **need to be in the same app screen**, together with the submit button.
## ๐ Sending form data via API request
Once the design file with the form is imported into Bravo, an API request needs to be bound to the form and its inputs. There are two different types of requests that can be bound to forms:
* A [**POST** request](https://docs.bravostudio.app/connect-api/set-up-api-requests/creating-an-api-collection/airtable/data-library-connect-to-any-api-post-request), to create a new record in the database.
* A **PATCH** request, to update an existing record in the database.
Once the API request has been created, the form input fields need to be bound to the UI elements as explained in the following pages:
{% content-ref url="form-and-input-fields/data-biding-send-form-input-to-a-database" %}
[data-biding-send-form-input-to-a-database](https://docs.bravostudio.app/bravo-tags/form-and-input-fields/data-biding-send-form-input-to-a-database)
{% endcontent-ref %}
{% content-ref url="../data-binding/data-binding-types/bind-multiple-properties-to-a-ui-element" %}
[bind-multiple-properties-to-a-ui-element](https://docs.bravostudio.app/data-binding/data-binding-types/bind-multiple-properties-to-a-ui-element)
{% endcontent-ref %}
## ๐พ Example design file
See the example below to see how to set it up!
{% embed url="" %}