Help:Page forms

Page Forms is an extension to MediaWiki that allows users to add, edit and query data using forms

The input types

text

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.
autocapitalize= value	the autocapitalize</> parameter in the corresponding HTML tag to whatever value is set for this parameter; examples include on, off, sentences</>, etc.

textarea

Corresponds to the HTML <textarea> tag.

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. The following values are supported: wikieditor - uses the WikiEditor </> extension, which must be installed. 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 < name=3>('#wpTextbox1').wikiEditor</>. Note that there was a change to the WikiEditor code in the version that corresponds to MediaWiki version 1.34 that broke this functionality. It was restored in the 1.36 version of WikiEditor, with a corresponding change in version 5.1 of Page Forms. If you are using a version somewhere in the middle for WikiEditor, and you don't want to upgrade MediaWiki, you can manually apply the necessary change to the code, which can be found [< name="url">https://github.com/Nikerabbit/mediawiki-extensions-WikiEditor/commit/9a1188d0850418d8ae64bd06b7f39d9a8cbf127f</> here]. You should also upgrade to version 5.1 or later of Page Forms if you are using an older versions; or you can apply the Page Forms patch [< name="url">https://github.com/Nikerabbit/mediawiki-extensions-PageForms/commit/41e69bbe6928ac2a85aae6a23c7be009511fcbcb</> here]. tinymce - uses the TinyMCE </> extension, which must be installed. This does not work with multiple-instance templates. visualeditor - uses the VisualEditor </> extension, which must be installed. Another extension, VEForAll </>, must also be installed. If you would like the toolbar to show up at the top of the edit field rather than at the bottom (default) you will also have to add |class=toolbarOnTop</>
max height= maximum height	If VisualEditor is being used, specifies a maximum height (in pixels) for the textarea, since VE uses autogrow. The default value for this is set by the variable $wgPageFormsVisualEditorMaxHeight</>, which by default is 400</>.
placeholder= placeholder text	Specifies help text that is displayed in the input until the user clicks on it.

text with autocomplete, textarea with autocomplete

These were formerly real input types, but have been aliases for "combobox" or "tokens" (depending on whether the input holds a list of values, or just one) since version 5.0.

combobox

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 OOUI </> library.

Special parameters:

size= size	Specifies the width of the input, in characters.
height= height	Specifies the height of the combo box, in pixels.
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.

tokens

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.

This input is implemented using the [< name=url>https://select2.github.io/</> 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.

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 < name=3>MediaWiki:Common.css</>:

.ClassName, .ClassName .select2-choices {
        min-height:60px;
}

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

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

radiobutton

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.

dropdown

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

checkboxes

The "checkboxes" input displays checkboxes to let the user choose any number of values. 
If there are more than a certain number of checkboxes, "Select all" and "Select none" links will automatically appear above the set of checkboxes, allowing users to automatically check all or none of them.
This number is dictated by the variable $wgPageFormsCheckboxesSelectAllMinimum</>, which by default is < name=3>10</>, though it can be changed in LocalSettings.php</>.

Special parameters:

hide select all	hide the "Select all" and "Select none" links for this input, regardless of the number of values
show select all	display the "Select all" and "Select none" links for this input, regardless of the number of values

listbox

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, by the number of lines shown

tree

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
...etc.
}}}

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 tree that are shown at the beginning. Default is 10.

You can see a sample form that uses this input type [< name=url>http://discoursedb.org/wiki/Form:Category_input_test</> here].

For category names

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.

checkbox

A single checkbox, used for boolean values.

Special parameters:

label=

specifies a "label" for this checkbox, which would go into a <label></> tag.

date

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

datetime

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

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

datepicker

File:PF OOUI datepicker.png

A datepicker input with calendar opened

"datepicker</>" lets the user pick a date with the help of a JavaScript-based popup calendar.

Special parameters:

date format=	sets a custom date format, used only for the input field. An example would be DD-MM-YYYY</>.
first date=	sets the first date the user is allowed to select.
last date=	sets the last date the user is allowed to select.

The starting day of the week (e.g., Saturday, Sunday or Monday) is set based on the language of the wiki; it unfortunately cannot be set independently of the language.
If your wiki is in English and you would like weeks in the calendar input to start on Monday instead of Sunday (which is the default), you can do that by setting your wiki's language to be "en-gb</>" instead of "en</>".

datetimepicker

"datetimepicker</>" is a JavaScript-based input type very similar to "datepicker</>", but it includes popups for selecting both the date and time.
It defaults to yyyy/mm/dd hh:mm.
Its set of parameters includes all of those "datepicker</>" as well as the following:

mintime=	the minimum allowed time
maxtime=	the maximum allowed time
interval=	the interval (in minutes) between options shown to the user

rating

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.

googlemaps, leaflet, openlayers

The "googlemaps", "leaflet" and "openlayers" input types let you display a map to get a coordinate value, using the < name=4>Google Maps</>, < name=5>Leaflet</> or < name=6>OpenLayers</> services, respectively.

If you are using the "googlemaps" input, you may need to get a [< name=url>https://developers.google.com/maps/</> 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. <span class="citation wikicite" id="endnote_Both height</> and width</> are needed together to set the dimension.">^
starting bounds=	takes in a pair of coordinates to set the bounds of the map displayed; this parameter only applies if the input does not have a value. (Example value for this parameter: "-20,-15;50,55".)

The "leaflet" input type also allows one additional parameter:

image=

sets the specified image (which must be an image that was uploaded to the wiki) as the background for the map, instead of a geographical map.

All of the map inputs lets you enter an address to locate the coordinates more easily.

But if the form already contains one or more fields to enter the address, then the user may have to enter it twice - once to actually store the data, and the second to locate the coordinates.

To avoid users having to do this double work, you can have the address field(s) feed their values directly to the map when locating the point.

You can do that using the "feeds to map=" parameter - look for "feeds to map" here.

All of these formats, by default, rely on external JavaScript code.

However, you can have the "openlayers" format use local JavaScript code instead, by just installing the [[Special:MyLanguage/Extension:OpenLayers</>|OpenLayers]] extension.

Disabling

Note that these input types all 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 three input types.

regexp

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 [[Special:MyLanguage/Extension:Page Forms/Input types/Regexp</>|here]] for a  more detailed explanation of this input type and its parameters.