Manual:HTMLForm Tutorial 3

Any kind of field can be generated by HTMLForm, field-specific options will be described here. Generic options (those any field can be assigned) are described on tutorial2>Special:Mylanguage/Manual:HTMLForm Tutorial 2|Tutorial 2.

Introduction
In $formDescriptor, there are two ways to declare a field type: by the class or the type attributes.

Using class attribute
First you can set the class attribute (do not mix or confuse with cssclass)


 * HTMLTextField: A simple text field
 * HTMLFloatField: A simple text field with float (number) validation
 * HTMLIntField: A simple text field with integer validation
 * HTMLUserTextField: A simple text field for user names
 * HTMLTextAreaField: An extended text field
 * HTMLSelectField: A dropdown menu
 * HTMLSelectOrOtherField: A dropdown menu with an 'other' option that toggles a simple text field on
 * HTMLSelectAndOtherField: A dropdown menu and a simple text field
 * HTMLMultiSelectField: List of checkboxes
 * HTMLRadioField: Radio buttons
 * HTMLCheckField: Single checkbox
 * HTMLCheckMatrix: 2D matrix of checkboxes
 * HTMLInfoField: Just text, no input
 * HTMLSubmitField: Additional submit button (HTMLForm always adds one by default)
 * HTMLHiddenField: Hidden field (data you need to send, but not shown or edited)
 * HTMLTagFilter: tags>Special:Tags|Tags filter
 * HTMLSizeFilterField: File's size filter
 * HTMLUsersMultiselectField: Select Multiple Users
 * HTMLTitleTextField: Textbox to take Page Name
 * HTMLDateTimeField: Date and Time Selector

Using type attribute
Before in this tutorial, we used <tvar|class>class</>, now we're going to use <tvar|type>type</>. <tvar|type>type</> provides a shortcut to <tvar|class>class</>, but <tvar|class>class</> takes priority. Therefore, you should not use both!


 * text: HTMLTextField
 * password: HTMLTextField
 * textarea: HTMLTextAreaField
 * select: HTMLSelectField
 * radio: HTMLRadioField
 * multiselect: HTMLMultiSelectField
 * check: HTMLCheckField
 * checkmatrix: HTMLCheckMatrix
 * int: HTMLIntField
 * float: HTMLFloatField
 * info: HTMLInfoField
 * selectorother: HTMLSelectOrOtherField
 * selectandother: HTMLSelectAndOtherField
 * submit: HTMLSubmitField
 * hidden: HTMLHiddenField
 * tagfilter: HTMLTagFilter
 * sizefilter: HTMLSizeFilterField
 * user: HTMLUserTextField
 * usersmultiselect: HTMLUsersMultiselectField
 * url: HTMLTextField
 * title: HTMLTitleTextField
 * date: HTMLDateTimeField
 * time: HTMLDateTimeField
 * datetime: HTMLDateTimeField
 * limitselect: HTMLSelectField
 * email: HTMLTextField (supposedly for HTML5 client-side validation, NO SERVER-SIDE VALIDATION HERE!)
 * toggle: HTMLCheckField similar to <tvar|check>check</>, but through use of <tvar|invert> </> default state can be set to checked
 * edittools: HTMLEditTools inserts system message, a parsed content of MediaWiki:Edittools

Goal


The following code builds this form:

text
A simple text field called '<tvar|name>text</>':

password
A text field displayed like password field called '<tvar|name>password</>':

float
A text field validated only by floating numbers called '<tvar|name>float</>':

int
A text field validated only by integers called 'int':

textarea
An extended text field called '<tvar|name>textarea</>':

select
A drop-down menu called '<tvar|name>select</>':

selectorother
A dropdown menu with an 'other' option that toggles a simple text field on called '<tvar|name>selectorother</>':

selectandother
A dropdown menu and a simple text field called '<tvar|name>selectandother</>':

multiselect
Checkboxes field called '<tvar|name>multiselect</>':

radio
Radio buttons field called '<tvar|name>radio</>':

check
A single checkbox field called '<tvar|name>mycheck</>':

checkmatrix
A 2D matrix of checkboxes called '<tvar|name>checkmatrix</>':

info
Just raw text string (no input at all) called '<tvar|name>info</>':

submit
A submit button called '<tvar|name>submit</>'. By default, there's already one at the end of the form, this is an additional button:

hidden
A hidden text input called '<tvar|name>hidden</>':

You can also use <tvar|addhidden> </> to accomplish the same goal.

tagfilter


Filter on Tags. See the list of Tags at Special:Tags.

sizefilter


Filter on size. See the example on Special:NewPages.

user


Textbox which takes locally existing username as input.

usersmultiselect


Select multiple users. See the example <tvar|preferencelabel></> in the prefences>Special:Preferences#mw-prefsection-personal-email</>|user preferences.

url


Textbox which takes a web URL (http:// or https://) as input.

title


Autocomplete textbox which takes a title of a wiki page as input.

date


Auto date selector which takes date as input.

time


Auto time selector which takes time as input.

datetime


Auto date and time selector which takes date and time as input.

email


Textbox which takes an email address (abc@g.com) as input.

limitselect


A drop-down menu selector for limit.