`html`

This component allows you to integrate HTML elements directly into a form.

Configuration

For general configuration options, see General Component Configuration.

Specific Configuration

type ("html"): Component type.
value (Binding | string): The content is parsed as HTML and displayed accordingly.

General Configuration

In addition to the configurations that apply to all components, no further configurations can be set. //boxLabel settings, //disabled, //errorTarget, //icon, //label, //label settings, //onChange, //readOnly, //required.

Custom Styling

The visual design of the HTML components is primarily controlled via global variables. CSS can be used specifically for certain deviations.

Using the cls , you can apply your own CSS rules. The component provides the following standard styling points for this purpose:

.html: Styles for HTML components.

Example

html.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".html {color: rgb(0, 11, 170); background-color: rgba(200, 200, 255, 0.4);}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "HTML Component Example",
      "components": [
        {
          "type": "html",
          "value": "Data binding: ${/data/input}${/data/text}",
          "margin": "0 0 10 0"
        },
        {
          "type": "html",
          "value": "Data Binding only for input: ${/data/input}<b>Some text.</b>"
        },
        {
          "type": "textfield",
          "label": "Input for html Elements",
          "value": "${/data/input}"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "input": "<p> A Paragraph </p>",
      "text": "<b>Some text.</b>"
    }
  }
}

Embedded preview

Open preview in a separate window

Keywords: