<!-- Default -->
<label for="type-text-1">
Input type text
</label>
<input type="text" id="type-text-1" value="">
<!-- Type Email -->
<label for="type-email-1">
Input type email
<em>(Required)</em>
</label>
<input type="email" id="type-email-1" value="">
<!-- Type Password -->
<label for="type-password-1">
Input type password
</label>
<input type="password" id="type-password-1" value="">
<!-- Type Number -->
<label for="type-number-1">
Input type number
</label>
<input type="number" id="type-number-1" value="">
<!-- Type Tel -->
<label for="type-tel-1">
Input type tel
</label>
<input type="tel" id="type-tel-1" value="">
<!-- Type Time -->
<label for="type-time-1">
Input type time
</label>
<input type="time" id="type-time-1" value="">
<!-- Type Url -->
<label for="type-url-1">
Input type url
</label>
<input type="url" id="type-url-1" value="">
<label
for="{{id}}"
{{#if at-label}}class="at-only"{{/if}}
>
{{label}}
{{#if help-msg}}<em>{{help-msg}}</em>{{/if}}
</label>
<input
type="{{#if type}}{{type}}{{else}}text{{/if}}"
id="{{id}}"
value="{{value}}"
{{#if input-classes}}
class="{{input-classes}}"
{{/if}}
{{#if disabled}}
disabled
{{/if}}
>
/* Default */
{
"label": "Input type text",
"id": "type-text-1"
}
/* Type Email */
{
"label": "Input type email",
"id": "type-email-1",
"help-msg": "(Required)",
"type": "email"
}
/* Type Password */
{
"label": "Input type password",
"id": "type-password-1",
"type": "password"
}
/* Type Number */
{
"label": "Input type number",
"id": "type-number-1",
"type": "number"
}
/* Type Tel */
{
"label": "Input type tel",
"id": "type-tel-1",
"type": "tel"
}
/* Type Time */
{
"label": "Input type time",
"id": "type-time-1",
"type": "time"
}
/* Type Url */
{
"label": "Input type url",
"id": "type-url-1",
"type": "url"
}
An <input> element with support for most text and number related types (supported examples are rendered above). Related MDN article.