---
title: "Feature: #80186 - Add HTML5 elements and improve the form editor"
manual: "TYPO3 Core Changelog"
version: "main"
permalink: "https://docs.typo3.org/permalink/changelog:feature-80186"
source: "Changelog/9.0/Feature-80186-ExtFormAddHtml5Elements.rst"
modified: "2026-09-15T10:46:36+00:00"
---

# Feature: #80186 - Add HTML5 elements and improve the form editor

See [forge#80186](https://forge.typo3.org/issues/80186)
See [forge#80130](https://forge.typo3.org/issues/80130)
See [forge#80128](https://forge.typo3.org/issues/80128)
See [forge#80127](https://forge.typo3.org/issues/80127)
See [forge#80125](https://forge.typo3.org/issues/80125)
See [forge#80126](https://forge.typo3.org/issues/80126)

## Description

### The form editor contains new selectable form elements

-   `email` (HTML5)
-   `tel` (HTML5)
-   `url` (HTML5)
-   `number` (HTML5)

### The server side 'TYPO3\\CMS\\Extbase\\Validation\\Validator\\NumberValidator' validator can be used.

```yaml
renderables:
  -
    type: <formElementType>
    ...
    validators:
      -
        identifier: Number
```

### If a form element is set to be required through the form editor, the html client side validation property "required" will be rendered

Result:

```yaml
renderables:
  -
    type: <formElementType>
    ...
    properties:
      fluidAdditionalAttributes:
        required: 'required'
        ...
```

### If a form element is set to use the 'String length' server side validation through the form editor, the client side validation properties 'minlength' and 'maxlength' will be rendered

Result:

```yaml
renderables:
  -
    type: <formElementType>
    ...
    properties:
      fluidAdditionalAttributes:
        minlength: 2
        maxlength: 3
        ...
    validators:
      -
        identifier: StringLength
        options:
          minimum: 2
          maximum: 3
```

### If a form element is set to use the 'Number range' server side validation through the form editor, the client side validation properties 'min' and 'max' will be rendered

```yaml
renderables:
  -
    type: <formElementType>
    ...
    properties:
      fluidAdditionalAttributes:
        min: 2
        max: 3
        ...
    validators:
      -
        identifier: NumberRange
        options:
          minimum: 2
          maximum: 3
```

### The form editor is able to set the 'pattern' client side validation property

```yaml
renderables:
  -
    type: <formElementType>
    ...
    properties:
      fluidAdditionalAttributes:
        pattern: '^.*$'
```

### The form editor validators select list will be removed if no validators are available

## Impact

It is now possible to add HTML5 elements with its needs.