Wikimore

HTMLForm puede generar cualquier tipo de campo; a continuación se describirán opciones específicas de cada campo. Las opciones genéricas (las que cualquier campo puede asignar) se describen en el Tutorial 2.

Introducción

En $formDescriptor, hay dos formas de declarar un tipo de campo: por el atributo class o por el atributo type.

Utilizar el atributo class

En primer lugar, puedes inicializar el atributo class (no mezclar o confundir con cssclass)

'class' => 'HTMLTextField'

HTMLTextField: Un campo de texto simple
HTMLFloatField: Un campo de texto simple con validación de número de coma flotante
HTMLIntField: Un campo de texto simple con validación de número entero
HTMLUserTextField: Un campo de texto simple para nombres de usuario
HTMLTextAreaField: Un campo de texto extendido
HTMLSelectField: Un menú desplegable
HTMLSelectOrOtherField: Un menú desplegable con una opción 'otro' que activa un campo de texto simple
HTMLSelectAndOtherField: Un menú desplegable y un campo de texto simple
HTMLMultiSelectField: Lista de casillas de verificación
HTMLRadioField: Botones de radio
HTMLCheckField: Casilla de verificación única
HTMLCheckMatrix: Matriz bidimensional de casillas de verificación
HTMLInfoField: Solo texto, sin entrada de datos
HTMLSubmitField: Botón adicional de envío (HTMLForm siempre añade uno por defecto)
HTMLHiddenField: Campo oculto (dato que es necesario enviar, pero que no se muestra ni se edita)
HTMLTagFilter: Filtro de etiquetas
HTMLSizeFilterField: Filtro de tamaño del archivo
HTMLUsersMultiselectField: Selección múltiple de usuarios
HTMLTitleTextField: Caja de texto para recibir el nombre de la página
HTMLDateTimeField: Selector de fecha y hora

Utilizar el atributo type

En la sección anterior, utilizamos class; ahora, vamos a utilizar type. type proporciona un atajo de class, pero class tiene prioridad. ¡Esto significa que no debes utilizar ambos!

'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 (supuestamente para la validación del lado del cliente de HTML5, ¡NO HAY VALIDACIÓN DEL LADO DEL SERVIDOR AQUÍ!)
toggle: HTMLCheckFieldsimilar a check, pero mediante el uso de 'invert' => true, el estado predeterminado se puede alternar a activado
edittools: HTMLEditToolsinserta un mensaje de sistema, un contenito analizado de MediaWiki:Edittools

Objetivo

El siguiente código construye este formulario:

text

Un campo de texto simple con el nombre 'text':

$formDescriptor = [
    'text' => [
        'type' => 'text',
        'label' => 'text',
        // Valor predeterminado del campo
        'default' => 'Valeur par défaut',
        // Tamaño del campo
        'size' => 10,
        // Longitud máxima de la entrada
        'maxlength'=> 7, 
    ]
];

password

Un campo de texto que se muestra como campo de contraseña con el nombre 'password':

$formDescriptor = [
    'password' => [
        'type' => 'password',
        'label' => 'password',
        // Valor predeterminado del campo
        'default' => '',
        // Tamaño del campo
        'size' => 16,
        // Longitud máxima de la entrada
        'maxlength'=> 16,
    ]
];

float

Un campo de texto validado solo por números de coma flotante con el nombre 'float':

$formDescriptor = [
    'float' => [
        'type' => 'float',
        'label' => 'float',
         // Valor predeterminado del campo (recomendación: pon un número de coma flotante como predeterminado)
        'default' => 41.976,
         // Tamaño del campo
        'size' => 8,
		// Longitud máxima de la entrada
        'maxlength'=> 6,
        // Valor mínimo de la entrada
        'min' => 41,
        // Valor máximo de la entrada
        'max' => 43,
    ]
];

int

Un campo de texto validado solo por números enteros con el nombre 'int':

$formDescriptor = [
    'int' => [
        'type' => 'int',
        'label' => 'int',
        // Valor predeterminado del campo (recomendación: pon un número entero como predeterminado)
        'default' => 1789,
        // Tamaño del campo
        'size' => 4,
		// Longitud máxima de la entrada
        'maxlength'=> 4,
		// Valor mínimo de la entrada
        'min' => 0,
		// Valor máximo de la entrada
        'max' => 2011,
    ]
];

textarea

Un campo de texto extendido con el nombre 'textarea':

$formDescriptor = [
    'textarea' => [
        'type' => 'textarea',
        'label' => 'textarea',
		// Valor predeterminado del campo
        'default' => 'Valeur par défaut',
		// Número de filas (altura del campo)
        'rows' => 3, // Altura de visualización del campo 
    ]
]

select

Un menú desplegable con el nombre 'select':

$formDescriptor = [
    'select' => [
        'type' => 'select',
        'label' => 'select',
		// Las opciones disponibles en el menú (etiqueta => valor)
        'options' => [
            'Option 0' => 0, // depende de cómo lo veas, pero las claves y los valores están más bien mezclados aquí
            'Option 1' => 1, // 'Option 1' es el contenido que se muestra, pero '1' es el valor
            'Option 2' => 'option2id', // Resultado HTML = <option value="option2id">Option 2</option>
        ]
    ]
];

selectorother

Un menú desplegable con el nombre 'selectorother' y con una opción 'otro' que activa un campo de texto simple

