Editing Template:Inputbox/doc

{{Documentation subpage}}
<!--
     PLEASE ADD CATEGORIES WHERE INDICATED AT THE BOTTOM OF THIS PAGE
-->
{{Template shortcut|Editbox|Edit box|Input box}}
{{for|the MediaWiki extension|mw:Extension:InputBox}}
{{TOCright}}

== Usage ==

'''<NOWIKI>{{</NOWIKI>{{BASEPAGENAME}}}}''' will display a short line of text as if being the content of a basic input box. One use is to emulate the display of the [[WP:EDITSUMMARY|edit summary]] box.

; Code  : <CODE><NOWIKI>{{</NOWIKI>{{BASEPAGENAME}}|/* Heading */ my summary}}</CODE>
; Gives : {{{{BASEPAGENAME}}|/* Heading */ my summary}}

== Notes ==

* The box can be indented using standard prefixes such as ":", "*", or ":*".
* The box uses the appearance set for Wikipedia's "messagebox" (monobook: black text on white background, 80% the width of the screen), with nowrap.
* If you use a very long sentence, the text will continue to the right of the box and a horizontal scrollbar for the whole page appears. Can be changed with options, but with the scroll option the appearance is still different from the real edit summary box (which allows scrolling but does not show a bar).
* As with other templates, you will need to use "1=" if your text includes an equal sign, or enclose all or part of your text in <CODE>&lt;NOWIKI>...&lt;/NOWIKI></CODE>.
* '''Please do ''not'' [[WP:SUBST|subst:]] this template.'''

== Options ==

Default values are usually inherited from <CODE>[[Wikipedia:Catalogue of CSS classes|class=messagebox]]</CODE>.

; overflow
: How the text will overflow if longer than the box. Can be "hidden" (the box keeps it width, end of text is hidden), "scroll" (the box gets an underside horizontal scrollbar, end of text is available using it), or "visible" (the box will become as wide as needed to display a long text [works in Internet Explorer and Opera, reportedly does not work in Firefox]). (Defaults to "visible") – ''See also examples.''

; width
: Width of the box, can be "50%", "20em", "40ex", etc. (Defaults to "80%") – Relative values (such as %, em, and ex) are recommended over device-dependent ones (pixels).

; style
: Allows any additional semicolon-separated CSS style in the format "name:value; name:value; etc." (Defaults to empty) – "width" and "overflow" can be specified here when using this freeform string.

== Examples ==

; Code : <CODE><NOWIKI>{{Inputbox|width=20%|This is gonna be too large for me, ouch! ouch! ouch!}}</NOWIKI></CODE>
; Gives :              {{Inputbox|width=20%|This is gonna be too large for me, ouch! ouch! ouch!}}

This box isn't 20% wide but grows to make a long text visible (as per default overflow=visible).

<HR STYLE="text-align:left; width:33%; clear:all;" />

; Code  : <CODE><NOWIKI>{{Inputbox|width=20%|overflow=hidden|This is gonna be too large for me, ouch! ouch! ouch!}}</NOWIKI></CODE>
; Gives :               {{Inputbox|width=20%|overflow=hidden|This is gonna be too large for me, ouch! ouch! ouch!}}

This box sticks to 20% width and hides the end of a too long text.

<HR STYLE="text-align:left; width:33%; clear:all;" />

; Code  : <CODE><NOWIKI>{{Inputbox|width=20%|overflow=scroll|This is gonna be too large for me, ouch! ouch! ouch!}}</NOWIKI></CODE>
; Gives :               {{Inputbox|width=20%|overflow=scroll|This is gonna be too large for me, ouch! ouch! ouch!}}

This box sticks to 20% width but adds an underside scrollbar to make a too long text available.

<HR STYLE="text-align:left; width:33%; clear:all;" />

; Code : <CODE><NOWIKI>{{Inputbox|style=background-color:yellow; color:red; width:40%;|My eyes! My eyes!}}</NOWIKI></CODE>
; Gives:               {{Inputbox|style=background-color:yellow; color:red; width:40%;|My eyes! My eyes!}}

This box uses a freeform style to specify anything that can be done in CSS, including the width.

<HR STYLE="text-align:left; width:33%; clear:all;" />

; Full example with hidden table
<DIV STYLE="margin-left:2em; align:center; width:80%;">
''Proper security require that password fields obscure their contents.''
{| STYLE="align:center"
|-
| '''Login:''' || {{Inputbox|width=25ex|Komusou}}
|-
| '''Password:''' || {{Inputbox|width=25ex|********}}
|}
</DIV>

== Technical ==

Since an actual <NOWIKI><FORM><INPUT></NOWIKI> isn't allowed by wikicode, the appearance has to be emulated. The CSS code is designed to avoid hardcoded colors and sizes and should be modified with care, with respect to the following concerns:

* The <CODE>CLASS="messagebox"</CODE> inherits the colors and width of the user's skin for a message box. So, even if the color scheme is white text on black background, our emulated box will render accordingly (instead of using hardcoded black text on white background that would stick out).
* The <CODE>"border:0.15em;"</CODE> uses a non-absolute border width that will render approximatively the same on any screen (as opposed to a hardcoded width in pixels).
* The <CODE>"inset"</CODE> tweaks the inherited "messagebox" appearance to give a 3D inset box approximation, as rendered by each browser for this value.
* The <CODE>"padding:0.1em;"</CODE> is required to avoid the text being stuck to the border in browsers that strictly respect the padding value, and use again a relative em value instead of pixels. (For instance in Opera, "padding:0" would do what it says).
* The <CODE>"margin:0.1em;"</CODE> is intended to avoid several boxes stuck one to the other, using a relative em value instead of pixels.

The result isn't a perfect 3D input box, but should provide decent results for everyone, regardless of browser, color settings, and resolution.

== See also ==
*[[mw:Extension:InputBox]]
*{{tl|Input link}}
*{{tl|Input method}}

<includeonly>{{Sandbox other|
| <!-- CATEGORIES BELOW THIS LINE, PLEASE: -->
[[Category:Box templates]]
}}</includeonly>