User:Yury Katkov/FormInput creation

In this page I will descibe how to create your own form input element for Semantic Forms.

The big picture
All the Semantic Form Inputs are derived from  class. All you need to do is to override some methods of this class and register the new form input. The input consists of the piece of Html code and some javascript.

Some details
There are several important functions that need to be overloaded.

Constructor
Let's begin with a constuctor. Typically there is no need to create the constructor that is different from the one in SFInput. don't forget to call the parent constructor passing all the parameters to it:

Making js-less Html code
First important function is. You should override it so it would return the html code of your input. Such code should not include  or   tags, see below how to use CSS and Javascript in your input. The code generated by  function ideally should execute normally even in browsers where javascript is turned off.

The good way of creating the html tag is by using static methods of  class.

Typically we'll need the following functions:


 * ,  for creating opening tags and adding parameters
 * ,  for creating closing tags
 * ,,    for creating simple tags

There are a lot more useful functions in Xml and Html classes for creating checkboxes, radiobuttons, selects and other html elements.

It's crucially important to add the " ", " " and " " parameters to html tags you're creating. Typically you should do this:
 * set the  attribute to
 * set the  of the element to
 * set the  attribute to  . However it's not so for checkboxes, radiobuttons and selects.

Registering the input
For making out input work we need to properly register it. In MediaWiki it's done by calling the  inside the ParserFirstCallInit hook.

Adding css and javascript
So, our plain html version of an input is ready! But it's usually not enough because you probably want to style up you html element and add some animation or even program more complex behavior with JavaScript.

In MediaWiki we use ResourceLoader mechanism for that.

More examples
There are many examples of Form Inputs in  directory, and there are some inputs in  SemanticFormsInputs extension.