Reference

http://www.w3schools.com/html/html_form_input_types.asp.

Purpose

Changing the HTML "input type" code of an input box for a numeric, text, or date variable.

By default, numeric questions in AskiaDesign will use the input type="text" code. If your respondents are on a mobile device when they go to enter in their answer for a numeric question, their "text" keyboard will pop up rather than their numeric keyboard (iOS/Android).

Having the ability to change the input type from "text" to "number" would allow the respondent's mobile device to use the numeric keyboard rather than the text keyboard when they go to answer that question.

In AskiaDesign

Once you generate your screens in AskiaDesign, go into the "element properties" of an open-ended, numeric, or date variable and then go to the "HTML" tab.

Notice the "Input type" field. This is the field within the element properties that allows you to define your input type.

Reference the above W3Schools HTML Tutorial link for all of the different input types you should be able to define within AskiaDesign.

Examples

Number:

Input type="number"

Email:

Input type="email"

Password:

Input type="password"

Date:

Input type="date"

Telephone:

Input type="tel"

You can also define "input restrictions" (disabled, max, maxlength, min, pattern, readonly, required, size, step, and value).

For example, in the "Input type" box in the element properties, we've used the following code for the telephone type:

tel" pattern="[0-9]{10}" title="Please enter a 10-digit phone number, without the dashes.." minlength="10" maxlength="10

Pattern "specifies a regular expression to check the input value against".
MaxLength "specifies the maximum number of characters for an input field".
MinLength "specifies the minimum number of characters for an input field".

Attention

When changing the input type, also go into the "Element Properties - Edits" tab and change the "Rows" number to "1". If there is more than 1 row, devices might automatically detect the input type as "text", rather than your manually defined type.

Also, do not close off the code with closing quotes. See the above "tel" example, where the last maxlength="10 is not closed by ending quotes. Design will do this for you during the generation of the HTML.

Below is a survey link to the five input types I've listed above (number, email, password, data, and telephone):

Click to Start Survey - try these different input types in a Desktop Browser vs Mobile Browser.

Attached to the bottom of this article is the QEX with these examples.