Manual:Extension/Forms/Form elements and settings: Difference between revisions

No edit summary
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 5: Line 5:
{| class="wikitable compact" style="width: 100%;"
{| class="wikitable compact" style="width: 100%;"
!Field
!Field
!Input type
!Functionality
!Functionality
|-
|-
|Book
|Book
|book
|auto-complete field that finds pages in the namespace "Book"
|auto-complete field that finds pages in the namespace "Book"
|-
|-
|Text
|Text
|text
|standard text field
|standard text field
|-
|-
|Textarea
|Textarea
|textarea
|multi-line text field
|multi-line text field
|-
|-
|Wikitext input
|Wikitext input
|wikitext
|multi-line text field that expects Wikitext syntax
|multi-line text field that expects Wikitext syntax
|-
|-
|Category multiselect
|Category multiselect
|category_multiselect
|token field to add one or  more categories to the page; values are separated with the <code>enter</code>-key
|token field to add one or  more categories to the page; values are separated with the <code>enter</code>-key
|-
|-
|Checkbox
|Checkbox
|checkbox
|single checkbox
|single checkbox
|-
|-
|Menu tag multiselect
|Menu tag multiselect
|menutag_multiselect
|multiple-value input; values are separated with the <code>enter</code>-key
|multiple-value input; values are separated with the <code>enter</code>-key
|-
|-
|Checkbox multiselect
|Checkbox multiselect
|checkbox_multiselect
|checkbox group (allows selecting multiple values in the group)
|checkbox group (allows selecting multiple values in the group)
|-
|-
|Dropdown
|Dropdown
|dropdown
|dropdown list with predefined options
|dropdown list with predefined options
|-
|-
|Number
|Number
|number
|integer field
|integer field
|-
|-
|Radio button
|Radio button
|radio
|single radio button (usually not used in a manually completed form)
|single radio button (usually not used in a manually completed form)
|-
|-
|Radio group
|Radio group
|radio_multiselect
|radio buttons for toggling a selection (allows selecting only one value in the group)
|radio buttons for toggling a selection (allows selecting only one value in the group)
|-
|-
|File chooser
|File chooser
|select_file
|selects a file in the wiki
|selects a file in the wiki
|-
|-
|Title input
|Title input
|title
|auto-complete field for wiki pages
|auto-complete field for wiki pages
|-
|-
|Combo box
|Combo box
|combobox
|combines a ''text input field''  and a ''dropdown list''. Users can select a predefined value or type their own.
|combines a ''text input field''  and a ''dropdown list''. Users can select a predefined value or type their own.
|-
|-
|Password input
|Password input
|password
|sets a password with a password and password-repeat field. This is not used in forms for the target types <code>JSON on wikipage</code>, <code>Template</code> or <code>Email</code>, as the password is stored in plain text.
|sets a password with a password and password-repeat field. This is not used in forms for the target types <code>JSON on wikipage</code>, <code>Template</code> or <code>Email</code>, as the password is stored in plain text.
|-
|-
|Tag input
|Tag input
|tag
|token field to add multiple values; values are separated with the <code>enter</code>-key
|token field to add multiple values; values are separated with the <code>enter</code>-key
|-
|-
|Date
|Date
|date
|same as ''Date picker''
|same as ''Date picker''
|-
|-
|Title input
|Title input
|title
|selects page titles in the wiki
|selects page titles in the wiki
|-
|-
|User input
|User input
|user_picker
|username that exists in the wiki
|username that exists in the wiki
|-
|-
|Group input
|Group input
|group_picker
|group name that exists in the wiki
|group name that exists in the wiki
|-
|-
|Group multiselect
|Group multiselect
|group_multiselect
|multiple group names
|multiple group names
|-
|-
|User multiselect
|User multiselect
|user_multiselect
|multiple user names
|multiple user names
|-
|-
|Title multiseslect
|Title multiseslect
|title_multiselect
|multiple page titles
|multiple page titles
|-
|-
|Date picker
|Date picker
|date_picker
|calendar widget
|calendar widget
|-
|-
|Percent
|Percent
|percent
|integer value
|integer value
|}
|}
Line 89: Line 116:
{| class="wikitable compact" style="width: 100%;"  
{| class="wikitable compact" style="width: 100%;"  
!Element
!Element
!Input type
!Description
!Description
|-
|-
|Static Wikitext
|Static Wikitext
|static_wikitext
|non-editable text
|non-editable text
|-
|-
|Button
|Button
|button
|triggers an action (requires a defined event listener)
|triggers an action (requires a defined event listener)
|-
|-
|Message banner
|Message banner
|message
|message that can be shown anywhere in the form;
|message that can be shown anywhere in the form;
the type that is set (notice, error, warning, success) provides the visual formatting
the type that is set (notice, error, warning, success) provides the visual formatting
|-
|-
|Partial form import
|Partial form import
|form_input
|adds form fields from another form
|adds form fields from another form
|-
|-
|Icon
|Icon
|icon
| -
| -
|-
|-
|Indicator
|Indicator
|indicator
| -
| -
|-
|-
|Label
|Label
|label
| -
| -
|-
|-
|[[Manual:Extension/Forms/Progress bar|Progress bar]]
|[[Manual:Extension/Forms/Progress bar|Progress bar]]
|progress_bar
|visual representation of the number of completed steps in a form such as a checklist
|visual representation of the number of completed steps in a form such as a checklist
|-
|-
|Section label
|Section label
|section_label
|a heading to a form section
|a heading to a form section
|-
|-
|HR
|HR
|hr
|a visual separator line
|a visual separator line
|}
|}
Line 226: Line 264:
|
|
|Password strength
|Password strength
|weak:
|weak: <br>
medium:
medium: <br>​strong:
strong:
|-
|-
| rowspan="2" |Tag
| rowspan="2" |Tag
Line 270: Line 307:
|-
|-
|Enable intermediate saving
|Enable intermediate saving
|form instances show both a <code>Save</code> end a <code>Save & Close</code> button;
|form instances show both a <code>Save</code> and a <code>Save & Close</code> button;
the <code>Save</code> button saves the form values and keeps the form in edit-mode.
the <code>Save</code> button saves the form values and keeps the form in edit-mode.
|}
|}

