Transcript

In this Quick Tip, we're going to learn about the Input element. When we draw the Input element onto a page, we get this. The Input element lets you create an input where your users will be able to type something; the thing they type can then be saved as data on a thing.

We primarily use the Input element for creating forms (like sign up and login), but the Input element can be customized for whatever you need.

First, we have the standard properties, like the Placeholder text and the Initial content that this Input element would display on page load that we could fill out. But what is most important to understand is the Content format property that this Input element expects.

Bubble needs to know what this input should be trying to validate for, so we must pick one of these formats depending on what we want our input to do. For example, if we wanted our users to log in, we would set this content format to "Email". Now when we type text into this input, it will be validating for an "@" symbol to make sure it's a valid email, which we can then use in conditionals where we check for that validation. This is also how you would protect text for a password, as this will set whatever the user types in to be protected text.

So depending on your content format, you may get different properties. For example, if you have it set to an "Integer", you'll have the option to set a minimum and maximum value that users can enter -- anything more or less will make this input invalid.

Experiment more by adding your own Input element to your app and testing out each content format as you build forms.

That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.