To add DHTMLX Form into an application, you need to take the following simple steps:
Unpack the downloaded package into a folder of your project.
After that, create an HTML file and place full paths to JS and CSS files of the DHTMLX Suite library into the header of the file. The files are:
Add a container for the Form and give it an id, e.g. "form_container":
Now you need to specify the list of Form controls. For example, you can create a form with two text fields for entering a name and an email, a checkbox for the user to give consent to data processing and a button to send a form to a server.
To add controls inside a form, you should put them into a layout, either a vertical one (the rows attribute), or a horizontal one (the cols attribute). In the example below controls are arranged vertically, one under another:
rows: [
{
type: "input",
label: "Name",
icon: "dxi dxi-magnify",
placeholder: "John Doe",
name: "name"
},
{
type: "input",
label: "Email",
placeholder: "jd@mail.name",
name: "email"
},
{
type: "input",
inputType: "password",
label: "Password",
placeholder: "********",
name: "password"
},
{
type: "checkbox",
text: "I agree",
value: "checkboxvalue",
id: "agree",
name: "agree"
},
{
type: "button",
text: "Send",
size: "medium",
view: "flat",
submit: true,
color: "primary"
}
]
Initialize Form with the dhx.Form object constructor. The constructor takes two parameters:
const form = new dhx.Form("form_container", {
css: "dhx_widget--bordered",
rows: [
{
type: "input",
label: "Name",
icon: "dxi dxi-magnify",
placeholder: "John Doe",
name: "name"
},
]
});
You can find the full list of Form configuration properties in the Form API overview article.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4