Use Cases Forms

Natively Gameface does not support HTML <form> element. However, making forms is possible by using either forms-polyfill or the form control component from the Gameface custom components suite.

Form control component

This is a component that is part of the Gameface custom components suite and makes it possible to create working forms inside Gameface.

More about the form control component you can check here.

Forms polyfill

Using the forms polyfill will make it possible to define forms with the HTML <form> element. When the polyfill is initialized it will iterate over the whole DOM tree and replace all the <form> tags with the form control component enabling you to directly run a page that contains <form> elements without replacing them with the Gameface component.

Note: If <form> has a <form> element inside then the inner form won’t be replaced because nested forms are forbidden by standard.

Polyfill location

The polyfill is located inside the Samples/uiresources/Forms. We provide two builds of the polyfill - a umd and a cjs bundle located inside Samples/uiresources/Forms/builds.

Usage with UMD modules

Import the forms polyfill directly in an HTML page:

<script src="./builds/umd/forms-polyfill.production.min.js"></script>

If you wish to import the polyfill using JavaScript you can replace the script tags with import statements like this:

import './builds/umd/forms-polyfill.production.min.js';

Note: You will need an appropriate module bundler if you are importing ES modules. Another way is adding your script to the HTML with the type="module" attribute - <script src="myscript.js" type="module"></script>.

Usage with CJS modules

Import the forms polyfill:

require('./builds/umd/forms-polyfill.production.min.js');

The CommonJS(CJS) modules are used in a NodeJS environment, be sure to use a module bundler to use them.

Polyfill styles

There are default styles that are optional for the polyfill. We advise you to import them as well. They are located inside Samples/uiresources/Forms/builds/umd/forms-polyfill-styles.css or Samples/uiresources/Forms/builds/cjs/forms-polyfill-styles.css.

You can directly add them to the <head> of your HTML page:

<link rel="stylesheet" href="./builds/umd/forms-polyfill-styles.css">

What elements are supported inside theelement when polyfill is used?

All the elements that the form control component supports are supported inside the <form> element.

This is the list with the currently supported elements by the form control component.

Note: For best results, we are advising you to use the Gameface components suite when you are making forms inside Gameface.

Sample

You can play around with a sample demonstrating how the forms polyfill can be used. The sample is located inside Samples/uiresources/Forms/demo

← Tabindex