Form & input fields
Create native forms with different input formats
Add forms in your apps to receive data from users! Use different input types to create native forms in your apps.
Create a single-line text input.
Multi-line text (text area)
Create a multi-line text box.
Create a numeric input
Create a text input in email format
Create an input for a phone number
Create an input with a date picker
Create an input with a time picker
Create an input for a URL
Create an input for a password. The characters in the input will be hidden while the user inputs them.
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.
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.
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.
You can easily make an input field required (mandatory for the user to fill in before sending the form), by appending
:requiredat the end of the input tag. For instance,
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.
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:submittag to it.
Also, note that all the form inputs need to be in the same app screen, together with the submit button.
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:
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:
See the example below to see how to set it up!