Extension:InputBox

Languages:

This code base is maintained by the Readers Experience team. Code review only for UBNs or security fixes.

**MediaWiki extensions manual**
InputBox Release status: stable

Implementation	Tag , Page action , Search
Description	Allows users to add predefined HTML forms to wiki pages
Author(s)	Erik Möller Leonardo Pimenta Rob Church Trevor Parscal Daniel Schuba
Latest version	Continuous updates
MediaWiki	>= 1.45
Database changes	No
License	MIT License
Download	Download extension Git ^[?]: Browse repository (Phabricator · GitHub) Gerrit code review Git commit log Download source tarball
Tags <inputbox>
Hooks used MediaWikiPerformAction ParserFirstCallInit SpecialPageBeforeExecute
Translate the InputBox extension if it is available at translatewiki.net
Issues	Open tasks · Report a bug

The InputBox extension adds already created HTML forms to wiki pages. Users can "complete" a form (entering text, selecting menu items, etc.) by entering text into the box.

InputBox was originally created by Erik Möller for the purpose of adding a Create an article box to Wikinews.

Installation

[edit ]

This extension comes with MediaWiki 1.21 and later, so you do not need to download it. The remaining configuration instructions must still be followed.

Download and move the extracted InputBox folder to your extensions/ directory.
Developers and code contributors should install the extension from Git instead, using:
```
cdextensions/
gitclonehttps://gerrit.wikimedia.org/r/mediawiki/extensions/InputBox
```
Add the following code at the bottom of your LocalSettings.php file:
```
wfLoadExtension( 'InputBox' );
```
Yes Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Example

[edit ]

Box for starting a new article.

Wiki code

[edit ]

<inputbox>
type = create
width = 30px <!-- with unit of measurement -->
break = no
placeholder = Page title
</inputbox>

Result

[edit ]

General syntax

[edit ]

Input boxes are constructed like this:

<inputbox>
type = <!-- <input> type == search search2 create comment commenttitle fulltext move -->
bgcolor = <!-- Background color of parent <form>. -->
width = <!-- Width of text field (searchbox) in 'characters'. Unit: Characters #Default: 50 -->
page = <!-- Wiki pagename (i.e. page title) to post comment to, or move page to. No [[X]]. -->
default = <!-- Initial value of the text field. -->
preloadtitle = <!-- Content to prepopulate the title field with for a new comment -->
preload = <!-- Content to prepopulate the source editor with for a new topic/comment, or new page. -->
editintro = <!-- Wiki pagename of page to be transcluded as 'help text' shown above source editor window. -->
hidden = <!-- Any value will hide the text field, but not buttons whose links will still work. -->
searchbuttonlabel = <!-- Visual label for "Search full text" in type == search == fulltext. -->
searchengine = <!-- optionally "MediaSearch" (Extension:MediaSearch) "Search" #Default: local wiki default. -->
fulltextbutton = <!-- Visual label for "Search full text" -->
labeltext = <!-- labeltext -->
break = <!-- break -->
namespaces = <!-- namespaces -->
prefix = <!-- prefix -->
placeholder = <!-- placeholder -->
minor = <!-- minor -->
nosummary = <!-- nosummary -->
summary = <!-- summary -->
id = <!-- id -->
inline = <!-- inline -->
dir = <!-- dir -->
preloadparams[] = <!-- preloadparams[] -->
searchfilter = <!-- searchfilter -->
useve = <!-- useve -->
usedt = <!-- usedt -->
arialabel = <!-- arialabel -->
buttonlabel = <!-- Visual label for primary search button. -->
</inputbox>

Buttons are not exposed to assistive technology: currently the button elements generated by this template have no accessible label. Screen readers therefore announce only the element role (for example, "Button.") rather than a meaningful label. There is no reliable way to add an accessible label without access to the HTML code.

The type parameter is mandatory. All other parameters are optional. preloadparams[] can appear more than once.

Box types

[edit ]

The default location of the "Submit" button(s) is below the input box.

The "Submit" button can be moved to the right by using the line break parameter to eliminate the line break between the box and the button: break=no.

Having the "Submit" button to the right is useful for search boxes when search suggestions would otherwise cover up a search button below the search box.

