HTML5 Input Types

HTML5 defines a number of content specific input types that utilise native behaviours to display and edit input elements in a way that is familiar to the user. For example, a Date input type displays a calendar.

You can set an input type of a Field using its Display type property. Display types include:

Color
Date
Datetime-local
Email
Month
Number
Password
Range
Search
Telephone
Text
Time
URL
Week

Some input types have additional behaviours you can set using Custom Attributes. For example, a Number input can have min, max and step attributes.

Steps

Create a new form.

Create three fields called name, age and telephone. Set their Display types to Text, Number and Tel respectively.

Drag these fields on to the form to create Field Controls.

Open HTML Element Properties window for the age Field Control and click on the Editor Input tab. Then paste the following into Custom Attributes:

min="0"

This attribute will be used by the browser to check that the data entered into the age field is above this value.

Add a button with the text Save.

Run the form and enter a negative number for the age and click Save. Notice how this is not accepted and an error message is displayed. Notice also how the Input Spinner prevents you from selecting a value below the minimum.

Back to Module Next Page