Extension:Page Forms/Input types

From MediaWiki.org
Jump to: navigation, search
Page Forms - navigation (viewTemplate:Page Forms navigation)
Basics Main pageExtension:Page Forms (talk) · Download and installationExtension:Page Forms/Download and installation · Quick start guideExtension:Page Forms/Quick start guide · HostingExtension:Page Forms/Hosting · Special pagesExtension:Page Forms/Special pages
Using Page Forms PF and templatesExtension:Page Forms/Page Forms and templates · Defining formsExtension:Page Forms/Defining forms   (Input typesExtension:Page Forms/Input types) · The "⧼formedit⧽" tabExtension:Page Forms/The "edit with form" tab · Linking to formsExtension:Page Forms/Linking to forms · Creating query formsExtension:Page Forms/Creating query forms
Resources for help Common problemsExtension:Page Forms/Common problems · Known bugs and planned featuresExtension:Page Forms/Known bugs and planned features · Getting supportExtension:Page Forms/Getting support · Developers' documentationExtension:Page Forms/Developers' documentation · TestingExtension:Page Forms/Testing
About Page Forms Authors and creditsExtension:Page Forms/Authors and credits · Version historyExtension:Page Forms/Version history · Sites that use Page FormsExtension:Page Forms/Sites that use Page Forms · Related extensionsExtension:Page Forms/Related extensions

This page covers the various input types available within Page Forms, and the parameters and other customizations that can be set for them.

The input types[edit]


The default input type; corresponds to the HTML "text" input.

Special parameters:

  • size=size - Specifies the width of the input, in characters.
  • maxlength=maximum length - Specifies the maximum allowed length of the input.
  • placeholder=placeholder text - Specifies help text that is displayed in the input until the user clicks on it.


Corresponds to the HTML <textarea> tag.

Page Forms support for the WikiEditor extension (in connection with the Header Tabs extension)

Special parameters:

  • rows=num rows - Specifies the number of rows.
  • cols=num cols - Specifies the number of columns.
  • maxlength=maximum length - Specifies the maximum allowed length of the input.
  • autogrow - Sets the textarea to "auto-grow" its height to match that of its contents, so that a scrollbar won't be needed.
  • editor=editor type - Adds a Javascript-based editor to the textarea to make editing its contents more user-friendly. Currently only one value is allowed: "wikieditor", for the WikiEditor extension (which must be installed for this to work). Unfortunately only one input within the form can have WikiEditor associated with it, due to a limitation in the WikiEditor extension. If you want to add any additional custom toolbars to WikiEditor, you will need to add them in the Javascript to ('#free_text').wikiEditor, just as they exist for ('#wpTextbox1').wikiEditor.
  • placeholder=placeholder text - Specifies help text that is displayed in the input until the user clicks on it.

text with autocomplete, textarea with autocomplete[edit]

These two inputs are displayed in the same way as the text and textarea input types, and they can be configured in the same way, but they also provide autocompletion - on one or multiple values. See the "#Setting values and mappings" and "#Autocompletion" sections below for how to customize the autocompletion.


Combobox input

The "combobox" input type provides a combo box interface: an input that functions like a regular autocomplete field, but has an additional down-arrow icon, like that of a dropdown, to let the user see all the available values at once. It is implemented using the Select2 JavaScript library.

Special parameters:

  • size=size - Specifies the width of the input, in characters.
  • existing values only - Disallows arbitrary values in the field.
  • placeholder=placeholder text - Specifies help text that is displayed in the input until the user clicks on it.
  • namespace=namespace - Prepends the specified namespace to the selected value.


Tokens input

This input type "tokenizes" the values in the field, i.e puts a block around each value to make it a single unit instead of just a string of characters. These "tokens" can then also be rearranged. Like "combobox", this input is implemented using the Select2 JavaScript library.

Special parameters:

  • size=size - Specifies the width of the input, in characters.
  • max values=max values - Specifies the maximum number of allowed values.
  • existing values only - Disallows arbitrary values in the field.
  • placeholder=placeholder text - Specifies help text that is displayed in the input until the user clicks on it.
  • namespace=namespace - Prepends the specified namespace to each selected value.

By default, "tokens" appears as a single-row input, then expands vertically if necessary as more values are added. In some cases, you may want this input to appear taller than one row when it starts out, to make it clearer to users that it will expand. To do that for a single input, add a class parameter to the field tag, like "|class=ClassName", then add something like the following to MediaWiki:Common.css:

