HTMLForm/tutorial3

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 Tutorial 2.

Introduction

In $formDescriptor, there are two ways to declare a field type:

Class

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

'class' => 'HTMLTextField'

• HTMLTextField: A simple text field
• HTMLFloatField: A simple text field with float (number) validation
• HTMLIntField: A simple text field with integer validation
• 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 (what for?)
• 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 anyway...)
• HTMLHiddenField: Hidden field (data you need traveling, but not edited)

Type

Before in this tutorial, we used class, now we're going to use type. type provides a shortcut to class. Do not use both

'type' => 'text'

• 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

• email = HTMLTextField (supposedly for html5 client-side validation, NO SERVER-SIDE VALIDATION HERE!)

• toggle = HTMLCheckField simmilar to check, but through use of "invert"=>true 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 'text':

$formDescriptor['text'] = array(
                'type' => 'text',
                'label' => 'text',
                'default' => 'Valeur par défaut', # Default String in field
                'size' => 10, # Display size of field
                'maxlength'=> 7 # Input size of field
            );

password

A text field displayed like password field called 'password':

$formDescriptor['password'] = array(
                'type' => 'password',
                'label' => 'password',
                'default' => '', # Default String in field
                'size' => 16, # Display size of field
                'maxlength'=> 16 # Input size of field
            );

float

A text field validated only by floating numbers called 'float':

$formDescriptor['float'] = array(
                'type' => 'float',
                'label' => 'float',
                'default' => 41.976, # Default string in field (advise: put a float as default)
                'size' => 8, # Display size of field
                'maxlength'=> 6, # Input size of field
                'min' => 41, # Minimum value for input
                'max' => 43 # Maximum value for input
            );

int

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

$formDescriptor['int'] = array(
                'type' => 'int',
                'label' => 'int',
                'default' => 1789, # Default string in field (advise: put an int as default)
                'size' => 4, # Display size of field
                'maxlength'=> 4, # Input size of field
                'min' => 0,  # Minimum value for input
                'max' => 2011 # Maximum value for input
            );

textarea

An extended text field called 'textarea':

$formDescriptor['textarea'] = array(
                'type' => 'textarea',
                'label' => 'textarea',
                'default' => 'Valeur par défaut', # Default string in field
                'rows' => 3, # Display height of field
                'cols' => 30 # Display width of field
            );

select

A drop-down menu called 'select':

$formDescriptor['select'] = array(
                'type' => 'select',
                'label' => 'select',
                'options' => array( # The options available within the menu (displayed => value)
                    'Option 0' => 0, # depends on how you see it but keys and values are kind of mixed here
                    'Option 1' => 1, # "Option 1" is the displayed content, "1" is the value
                    'Option 2' => 'option2id' # Hmtl Result = <option value="option2id">Option 2</option>
                )
            );

selectorother

A dropdown menu with an 'other' option that toggles a simple text field on called 'selectorother':

$formDescriptor['selectorother'] = array(
                'type' => 'selectorother',
                'label' => 'selectorother',
                'options' => array( # The options available within the menu (displayed => value)
                    'Option 0' => 0,
                    'Option 1' => 1,
                    'Option 2' => 'option2id'
                ),
                'size' => 7, # Display size of 'other' field
                'maxlength'=> 10 # Input size of 'other' field
            );

selectandother

A dropdown menu and a simple text field called 'selectandother':

$formDescriptor['selectandother'] = array(
                'type' => 'selectandother',
                'label' => 'selectandother',
                'options' => array( # The options available within the menu (displayed => value)
                    'Option 0' => 0,
                    'Option 1' => 1,
                    'Option 2' => 'option2id'
                ),
                'size' => 18, # Display size of 'other' field
                'maxlength'=> 10 # Input size of 'other' field
            );

multiselect

Checkboxes field called 'multiselect':

$formDescriptor['multiselect'] = array(
                'type' => 'multiselect',
                'label' => 'multiselect',
                'options' => array( # The options available within the checkboxes (displayed => value)
                    'Option 0' => 0,
                    'Option 1' => 1,
                    'Option 2' => 'option2id'
                ),
                'default' => array(0, 'option2id') # The options selected by default (identified by value)
            );

radio

Radio buttons field called 'radio':

$formDescriptor['radio'] = array(
                'type' => 'radio',
                'label' => 'radio',
                'options' => array( # The options available within the checkboxes (displayed => value)
                    'Option 0' => 0,
                    'Option 1' => 1,
                    'Option 2' => 'option2id'
                ),
                'default' => 1 # The option selected by default (identified by value)
            );

check

A single checkbox field called 'check':

$formDescriptor['check'] = array(
                'type' => 'check',
                'label' => 'check',
            );

checkmatrix

A 2D matrix of checkboxes called 'checkmatrix':

$formDescriptor['checkmatrix'] = array(
                'type' => 'checkmatrix',
                'label' => 'checkmatrix',
                # The columns are combined with the rows to create the options available within the matrix
                # displayed => value
                'columns' => array(
                    # displayed => value
                    'Column A' => 'A',
                    'Column B' => 'B',
                    'Column C' => 'C'
                ),
                # The rows are combined with the columns to create the options available within the matrix
                'rows' => array(
                    # displayed => value
                    'Row 1' => 1,
                    'Row 2' => 2,
                    'Row 3' => 3
                ),
                'force-options-on' => array('C-2'), # Options to make checked and disabled (identified by values)
                'force-options-off' => array('C-3'), # Options to make unchecked and disabled (identified by values)
                'tooltips' => array( 'Row 3' => 'These options are in row 3.' ), # Tooltip to add to the Row 3 row label
                'default' => array('A-1', 'B-3') # Options selected by default (identified by values)
            );

info

Just raw text string (no input at all) called 'info':

$formDescriptor['info'] = array(
                'type' => 'info',
                'label' => 'info',
                'default' => '<a href="http://www.davidcanwin.com">DavidCanWin.com</a>',  # String in field
                'raw' => true # if true, the above string won't be html-escaped.
            );

submit

A submit button called 'submit' (there's already one by default at the end of the form, this is an additional button):

$formDescriptor['submit'] = array(
                'type' => 'submit',
                'label' => 'submit',
            );

hidden

An hidden text input called 'hidden':

$formDescriptor['hidden'] = array(
                'type' => 'hidden',
                'label' => 'hidden',
                'default' => 'This Intel Is Hidden' # String in field
            );