Form Renderer
This library includes a robust, plain JavaScript, form rendering engine that is capable of dynamically generating Webforms using a JSON schema. A very simple example of this, is as follows.
<html>
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/formio.form.min.css'>
<script src='https://unpkg.com/[email protected]/dist/formio.form.min.js'></script>
<script type='text/javascript'>
window.onload = function() {
var form = new FormioForm(document.getElementById('formio'));
form.form = {
components: [
{
type: 'textfield',
key: 'firstName',
label: 'First Name',
placeholder: 'Enter your first name.',
input: true
},
{
type: 'textfield',
key: 'lastName',
label: 'Last Name',
placeholder: 'Enter your last name',
input: true
},
{
type: 'button',
action: 'submit',
label: 'Submit',
theme: 'primary'
}
]
};
};
</script>
</head>
<body>
<div id='formio'></div>
</body>
</html>You can also use this renderer with Forms generated using Form.io using the src parameter. An example of this is as follows.
<html>
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/formio.form.min.css'>
<script src='https://unpkg.com/[email protected]/dist/formio.form.min.js'></script>
<script type='text/javascript'>
window.onload = function() {
var form = new FormioForm(document.getElementById('formio'));
form.src = 'https://examples.form.io/example';
};
</script>
</head>
<body>
<div id='formio'></div>
</body>
</html>This will render the following form within your application.
The form renderer is utilized by creating an instance of the FormioForm class. This class has the following signature.
var form = new Formio([element], [options]);| Property | Description | Example |
|---|---|---|
| element | The HTML DOM element you would like to render the form within. | document.getElementById('formio') |