Latest revision as of 07:42, 2 June 2026


Form elements[edit | edit source]

It is possible to add the following form fields to your form:

Inputs[edit | edit source]

Field Input type Functionality
Book book auto-complete field that finds pages in the namespace "Book"
Text text standard text field
Textarea textarea multi-line text field
Wikitext input wikitext multi-line text field that expects Wikitext syntax
Category multiselect category_multiselect token field to add one or more categories to the page; values are separated with the enter-key
Checkbox checkbox single checkbox
Menu tag multiselect menutag_multiselect multiple-value input; values are separated with the enter-key
Checkbox multiselect checkbox_multiselect checkbox group (allows selecting multiple values in the group)
Dropdown dropdown dropdown list with predefined options
Number number integer field
Radio button radio single radio button (usually not used in a manually completed form)
Radio group radio_multiselect radio buttons for toggling a selection (allows selecting only one value in the group)
File chooser select_file selects a file in the wiki
Title input title auto-complete field for wiki pages
Combo box combobox combines a text input field and a dropdown list. Users can select a predefined value or type their own.
Password input password sets a password with a password and password-repeat field. This is not used in forms for the target types JSON on wikipage, Template or Email, as the password is stored in plain text.
Tag input tag token field to add multiple values; values are separated with the enter-key
Date date same as Date picker
Title input title selects page titles in the wiki
User input user_picker username that exists in the wiki
Group input group_picker group name that exists in the wiki
Group multiselect group_multiselect multiple group names
User multiselect user_multiselect multiple user names
Title multiseslect title_multiselect multiple page titles
Date picker date_picker calendar widget
Percent percent integer value

Other[edit | edit source]

Element Input type Description
Static Wikitext static_wikitext non-editable text
Button button triggers an action (requires a defined event listener)
Message banner message message that can be shown anywhere in the form;

the type that is set (notice, error, warning, success) provides the visual formatting

Partial form import form_input adds form fields from another form
Icon icon -
Indicator indicator -
Label label -
Progress bar progress_bar visual representation of the number of completed steps in a form such as a checklist
Section label section_label a heading to a form section
HR hr a visual separator line

Input field options[edit | edit source]

Each input field has a combination of any of these options:

main
Type Field Functionality
(all) Name field name stored in the database (avoid special characters)
Label text label shown to users
Help creates a tooltip pop-up next to the label
No layout hides the label
Show on mode in which this field is visible
Editable on sets when the field value can be edited
Book Return property ?
styling
Type Field Functionality
(all) CSS Classes add individual CSS-classes for use on MediaWiki:Common.css

- the class is set on the form field itself and does not include the label; multiple classes can be set together or you can add them separately

Style define an inline style that affects only this field. The style is applied to the wrapper and includes the label and the field
Textarea, Wikitext input Number of rows used for textareas
Placeholder text that is displayed before the user is typing a value (has no effect, if there is also a default value set)
Radio group No default value ensures that there is no pre-selected radio-button if a default would not make sense
Radio group, Checkbox multiselect Horizontal layout aligns multiselect checkboxes or radio groups horizontally
Button Icon displays an icon before the text, (e.g. a bootstrap-icon like bi bi-calendar)
Indicator displays an icon after the text (e.g. a bootstrap-icon like bi bi-arrow-right)
Framed when deactivated, the button looks like text only (and can be styled via CSS classes, e.g. btn button-warning)
other
Type Fieldset Field Functionality
(all) Custom widget properties Key
Value
Listeners Event event that is supported by OO.ui widgets, such as change, enter, focus, blur
Callback function that is called when the event occurs (can be declared in MediaWiki:Common.js for example
Default value /

Selected by default

value that is used if the user does not provide a value; field type "checkbox" has option "Selected by default" instead
Required form cannot be submitted without this field having a value
Password Password strength weak:

medium:
​strong:

Tag Input position inline:

outline:

Allow arbitrary It is possible to add values other than the allowed values (only necessary if allowed values are defined)

Form Settings[edit | edit source]

Appearance[edit | edit source]

Field Functionality
Title display title for the form
Display title shows the form title above each form instance
Display form name displays the name fo the form with label Form used as first form element

Behaviour[edit | edit source]

Field Functionality
Categories adds categories to each form instance; values are separated with the enter-key
Seal after creation form instances cannot be edited after the initial save
Enable intermediate saving form instances show both a Save and a Save & Close button;

the Save button saves the form values and keeps the form in edit-mode.

Infrastructure[edit | edit source]

Field Functionality
Resource loader dependencies
Keep track of revisions
Includable extends form
Abstract
Partial

Target[edit | edit source]

Field Functionality
Target type
Predefined page title for pages created using this form use the field name to insert the value from a form field;

for example: if you have a field with the name company_name, you can use {{company_name}} as page name or part of the page name.

Listeners[edit | edit source]

Field Functionality
Event each listener reacts to one of these events:
  • initCompleteForm: object is initialized
  • parseComplete: JSON/schema/config fully processed
  • renderComplete: UI fully rendered in DOM
  • beforeSubmitData: Right before submission
Callback calls a function when the event occurs;

see the progress bar example.



PDF exclude - start

To submit feedback about this documentation, visit our community forum.

PDF exclude - end