Getting Started

Once you've downloaded the kendo-ui-forms source, or grabbed the contents of the dist folder in this repo, you'll need to add a reference to the widget in your app, somewhere after your references to jQuery and Kendo UI proper (only Kendo UI Web is required).

<script src="kendo.forms.min.js"></script>

Once you've add the script tag, you're ready to add support for your forms. The next step is to create a new <form> and mark it up like you would any other HTML5 form, using new input types, attributes and validation features. The polyfill's job is to take care of the messy cross-browser details, so you can build your forms to the spec.

Form in hand, it's time to initialize the widget. As with the rest of Kendo UI, the Forms polyfill supports both declarative (data-role) and imperative (via JavaScript) initialization of the widget. If declarative is your thing, you need only to add the following attribute to your <form> tag

<form data-role="form">

and then initialize all of the declarative on your page with kendo.init

kendo.init(document.body);

For the imperative approach, you can initialize a Kendo Form just like you would any other element. Just select the form using jQuery and call kendoForm

$('#myForm').kendoForm();

By default, the widget does two things:

1. All inputs, even those with type=text will receive the k-input class. This class styles basic inputs in a manner consistent to the rest of the Kendo UI Widgets in your form.
2. If the browser running the widget supports a given input type (say type=range), that field will not but automatically promoted to a Kendo UI Widget (i.e. KendoSlider, in the case of the range type). Only fields without browser support for specified types receive an "upgrade."

Of course, both of these options are configurable via an options object passed into the widget. So, if I wanted to turn off basic input styling and always use Kendo UI widgets, even when a browser supports a type, I can do the following:

$('#myForm').kendoForm({
  styleInputs: false,
  alwaysUseWidgets: true
});