$formDescriptor = [
    'selectorother' => [
        'type' => 'selectorother',
        'label' => 'selectorother',
		// Las opciones disponibles en el menú (etiqueta => valor)
        'options' => [
            'Option 0' => 0,
            'Option 1' => 1,
            'Option 2' => 'option2id',
        ],
		// Tamaño máximo del campo 'otro'
        'size' => 7,
		// Longitud máxima del campo 'otro'
        'maxlength'=> 10,
    ]
];

selectandother

Un menú desplegable y un campo de texto simple con el nombre 'selectandother':

$formDescriptor = [
    'selectandother' => [
        'type' => 'selectandother',
        'label' => 'selectandother',
		// Las opciones disponibles en el menú (etiqueta => valor)
        'options' => [
            'Option 0' => 0,
            'Option 1' => 1,
            'Option 2' => 'option2id',
        ],
		// Tamaño máximo del campo 'otro'
        'size' => 18,
		// Longitud máxima del campo 'otro'
        'maxlength'=> 10, 
    ]
];

multiselect

Campo de casillas de verificación con el nombre 'multiselect':

$formDescriptor = [
    'multiselect' => [
        'type' => 'multiselect',
        'label' => 'multiselect',
		// Las opciones disponibles en las casillas de verificación (etiqueta => valor)
        'options' => [
            'Option 0' => 0,
            'Option 1' => 1,
            'Option 2' => 'option2id',
        ],
		// Las opciones seleccionadas por defecto (identificadas por valor)
        'default' => [ 0, 'option2id' ],
    ]
];

radio

Campo de botones de radio con el nombre 'radio':

$formDescriptor = [
    'radio' => [
        'type' => 'radio',
        'label' => 'radio',
		// Las opciones disponibles en los botones de radio (etiqueta => valor)
        'options' => [
            'Option 0' => 0,
            'Option 1' => 1,
            'Option 2' => 'option2id',
        ],
		// Las opciones seleccionadas por defecto (identificadas por valor)
        'default' => 1,
    ]
];

check

Un campo con una sola casilla de verificación con el nombre 'mycheck':

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

checkmatrix

Una matriz bidimensional de casillas de verificación con el nombre 'checkmatrix':

$formDescriptor = [
    'checkmatrix' => [
        'type' => 'checkmatrix',
        'label' => 'checkmatrix',
        // Las columnas se combinan con las filas para generar las opciones disponibles en la matriz
        // etiqueta => valor
        'columns' => [
            // etiqueta => valor
            'Column A' => 'A',
            'Column B' => 'B',
            'Column C' => 'C',
        ],
        // Las filas se combinan con las columnas para generar las opciones disponibles en la matriz
        'rows' => [
            // etiqueta => valor
            'Row 1' => 1,
            'Row 2' => 2,
            'Row 3' => 3,
        ],
        'force-options-on' => [ 'C-2' ], // Opciones para marcar las casillas como activadas y habilitadas (identificadas por los valores)
        'force-options-off' => [ 'C-3' ], // Opciones para marcar las casillas como desactivadas y deshabilitadas (identificadas por los valores)
        'tooltips' => [ 'Row 3' => 'These options are in row 3.' ], // Texto emergente para añadir a la etiqueta de la fila 3
        'default' => [ 'A-1', 'B-3' ], // Opciones seleccionadas por defecto (identificadas por sus valores)
    ]
];

info

Una simple cadena de texto plano (sin entrada de datos) con el nombre 'info':

$formDescriptor = [
    'info' => [
        'type' => 'info',
        'label' => 'info',
        // Valor mostrado
        'default' => '<a href="https://wikipedia.org/">Wikipedia</a>',
        // Si es 'true', la cadena anterior no se escapará a HTML
        'raw' => true,
    ]
];

submit

Un botón de envío con el nombre 'submit'. Por defecto, ya hay uno al final del formulario, este es un botón adicional:

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

hidden

Una entrada de texto oculta con el nombre 'hidden':

$formDescriptor = [
    'hidden' => [
        'type' => 'hidden',
        'name' => 'hidden',
        // Valor para enviar
        'default' => 'This Intel Is Hidden',
    ]
];

También puedes utilizar $form->addHiddenField( 'name', 'value' ) para lograr el mismo objetivo.

tagfilter

Filtra sobre las etiquetas. Consulta la lista de etiquetas en Special:Tags.

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

sizefilter

Filtra por el tamaño. Consulta el ejemplo en Special:NewPages.

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

user

Caja de texto que toma el nombre de usuario existente de forma local como entrada.

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

usersmultiselect

Permite seleccionar varios usuarios. Consulta el ejemplo ⧼email-blacklist-label⧽ en las preferencias de usuario.

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

url

Caja de texto que toma una URL (http:// o https://) como entrada.

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

title

Caja de texto con autocompletado que toma el título de una página wiki como entrada.

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

date

Selector automático de fecha que toma una fecha como entrada.

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

time

Selector automático de hora que toma una hora como entrada.

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

datetime

Selector automático de fecha y hora que toma una fecha y hora como entrada.

$formDescriptor = [
    'datetimeSelector' => [
        'type' => 'datetime',
        'name' => 'datetime-input',
        'label' => 'Date and Time:',
        'min' => $min, // Establece $min como valor mínimo
        'max' => $max, // Establece $max como valor máximo
    ]
];

email

Caja de texto que toma una dirección de correo electrónico (abc@g.com) como entrada.

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

limitselect

Selector de menú desplegable para el límite.

$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,
        ],
    ]
];

Category:Tutorials/es