[Skip to content]

Search our Site
Easysite Resource Centre
HTML5 Number

HTML5 Number

This element allows a number to be captured on a form and is designed for Web Apps built using HTML5. A typical example of a HTML Number Field in use is:

HTML5 number element example

HTML Number element

1. Drag and drop the HTML5 Number element into the appropriate location:

HTML number element icon

2. Configure the element. The following view will be presented:

Forms - HTML5 Number.PNG

3. Edit/configure:

Label

Enter an appropriate label for the element.  

Friendly Label

If required, enter a Friendly label to be presented to an end user.

Aria label 

If required, enter an Aria Label, which is read out by assistive technology such as a screen reader.

Layout 

Select whether the question and answers are displayed in two separate columns, or whether the answers sit under the question as rows in a single column. 

Physical Width

Enter the width of the answer box in percentage of the screen.

Mandatory

Check if required.

Mandatory Validation Message  

Enter an appropriate message. 

Default Value

If required, prepopulate the element with a default value.

Character Limit

If required, enter an appropriate character limit for the field.

Pad with zeros up to minimum width

If required, add the number of zeros to add to the beginning of the number. For example, if one user has a membership number of 123 and another is 12345, padding with 2 zeros would render the first number as 00123 to ensure that all numbers have the same amount of characters.

Min/Max Value

If required enter minimum and maximum. The end user must input a value between these amounts.

Value Validation Message 

Enter an appropriate message. 

Show As

Select if the element and the responses are to render in the Records view when managing responses. If the element is to display select whether or not is displays as a link to the full response.

Orderable

If required, check to allow the administrator to sort records by this field.

Include in Keyword Search

If required, check to make the element searchable.

Provide as Search Option

If required, check to provide a dedicated search option for this field.