---
title: Working with HTML5 form inputs
---
> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).
The **HTML5 input** form control produces fields using the [HTML element](http://www.w3schools.com/tags/tag_input.asp) and provides support for configuring the input _type_ and other attributes.
Properly configured input elements allow you to define fields that offer users on handheld devices only the set of keys necessary for the field's expected value. For example, if a handheld user needs to enter a telephone number into a field, then their virtual keyboard only offers a telephone keypad instead of a full keyboard with characters that the user will never need to enter.
## Using the HTML5 input form control
The _HTML5 input_ form control supports most available [HTML Input Types](http://www.w3schools.com/html/html_form_input_types.asp), with exceptions for types that are not compatible with Kentico forms. For example, the _email_, _password_, _datetime-local_ and _tel_ input types are all supported, but the _submit_ and _reset_ types are not.
To use the default _HTML5 input_ form control, you need to select it as the form control of a field in the [field editor](https://docs.kentico.com/k11/managing-website-content/forms/designing-forms-using-the-field-editor.md), and then configure any required attributes.
To allow form editors to create HTML5 input fields without any advanced configuration (for example in the [Form builder](https://docs.kentico.com/k11/managing-website-content/forms/designing-forms-using-the-form-builder.md)), you can create specialized versions of the HTML5 input form control with pre-defined settings. See [Creating specialized HTML5 input form controls](#creating-specialized-html5-input-form-controls) for more information about this scenario.
> **Note:** **Not supported in administration interface forms**
>
> The _HTML5_ _input_ form control is only intended for use in [forms](https://docs.kentico.com/k11/managing-website-content/forms.md) on the live website. Using the control within forms in the Kentico administration interface (for example in [Page type](https://docs.kentico.com/k11/developing-websites/defining-website-content-structure/page-types/creating-page-types.md) or [Web part property](https://docs.kentico.com/k11/custom-development/developing-web-parts.md) forms) is not supported.
>
> Furthermore, when creating or editing form data on the [Recorded data tab](https://docs.kentico.com/k11/managing-website-content/forms/managing-form-data.md), HTML5 input fields have limited functionality (for example, client-side validation does not work).
### Creating fields using the HTML5 input form control
To add a field using the _HTML5 input_ form control to a form, you need to:
1. Open the **Forms** application.
2. Create a new form or edit an existing one.
3. Switch to the **Fields** tab and create a new field.
4. Specify the required field values and select _**HTML5 input**_ as the **Form control**.
5. Select the **Input type** in the **Editing control settings** section (see [HTML Input Types](http://www.w3schools.com/html/html_form_input_types.asp)).
6. Configure any required client-side attributes for the input (see [HTML input tag](http://www.w3schools.com/tags/tag_input.asp)):
- Common attributes for the selected input type are available in the **Client-side attributes** section.
- After switching to **Advanced** mode, you can set any available attribute in the **Advanced client-side attributes -> Custom attributes** area. Use the _{attribute name};{value}_ format, with each attribute on a new line.
> **Note:** **Configuring server-side validation**
>
> The _type_ and certain other attributes of the element provide client-side validation for field values. For example, the _maxlength_ attribute specifies the maximum number of allowed characters.
>
> However, client-side validation can be bypassed and Kentico does not automatically ensure matching server-side validation. We strongly recommend that you configure server-side validation for each input field to match any assigned client-side attributes:
>
> - For most types of input restrictions, add **Validation rules** (under the **Validation** section of the field editor). You can define [custom validation rules](https://docs.kentico.com/k11/macro-expressions/writing-macro-conditions/creating-macro-rules.md).
> - If you set the **required** attribute, also enable the **Required** setting of the field (under the **General** section of the field editor).
7. **Save** the field.
8. Repeat the process for any number of HTML5 input fields.
The form now contains the specified HTML5 input fields. Each element is rendered with the assigned input type and attributes. You can continue by [displaying the form on the live site](https://docs.kentico.com/k11/managing-website-content/forms/displaying-forms-on-the-live-site.md).
## Creating specialized HTML5 input form controls
You can use [inheritance](https://docs.kentico.com/k11/custom-development/developing-form-controls/inheriting-from-existing-form-controls.md) to create custom HTML5 input form controls that allow form editors to create specific types of input fields without any advanced configuration (for example in the [Form builder](https://docs.kentico.com/k11/managing-website-content/forms/designing-forms-using-the-form-builder.md)). You predefine the input type and attribute values when creating the inherited controls.
> **Tip:** **Tip**: You cannot define server-side validation rules for fields within the default configuration of inherited form controls. However, you can [create a dedicated macro rule](https://docs.kentico.com/k11/macro-expressions/writing-macro-conditions/creating-macro-rules.md) for each inherited HTML5 input form control, which users can easily select when creating fields of the given type.
### Example – Creating a HTML5 email input form control
The following example demonstrates how to create a specialized form control for HTML5 email inputs. The example predefines the input type, _maxlength_ and _required_ attributes, but you can use the same approach for any other input configuration.
1. Open the **Form controls** application.
2. Click **New form control**.
3. Set the following options for the new form control:
- **Control source**: Inherit from an existing
- **Display name**: HTML5 email input
- **Type**: Input
- **Inherit from**: HTML5 input (select via the _(more items...)_ option)
4. Click **Save**.
5. Set the following options on the **General** tab:
- (optional) **Thumbnail**: _Upload a thumbnail image for use in the_ [Form builder](https://docs.kentico.com/k11/managing-website-content/forms/designing-forms-using-the-form-builder.md)
- **High priority**: yes (enabled)
- **Use control for**: Text
- **Show control in**: Forms
- **Default data type**: Text
- **Column size**: 254
6. Click **Save**.
7. Switch to the **Properties** tab.
8. Set the **Default value** for the following properties (select the field in the list on the left, set the default value, and then click **Save** for each field):
- **Type**: email
- **Maxlength**: 254
- **Required**: Yes
9. (optional) Disable the **Display field in the editor** option for all properties to hide the control's input type and attribute configuration on the **Fields** tab of forms (this has no effect on the [Form builder](https://docs.kentico.com/k11/managing-website-content/forms/designing-forms-using-the-form-builder.md)).
To allow users to quickly add matching server-side validation for the email input, create a new validation rule:
1. Open the **Macro rules** application.
2. Switch to the **Form validation** tab and click **New macro rule**.
3. Fill in the rule properties:
- **Display name**: HTML5 email input validation
- **User text**: Email input is valid
- **Condition**:
```csharp
Value.Matches("^[a-zA-Z0-9.!#$%&'*+\-/=?\^_`{|}~]+@[a-z0-9-]+(\.[a-zA-Z0-9-]+)*$") && Value.Length < 255
```
4. Click **Save**.
Form editors can now use the new form control and the matching validation rule to create email input fields in forms:
1. Open the **Forms** application.
2. Edit a form and select the **Form builder** tab.
3. Drag the **HTML5 email input** component onto the form.
4. Enable the **Required** flag for the field in the **Properties** panel.
5. Switch to the **Validation** panel and click **Add validation rule**.
6. Select the **HTML5 email input validation** rule and click **Apply**.
The form now contains a field using the specialized HTML input for email values. The form control generates an element with the pre-defined input type and attributes, and the applied macro rule ensures corresponding server-side validation.