type	Example	Description
`search`		Creates a search box which has a default width of 50 characters. Information added in the text box is searched for exact page title (first button) or text in articles (second button).
`create`		Creates a new page. Information added in the text box is the name of the page to be created (or page to edit if it already exists).
`comment`		Adds a new section to the bottom of the page specified in the text box (creates the page if new).
`commenttitle`		Adds a new section with the section header typed into the text box. The title can be specified with `default=` parameter. The page has to be specified with `page=` parameter. For some reason this does NOT work when using the extension by invoking it with {{#tag}}, only when using `‎<inputbox>`. (introduced in rev:47203)
`fulltext`		Search only with the fulltext search button, without the exact match button ("Go" button). (introduced in rev:45269)
`move`		Move a page to a different name. This also doesn't work when creating it by invoking a tag. (introduced in gerrit:97559)

For type=search2, the default location for the search button is inline to the right. Currently, it does not seem to be possible to add other parameters to this type of input box. This search box searches the entire wiki that it is placed on.

type	Example
`search2`

Parameters

[edit ]

Parameter	Description	Scope	Result	Example	Compatibility
`arialabel=`	Supply the aria-label attribute to the InputBox to ensure generated markup is accessible to screen readers. See ARIA: aria-label attribute.	All types		<inputbox> type=search arialabel=Search the wiki </inputbox>	≥ 1.35 Gerrit change 572050
`bgcolor=`	Sets the table background color (HTML color values). Do not use quotes.	All types		<inputbox> type=search bgcolor=gray </inputbox>	?
`width=`	Sets the width of the InputBox in characters.	All types		<inputbox> type=create width=24 </inputbox>	?
`default=`	Default text to put in the InputBox.	All types		<inputbox> type=comment default=User talk:Eloquence </inputbox>	?
`preloadtitle=`	Default text to add as the title for a new comment.	comment		<inputbox> type=comment preloadtitle=My comment title default=Extension talk:InputBox </inputbox>	≥ 1.45 Gerrit change 1191433
`preload=`	The page under this title will be preloaded (see Manual:Creating pages with preloaded text ) into the blank editbox when a new page is created.	create, comment, commenttitle		<inputbox> type=create preload=Log </inputbox>	?
`preload=`	Enter the title of a non-existent page in the example InputBox above or below, and click "Create page" or "New section" respectively to test this effect.
`editintro=`	The page which is given under this parameter will be shown, as instructions, above the editing window.	create, comment		<inputbox> type=comment editintro=MediaWiki:Missingcommenttext </inputbox>	?
`buttonlabel=`	This label will be used for the main button of the form.	All types		<inputbox> type=comment buttonlabel=Add new rumor </inputbox>	?
`hidden=`	This specifies that there is no InputBox. It is used with parameter `default`, now not being a default, but the fixed value of the name of the page. Any value means yes/true.	create, comment		<inputbox> type=comment editintro=Extension:InputBox/editintro comment preloadtitle=Comment title preload=Extension:InputBox/preload hidden=yes default=Extension talk:InputBox buttonlabel=Post a comment on the talk page </inputbox>	?
`searchbuttonlabel=`	This label will be used for the "Search full text" button of the search form.	search, fulltext		<inputbox> type=search searchbuttonlabel=Dig deeper </inputbox>	?
`searchengine=`	If Extension:MediaSearch is installed, this parameter sets the search special page to either `Search` or `MediaSearch`. If this parameter is not used, the user's (or wiki's default) preference will be used.	search, search2		<inputbox> type=search searchengine=MediaSearch </inputbox>	≥ 1.45 Gerrit change 1167841
`fulltextbutton=`	Show the full text search button on search2 form	search2		<inputbox> type=search2 searchbuttonlabel=Dig deeper fulltextbutton=true </inputbox>	?
`labeltext=`	Text to display beside the button	search2	Look for:	<inputbox> type=search2 searchbuttonlabel=Dig deeper labeltext=Look for: </inputbox>	?
`break=`	Whether or not to insert a line break between the input box and the button(s). Defaults to yes (use a line break).	All types		<inputbox> type=create width=24 break=no </inputbox>	?
`namespaces=`	Support for namespace checkboxes in fulltext search. With "`Main**`", main article namespace is checked by default.	search, fulltext	Main Help	<inputbox> type=search namespaces=Main**,Help </inputbox>	?
`prefix=`	Narrow down search to pages beginning with certain prefix. Note this only works with certain search back-ends, currently only Extension:CirrusSearch . Defaults to empty string (search all pages). Create new page beginning with a certain prefix. In type=move, the prefix is prepended to the default parameter. Remark: underscores aren't recognized as spaces.	search, fulltext, create	The button below prefixes the name with `Special:Mypage/`.	<inputbox> type=search prefix={{FULLPAGENAME}}/Archive </inputbox>	?
`placeholder=`	Define placeholder text that will display in the input box when it is empty.	All types		<inputbox> type=search placeholder=Search this wiki </inputbox>	≥ 1.19
`page=`	Page to posts comment to, or page to move.	comment, move		<inputbox> type=comment page=Project:Sandbox </inputbox>
`minor=`	Minor edit.	comment, create		<inputbox> type=comment page=Project:Sandbox minor=true </inputbox>
`nosummary=`	Edit summary (headline) not required for new comment.	comment		<inputbox> type=commenttitle page=Special:Mypage/inputbox test nosummary=true </inputbox>
`summary=`	Edit summary or move reason.	create, move		<inputbox> type=create default=Special:Mypage/inputbox test summary=Foo </inputbox>
`id=`	ID attribute for `‎<form>`.	All types		<inputbox> type=comment page=Project:Sandbox summary=Foo id=bar </inputbox>	≥ 1.23 for some types
`inline=`	Make the InputBox be an inline element (no line break at beginning). Any value means yes/true.	search2	Text here:	Text here: <inputbox> type=search2 inline=true width=10 </inputbox>
`dir=`	Right to left (rtl) or left to right (ltr). Defaults to directionality of the page's language.	All types		<inputbox> dir=rtl type=comment page=Project:Sandbox summary=Foo </inputbox>
`preloadparams[]=`	Specify parameters to the preload text. See Creating pages with preloaded text.	create, comment, commenttitle		<inputbox> type=create preload=Log preloadparams[]=param1 preloadparams[]=param2 </inputbox>	≥ 1.25
`searchfilter=`	Specify parameters to append to the search	search, fulltext		<inputbox> type=search searchfilter=insource:foo </inputbox>	≥ 1.30
`useve=`	When creating a page the input box will use the new visual editor, if the extension is installed, and this parameter is set to any value.	create, comment		<inputbox> type=create break=no useve=true </inputbox>
`usedt=`	When adding a new section, the input box will open the DiscussionTools new topic tool, if the extension is installed, and this parameter is set to any value.	comment, commenttitle		<inputbox> type=commenttitle page=Project:Sandbox usedt=true </inputbox>

Applying create to an existing page simply gives the edit page. In that case preload is ignored. Applying comment for a new page works.

The texts taken from the MediaWiki: namespace are of course only examples, any existing page can be used for editintro or preload. Unfortunately preload does not yet work for the Upload summary.

Customizing with CSS

[edit ]

You can customize the inputbox in templates using CSS. First, wrap the inputbox in ‎<div> tags with an unique ID then use CSS selectors to change its appearance. You could also give the inputbox itself an ID and use the ID in the CSS selectors. You could also add a custom search button or icon.

Template:Exampleinputbox

<templatestylessrc="Template:Example/styles.css"/><divid="inputbox-search-wrapper">
{{#tag: inputbox|
type = search
id = inputbox-search
placeholder = Search all pages
namespaces = Main**,Help**
}}<divclass="inputbox-search-icon"></div>
</div>

Exampleinputbox/styles.css

#inputbox-search-wrapper{
box-sizing:border-box;
height:32px;
display:flex;
border:1pxsolidvar(--border-color-base,#a2a9b1);
border-radius:10px;
}
#inputbox-search-wrapperinput{
all:unset;
padding-left:8px;
padding-top:6px;
padding-bottom:6px;
width:180px!important;
font-family:'Helvetica Neue','Helvetica','Liberation Sans','Arial',sans-serif;;
font-size:14px;
line-height:20px;
color:var(--color-base--subtle,#72777d);
}
#inputbox-search-wrapperinput::placeholder{
font-family:'Helvetica Neue','Helvetica','Liberation Sans','Arial',sans-serif;;
font-size:14px;
line-height:20px;
color:var(--color-base--subtle,#72777d);
}
#inputbox-search-wrapperinput.mw-ui-button,
.searchbox.cdx-checkbox--inline,
#inputbox-search-wrapper.cdx-button,
#inputbox-search-wrapperdiv.mw-ui-checkbox{
display:none;
}
.inputbox-search-icon{
padding-left:8px;
width:25px;
background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/18px-Vector_search_icon.svg.png");
background-repeat:no-repeat;
background-position:center;
cursor:pointer;
}

Alignment

[edit ]

If you want to create an inputbox on the right side of the page, do something like:

<div style="float:right; width:42em">
<inputbox>
type=create
</inputbox>
</div>

Gives:

Using InputBox in a template

[edit ]

In order to create many similar input boxes, InputBox can be used in a template. However, passing template parameters to InputBox parameters only works if the ‎<inputbox>...‎</inputbox> tag is used via the #tag parser function with {{#tag:inputbox | ...}} inside the template.

The following example is a template to create a new wiki page from a named template:

{{#tag:inputbox |
type=create
buttonlabel=Create new {{{1|article}}}
preload={{{2|Template:Article}}}
}}

When instantiating the template, the first parameter gives the item that is created (default: article) as spelled out in the button, the second parameter gives the name of the template used to create the item (default: Template:Article).

E.g., the code for an input box to create a new project from a project template might look like this:

{{Template:CreateNew|project|Template:Project}}

Notes

[edit ]

This extension splits the parser cache based on the user interface language (git:e18b7e6), in order to show localized label texts.

Installation

Example

Wiki code

Result

General syntax

Box types

Parameters

Customizing with CSS

Alignment

Using InputBox in a template

Notes

See also