.ClassName, .ClassName .select2-choices {

If you want this to apply to all "tokens" inputs in the wiki, add something like this to MediaWiki:Common.css instead:

#sfForm .select2-container-multi .select2-choices {
        min-height: 60px;


The "radiobutton" input corresponds to the HTML "radio" input. It shows a set of values from which the user can only choose one.

By default, the first radiobutton value is "None", which lets the user choose a blank value. To prevent "None" from showing up, you must make the field "mandatory", as well as making one of the allowed values the field's "default=" value.


The "dropdown" input corresponds to the HTML <select> tag. It shows a dropdown list of values, from which the user can only choose one.


The "checkboxes" input displays checkboxes to let the user choose any number of values.


The "listbox" input corresponds to the HTML <select> tag, with the "multiple" attribute added. It shows a vertical list of options, where the user can select any number of values.

Special parameters:

  • size=size - Specifies the height of the listbox.


The "tree" input type allows for a hierarchical, tree-style input, where all the values have either radiobuttons or checkboxes next to them, depending on whether the field can hold one item or many. Values can either come from a category tree within the wiki, or be set manually within the form definition.

How does this input know whether it can hold one or multiple values, and should thus display radiobuttons vs. checkboxes? It checks whether the field in the template is defined as holding a list of values (using #arraymap) or not. This check is not perfect, though. If the tree input is showing radiobuttons instead of checkboxes, you just need to add the parameter "|list" to the field tag in the form definition, to establish that this is a list.

Depending on the source of the values, you need to specify one of these two additional parameters:

  • top category= - sets the name of the category at the top of the "tree".
  • structure= - sets the entire tree structure; should use wikitext-style bullets to set the depth level.

If you use the "structure" parameter, it should look something like this:

{{{field|Location|input type=tree|structure=*Universe
**Milky Way Galaxy
***Solar system
**Andromeda Galaxy

You can also optionally set these parameters:

  • height= - sets the height, in pixels, of the box in which the tree appears.
  • width= - sets the width, in pixels, of the box in which the tree appears.
  • delimiter= - sets the delimiter when the field can hold a list of values. Default is ','.
  • hideroot - hides the name of the top category.
  • depth= - sets the number of levels of the three that are shown at the beginning. Default is 10.

You can see a sample form that uses this input type here.

For category names[edit]

If you're using the "tree" input type to display a category tree, note that this input will print out only the names of the categories selected, without the "Category:" namespace before it; so if you want that to show up in the page as well, the template will have to add it.

If the field specifies multiple categories, and the template uses #arraymap to do it, the call to #arraymap should look something like:

{{#arraymap:{{{Categories|}}}|,|x|[[Category:x]] |<nowiki> </nowiki>}}

...in other words, you need to specify the final "delimiter" parameter for #arraymap, and make it a space, blank or something similar, to avoid printing commas between the category tags.


A single checkbox, used for boolean values.


This input contains three separate entries, for the year, month and day.


The "datetime" input is similar to the "date" input, but includes additional entries for hours, minutes, seconds and AM/PM.

Special parameters:

  • include timezone - specifies that a time zone entry should also be included.


"year" is a simple text input that is used to get a year-only value for a date field.


A datepicker input with calendar opened

"datepicker" lets the user pick a date with the help of a JavaScript-based popup calendar. This input has many optional parameters; see here for the complete list.


"datetimepicker" is a JavaScript-based input type very similar to "datepicker", but it includes popups for selecting both the date and time. Its set of parameters is identical to that of "datepicker" - see above.


The "rating" input type displays a set of stars to let the user enter a rating.

Special parameters:

  • star width - specifies the width (and height) of each star. Default is 24px.
  • num stars - specifies the number of stars to display. Default is 5.
  • allow half stars - allow users to select half a star. Default is false; set to 'yes' (or any other value) to make true.

openlayers, googlemaps[edit]

The "openlayers" and "googlemaps" input types let you display a map to get a coordinate value, using the Google Maps or OpenLayers services, respectively.

If you are using the "googlemaps" input, you may need to get a Google Maps API key, then set it in LocalSettings.php via the $wgPageFormsGoogleMapsKey setting, for the input to display.

You can also optionally set these parameters for these input types:

  • height= - sets the height, in pixels, of the map.
  • width= - sets the width, in pixels, of the map.

Both formats, by default, rely on external JavaScript code. However, you can have the "openlayers" format use local JavaScript code instead, by just installing the OpenLayers extension.


Note that these two input types both send your wiki's data (that is, the data contained in the query results) to external services. They are the only part of the Page Forms code that sends data externally, other than autocompleting on outside values, though that one requires additional configuration to run. If you have a private wiki and are very concerned about no data getting out, you may want to add the following to LocalSettings.php:

$wgPageFormsDisableOutsideServices = true;

This will disallow the use of any outside services by Page Forms - which at the moment means disabling these two input types.


The "regexp" input type is not a true input type, but rather the ability to display another input (most often "text") with additional, regular-expression-based validation. See here for a more detailed explanation of this input type and its parameters.

Allowed input types for data types[edit]

Each defined data type, when using either Semantic MediaWiki or Cargo, has a default input type, and, when applicable, a default input size as well. Additionally, some data types have special handling if the field holds a delimited list of values, instead of just a single value.

Here are the defaults and the other allowed input types for each data type, for single values:

SMW data type Cargo data type Default input type Default size Other allowed input types
Page Page text with autocomplete 35 text, combobox, dropdown, textarea, textarea with autocomplete, tree
String (SMW < 1.9) String text 35 text with autocomplete, combobox, textarea, textarea with autocomplete
Text, String (SMW >= 1.9) Text textarea 5 x 30 text
Code N/A textarea 5 x 30 text
URL URL text 100 textarea
Number Integer, Float text 10 textarea
Date Date date datetime, year, datepicker
N/A Datetime datetime datetimepicker, date, year
Enumeration (any SMW property with defined "allowed values") Enumeration (any Cargo field with defined allowed values) dropdown radiobutton
Boolean Boolean checkbox dropdown, radiobutton
Geographic coordinate Coordinates openlayers googlemaps

And here are the default and other allowed input types for delimited lists of a certain data type:

SMW data type Cargo date type Default input type Default size Other allowed input types
Page Page tokens 100 text, textarea, text with autocomplete, textarea with autocomplete, tree, checkboxes
String Text text 100 textarea, textarea with autocomplete, text with autocomplete
Enumeration Enumeration checkboxes listbox

Setting values and mappings[edit]

For inputs that have a pre-determined set of values, whether they are hardcoded (like the "dropdown" input) or suggested (like "combobox"), the values must be defined somewhere. If you are using SMW or Cargo, these values may already be defined outside the form. However, you can always override them within the form - or set them for a field that otherwise has no values defined for it. The following parameters can be used in the "field" tag:

  • values=possible values - Specifies a set of either possible values or autocompletion values (depending on the input type) that this field can have, overriding whatever set of values may have been set from Semantic MediaWiki or Cargo. This set of values is separated by commas by default, but the delimiter can be modified using the delimiter= parameter.
  • values from property=property name - Similar to values=, but gets its values from the the set of all values that a certain SMW property points to. Note that there is no Cargo equivalent for this parameter; in the case of Cargo, the set of all values for the specified Cargo table/field are used when the cargo table= and cargo field= parameters are provided.
  • values from category=category name - Similar to values=, but gets its values from the names of all pages belonging to a specific category.
  • values from namespace=namespace name - Similar to values=, but gets its values from the names of all pages belonging to a specific namespace. (To get values from the main namespace, use "Main" for the namespace name, or just leave it blank.)
  • values from concept=concept name - Similar to values=, but gets its values from the names of all pages belonging to a specific SMW "concept".

There are several more options for the autocompletion-based inputs; see "Autocompletion", below.


You can have the set of values displayed to the user be different from the set of values that actually show up in the page's wikitext. If the values are page names, and those pages have a "display title" set that is different from their real page name, you can have the form display the display title instead by adding the following to LocalSettings.php:

$wgPageFormsUseDisplayTitle = true;

You can enable other such mappings using the following parameters:

  • mapping template=template name - Takes in the name of a "mapping template" (a template that takes in a single, unnamed parameter, i.e. {{{1|}}}, and displays a "mapped" string as a result), and uses that template to map every potential value, so that the values' "aliases" appear on the screen, and not the values themselves.
  • mapping property=property name - Used for fields that select pages with 'combobox', 'tokens', 'listbox', and 'dropdown' input types. For each possible value, displays a SMW property from that page rather than the title of the page, but saves the title of the selected page(s) as the field value. Used in conjunction with the values... parameters to get the list of possible values.
  • mapping cargo table=table name/mapping cargo field=field name - Similar to mapping property= except it is used for Cargo fields. Used in conjunction with values=, values from namespace=, values from category=, and cargo table=/cargo field=.


Four of the input types (tokens, combobox, text with autocomplete and textarea with autocomplete) use autocompletion — as the user starts typing, the input shows a dropdown list of possible completions.

If a field represents a Semantic MediaWiki property, or Cargo field, of type "Page", autocompletion will be enabled by default — the field will autocomplete on the names of all pages that are already pointed to by that property or field. For any other type, there is no default autocompletion, but you can achieve this same effect simply by setting the input type to one of the four types that have autocompletion.

You can manually set a field to autocomplete on the set of values from an SMW property, a Cargo field, a category, a namespace, a "concept", or a manually-set list, by using one of the "values ..." parameters - see "Setting values and mappings", above.

You can also autocomplete based on values outside the wiki, contained in web pages, databases, files, etc.; see "Autocompleting on outside values", below for the various ways to do this.

If a field is specified to hold multiple values, autocompletion will, by default, support multiple values: after a value is entered, and a delimiter placed, a new autocompletion will start for the next value. You can manually specify that a field should have multiple-value autocompletion, by adding the "list" parameter to the field's definition. You can also specify the delimiter for this list of values, using the "delimiter=..." parameter (the default is a comma).

By default, the maximum number of autocompletion possibilities that a field will offer is 1,000; this is for performance reasons. To change this number, change the value of $wgPageFormsMaxAutocompleteValues in LocalSettings.php.


You can disable autocompletion, if it's enabled by default for a field, by setting the input type to be simply "text" or "textarea".

Remote autocompletion[edit]

The set of a field's possible values for autocompletion is, by default, contained right within the form's HTML page, in a JavaScript declaration. For performance reasons, there is a limit to how many values can be placed in the page; by default the limit is set to 100. After that number is reached, remote autocompletion is done instead, where autocompletion happens through an Ajax call to the server, based on what the user has typed. This type of autocompletion is slower, but allows for many more autocompletion results.

You can change the default by adding something like the following to LocalSettings.php:

$wgPageFormsMaxLocalAutocompleteValues = 200;

Matching on every character[edit]

By default, Page Forms autocompletion matches on the beginning of every word in the set of possible values. However, you can change autocompletion to instead match on every character, by adding the following line to LocalSettings.php:

$wgPageFormsAutocompleteOnAllChars = true;

This feature is especially important for wikis that have values with non-ASCII characters, such as wikis in languages with non-Roman alphabets; since the default, word-based autocompletion doesn't yet work with non-ASCII characters.

Autocompletion on characters with accents[edit]

Autocomplete on characters with accent

Flexible autocompletion for characters with accents is supported by the combobox and tokens input type.

Accent-folding has its limitations but it can help make some important yet overlooked user interactions work better. An accent-folding function essentially maps Unicode characters to ASCII equivalents. With accent-folding, it doesn’t matter whether users search for cafe, café or even çåFé; the results will be the same.

Autocompleting on outside values[edit]

There are two ways to have a field autocomplete using data from outside the wiki - one is from a URL that takes in a substring and returns data in JSON format similar to JSON returned by MediaWiki API and the other is to use External Data extension to fetch data from some external/internal source.

From an outside URL[edit]

You can have a field autocomplete on values from outside the wiki,using the following parameter:

  • values from url=URL identifier

To do so, take the following steps:

  1. Create a page/web service that takes in a substring via the query string, and displays a set of completion values. Page Forms expects to get a JSON format response with a toplevel key of "pfautocomplete" and an array of objects with the "title" key marking the values of possible completions. You can see a brief example of this from this API call on semantic-mediawiki.org.
    For example, if you had a list of three countries -- Uruguay, Germany, and Japan -- and were asked for a list of possible completions for "an", you would return:
    This also makes it easy to autocomplete on the values from another wiki.
  2. Decide on a short string to represent this URL.
    For example, the service providing lookups in our list of countries could be called "countryLookup".
  3. Add the short string to the array in $wgPageFormsAutocompletionURLs in your LocalSettings.php to configure Page Forms to use your URL when it sees the string. Put "<substr>" where you want the user's input will go.
    In our example, if we want Page Forms to feed the user's keystrokes to the url http://example.dom/countryLookup.php via the url parameter "c", we'd put:
    $wgPageFormsAutocompletionURLs['countryLookup'] = 'http://example.dom/countryLookup.php?c=<substr>';
  4. Add the parameter "values from url=URL-identifier-string" to the relevant field in the form definition.
    For our country example, we might have a field that looks like
    {{{field|country|input type=tokens|values from url=countryLookup}}}

Using the External Data extension[edit]

Icon images associated with autocomplete values, using "values from external data"

The External Data extension (ED) supports retrieving data from a number of sources which include external URLs, regular wiki pages, uploaded files, files on the local server, databases and LDAP directories.

To autocomplete using ED, you need to first call any of ED's "#get_..._data" parser functions within the form definition (preferably at the bottom of the form definition, to avoid unnecessary line breaks). This will fetch data that can then be used in the field tags. (See the External Data documentation for how to call these.) Then the field tag needs to contain this parameter:

  • values from external data=variable name

Here is a sample call to #get_web_data to fetch data from some URL:

{{#get_web_data:url=URL |format=csv with header |data=title_variable_name=external_variable_name1,image_variable_name=external_variable_name2, description_variable_name=external_variable_name3}}

Assuming a form definition contains a call like that, a field tag can then use the values retrieved for autocompletion - not just to set the autocomplete values themselves, but also, if the input type is "combobox" or "tokens", to set a corresponding thumbnail image and description for each one.

Assuming our External Data call retrieved three "columns" of values, as the one above does, the field tag using this data could look like:

{{{field|...|values from external data=title_variable_name|image=image_variable_name|description=description_variable_name}}}

Dependent autocompletion[edit]

You can set a field's autocompletion values to be based on the value a user has already set of another field in the form. This is done with the parameter values dependent on=, which specifies that the current set of allowed values for this field are all the values taken by this same field from pages where "field name" is equal to the value selected for "field name" in the current form.

The syntax for this parameter is:

  • values dependent on=template name[field name]

Is that confusing? If so, this example may help: if a template is called "Restaurant" and it has template fields (not properties) named "Country" and "City", and you want the set of cities that are used for autocompletion to be only those cities in the country that the user selected, then the field tag for the City field should look something like: {{{field|City|input type=combobox|values dependent on=Restaurant[Country]}}}.

Uploading files[edit]

If a field in the form is meant to hold the name of an uploaded file (say, an image), you can allow users to upload this file directly through the form. This is done simply by adding the parameter "uploadable" to that field's declaration in the form definition. This will add a link reading "Upload file" next to this field in the form; if the user clicks on this link, it will pop up a "lightbox"-style window (using the FancyBox Javascript library) that lets the user upload a file. Once the user has done so, the window will close, and the field will contain the name of the uploaded file. If the field is configured to contain a list of values, the new file name will be appended to whatever was there before; otherwise, the file name will overwrite whatever the field contained before.

For uploadable fields, you can also set the default filename of the uploaded files, by setting the "default filename=" parameter in the field definition. The value of this parameter can include parser functions, magic words and the like. It can also include the variable "<page name>", which gets substituted with the name of the page being added or edited. So adding to the field definition the parameter "default filename=Image for <page name>", for instance, for a page called "Abc", would set the default name of any uploaded file to "Image for Abc". Note that if you simply want to specify a default file to use such as "Imageneeded.png" the regular "default=Imageneeded.png" parameter will do.

You can see a demonstration of file uploading here.

Note that the upload window will not work if $wgBreakFrames is set to true in your LocalSettings.php.

You can also set uploadable fields to use the operating system's own uploading directly, instead of using MediaWiki's uploading system - this gives the user fewer options, but it is a simpler process, and on mobile devices it can present some interesting options, like uploading photos right after they are taken. To do this, add the following line to LocalSettings.php:

$wgPageFormsSimpleUpload = true;

The special parameters for uploadable fields are:

  • uploadable - Specifies that this is an uploadable field.
  • image preview - Specifies that a thumbnail of the uploaded image should be placed under the field in the form.
  • default filename=filename - Specifies the default filename for files uploaded with this field.

"show on select"[edit]

For inputs of type 'checkbox', 'checkboxes', 'radiobutton', 'dropdown' and 'listbox', the parameter show on select= can be used to specify that one or more elements on the page should only be displayed to the user if a certain value (or values) is selected within that input. See here for an example of this feature in use (note what happens when you select different values for the "Publication type" dropdown), and see here for how it was implemented in the form.

The syntax for this parameter is:

  • show on select=value 1=>element ID 1;value 2=>element ID 2;value 3=>element ID 3;etc.

For inputs of type 'checkbox', simply "show on select=element ID" should be used. Note that the element IDs cannot contain spaces and/or multibyte characters and cannot start with a number.