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: by the class or the type attributes.

Using class attribute

First you can set the class attribute (do not mix or confuse 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
  • 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 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 class, now we're going to use type. type provides a shortcut to class, but class takes priority. Therefore, you should 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
  • 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 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

File:HTMLFormTutorial.allfields.png

The following code builds this form:

text

A simple text field called 'text':

$formDescriptor = [
    'text' => [
        'type' => 'text',
        'label' => 'text',
        // <translate nowrap><!--T:130--> Default value of the field</translate>
        'default' => 'Valeur par défaut',
        // <translate nowrap><!--T:131--> Display size of field</translate>
        'size' => 10,
        // <translate nowrap><!--T:132--> Maximum length of the input</translate>
        'maxlength'=> 7, 
    ]
];

password

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

$formDescriptor = [
    'password' => [
        'type' => 'password',
        'label' => 'password',
        // <translate nowrap><!--T:134--> Default value of the field</translate>
        'default' => '',
        // <translate nowrap><!--T:135--> Display size of field</translate>
        'size' => 16,
        // <translate nowrap><!--T:136--> Maximum length of the input</translate>
        'maxlength'=> 16,
    ]
];

float

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

$formDescriptor = [
    'float' => [
        'type' => 'float',
        'label' => 'float',
         // <translate nowrap><!--T:165--> Default value of the field (recommendation: put a float as default)</translate>
        'default' => 41.976,
         // <translate nowrap><!--T:166--> Display size of field</translate>
        'size' => 8,
		// <translate nowrap><!--T:167--> Maximum length of the input</translate>
        'maxlength'=> 6,
        // <translate nowrap><!--T:168--> Minimum value for input</translate>
        'min' => 41,
        // <translate nowrap><!--T:169--> Maximum value for input</translate>
        'max' => 43,
    ]
];

int

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

$formDescriptor = [
    'int' => [
        'type' => 'int',
        'label' => 'int',
        // <translate nowrap><!--T:170--> Default value of the field (recommendation: put an int as default)</translate>
        'default' => 1789,
        // <translate nowrap><!--T:171--> Display size of field</translate>
        'size' => 4,
		// <translate nowrap><!--T:172--> Maximum length of the input</translate>
        'maxlength'=> 4,
		// <translate nowrap><!--T:173--> Minimum value for input</translate>
        'min' => 0,
		// <translate nowrap><!--T:174--> Maximum value for input</translate>
        'max' => 2011,
    ]
];

textarea

An extended text field called 'textarea':

$formDescriptor = [
    'textarea' => [
        'type' => 'textarea',
        'label' => 'textarea',
		// <translate nowrap><!--T:175--> Default value of the field</translate>
        'default' => 'Valeur par défaut',
		// <translate nowrap><!--T:176--> Amount of rows (height of the field)</translate>
        'rows' => 3, // <translate nowrap><!--T:215--> Display height of field </translate>
    ]
]

select

A drop-down menu called 'select':

$formDescriptor = [
    'select' => [
        'type' => 'select',
        'label' => 'select',
		// <translate nowrap><!--T:178--> The options available within the menu (displayed => value)</translate>
        'options' => [
            'Option 0' => 0, // <translate nowrap><!--T:216--> depends on how you see it but keys and values are kind of mixed here</translate>
            'Option 1' => 1, // <translate nowrap><!--T:217--> "Option 1" is the displayed content, "1" is the value</translate>
            'Option 2' => 'option2id', // <translate nowrap><!--T:218--> HTML Result</translate> = <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' => [
        'type' => 'selectorother',
        'label' => 'selectorother',
		// <translate nowrap><!--T:179--> The options available within the menu (displayed => value)</translate>
        'options' => [
            'Option 0' => 0,
            'Option 1' => 1,
            'Option 2' => 'option2id',
        ],
		// <translate nowrap><!--T:180--> Maximum size of the 'other' field</translate>
        'size' => 7,
		// <translate nowrap><!--T:181--> Maximum length of the 'other' field</translate>
        'maxlength'=> 10,
    ]
];

selectandother

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

$formDescriptor = [
    'selectandother' => [
        'type' => 'selectandother',
        'label' => 'selectandother',
		// <translate nowrap><!--T:182--> The options available within the menu (displayed => value)</translate>
        'options' => [
            'Option 0' => 0,
            'Option 1' => 1,
            'Option 2' => 'option2id',
        ],
		// <translate nowrap><!--T:183--> Maximum size of the 'other' field</translate>
        'size' => 18,
		// <translate nowrap><!--T:184--> Maximum length of the 'other' field</translate>
        'maxlength'=> 10, 
    ]
];

multiselect

Checkboxes field called 'multiselect':

$formDescriptor = [
    'multiselect' => [
        'type' => 'multiselect',
        'label' => 'multiselect',
		// <translate nowrap><!--T:185--> The options available within the checkboxes (displayed => value)</translate>
        'options' => [
            'Option 0' => 0,
            'Option 1' => 1,
            'Option 2' => 'option2id',
        ],
		// <translate nowrap><!--T:186--> The options selected by default (identified by value)</translate>
        'default' => [ 0, 'option2id' ],
    ]
];

radio

Radio buttons field called 'radio':

$formDescriptor = [
    'radio' => [
        'type' => 'radio',
        'label' => 'radio',
		// <translate nowrap><!--T:187--> The options available within the checkboxes (displayed => value)</translate>
        'options' => [
            'Option 0' => 0,
            'Option 1' => 1,
            'Option 2' => 'option2id',
        ],
		// <translate nowrap><!--T:188--> The options selected by default (identified by value)</translate>
        'default' => 1,
    ]
];

check

A single checkbox field called 'mycheck':

$formDescriptor = [
    'mycheck' => [
        'type' => 'check',
        'label' => 'mycheck',
    ]
];

checkmatrix

A 2D matrix of checkboxes called 'checkmatrix':

$formDescriptor = [
    'checkmatrix' => [
        'type' => 'checkmatrix',
        'label' => 'checkmatrix',
        // <translate nowrap><!--T:219--> The columns are combined with the rows to create the options available within the matrix</translate>
        // <translate nowrap><!--T:220--> displayed => value</translate>
        'columns' => [
            // <translate nowrap><!--T:221--> displayed => value</translate>
            'Column A' => 'A',
            'Column B' => 'B',
            'Column C' => 'C',
        ],
        // <translate nowrap><!--T:222--> The rows are combined with the columns to create the options available within the matrix</translate>
        'rows' => [
            // <translate nowrap><!--T:229--> displayed => value</translate>
            'Row 1' => 1,
            'Row 2' => 2,
            'Row 3' => 3,
        ],
        'force-options-on' => [ 'C-2' ], // <translate nowrap><!--T:223--> Options to make checked and enabled (identified by values)</translate>
        'force-options-off' => [ 'C-3' ], // <translate nowrap><!--T:224--> Options to make unchecked and disabled (identified by values)</translate>
        'tooltips' => [ 'Row 3' => 'These options are in row 3.' ], // <translate nowrap><!--T:225--> Tooltip to add to the Row 3 row label</translate>
        'default' => [ 'A-1', 'B-3' ], // <translate nowrap><!--T:226--> Options selected by default (identified by values)</translate>
    ]
];

info

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

$formDescriptor = [
    'info' => [
        'type' => 'info',
        'label' => 'info',
        // <translate nowrap><!--T:148--> Value to display</translate>
        'default' => '<a href="https://wikipedia.org/">Wikipedia</a>',
        // <translate nowrap><!--T:149--> If true, the above string won't be HTML escaped</translate>
        'raw' => true,
    ]
];

submit

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

$formDescriptor = [
    'submit' => [
        'type' => 'submit',
        'buttonlabel' => 'submit',
    ]
];

hidden

A hidden text input called 'hidden':

$formDescriptor = [
    'hidden' => [
        'type' => 'hidden',
        'name' => 'hidden',
        // <translate nowrap><!--T:152--> Value to send</translate>
        'default' => 'This Intel Is Hidden',
    ]
];

You can also use $form->addHiddenField( 'name', 'value' ) to accomplish the same goal.

tagfilter

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

$formDescriptor = [
    'tagFilter' => [
        'type' => 'tagfilter',
        'name' => 'tagfilter',
        'label-message' => 'tag-filter',
    ]
];

sizefilter

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

$formDescriptor = [
    'size' => [
        'type' => 'sizefilter',
        'name' => 'size',
        'default' => '',
    ]
];

user

Textbox which takes locally existing username as input.

$formDescriptor = [
    'username' => [
        'type' => 'user',
        'label' => 'Username:',
        'exists' => true,
    ]
];

usersmultiselect

Select multiple users. See the example ⧼email-blacklist-label⧽ in the user preferences.

$formDescriptor = [
    'size' => [
        'type' => 'usersmultiselect',
        'name' => 'size',
        'label' => 'Publishers:',
        'exists' => true,
    ]
];

url

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

$formDescriptor = [
    'urlinput' => [
        'type' => 'url',
        'name' => 'web-url',
        'label' => 'Url:',
    ]
];

title

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

$formDescriptor = [
    'titleinput' => [
        'type' => 'title',
        'name' => 'page-title',
        'label' => 'Title:',
    ]
];

date

Auto date selector which takes date as input.

$formDescriptor = [
    'dateSelector' => [
        'type' => 'date',
        'name' => 'date-input',
        'label' => 'Date:',
    ]
];

time

Auto time selector which takes time as input.

$formDescriptor = [
    'timeSelector' => [
        'type' => 'time',
        'name' => 'time-input',
        'label' => 'Time:',
    ]
];

datetime

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

$formDescriptor = [
    'datetimeSelector' => [
        'type' => 'datetime',
        'name' => 'datetime-input',
        'label' => 'Date and Time:',
        'min' => $min, // <translate nowrap><!--T:227--> Set $min as minimum value</translate>
        'max' => $max, // <translate nowrap><!--T:228--> Set $max as maximum value</translate>
    ]
];

email

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

$formDescriptor = [
    'myemail' => [
        'type' => 'email',
        'label' => 'Enter Your Email:',
        'autofocus' => true,
        'help' => 'This is the help message for myemail.',
    ]
];

limitselect

A drop-down menu selector for limit.

$lang = $this->getLanguage();
$formDescriptor = [
    'limit' => [
        'type' => 'limitselect',
        'name' => 'limit',
        'label' => 'Items per page',
        'options' => [
            $lang->formatNum( 20 ) => 20,
            $lang->formatNum( 50 ) => 50,
            $lang->formatNum( 70 ) => 70,
            $lang->formatNum( 100 ) => 100,
        ],
    ]
];
This article is issued from Mediawiki. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.