Controles de entrada

XUL tiene elementos que son similares a los controles de los formularios de HTML

Campos de Entrada de Texto

HTML tiene un elemento de entrada que puede ser usado para mandos de entrada de texto. XUL tiene un elemento similar, textbox, usado para campos de entrada de texto. Sin cualquier atributo, el elemento textbox crea una caja en la cual el usuario puede entrar en el texto. Textboxes aceptan muchos de los mismos atributos que mandos de entrada de HTML. Lo siguiente es algunos de ellos:

id

Un identificador único de modo que usted puede identificar el textbox.

class

La clase de estilo del textbox.

value

Si usted quiere que el textbox tenga un texto por defecto, suminístrelo del atributo de valor.

disabled

Si vale verdadero desactiva el componente.

type

Existen una serie de valores que cambian el comportamiento del textbox. Por ejemplo 'password' hace que lo escrito quede oculto y suele usarse para campos de contraseña.

maxlength

El número máximo de los carácteres a los cuales el textbox permite.

Note que mientras en HTML, varias clases diferentes de campos pueden ser creadas con el elemento de entrada, en XUL hay elementos separados para cada tipo. El ejemplo siguiente muestra algún textboxes:

Ejemplo

<label control="some-text" value="Enter some text"/>
<textbox id="some-text"/>
<label control="some-password" value="Enter a password"/>
<textbox id="some-password" type="password" maxlength="8"/>

Los ejemplos textbox encima crearán las entradas de texto que sólo pueden ser usadas para entrar en una línea de texto. HTML también tiene un elemento textarea para crear una entrada de texto más grande el área. En XUL, usted puede usar el elemento textbox por esta razón también - dos elementos separados no son necesarios. Si usted pone el atributo de multilínea a verdadero, el campo de entrada de texto mostrará filas de mutliple.

Ejemplo

Código Ver en funcionamiento

<textbox multiline="true"
           value="Esto es un texto que podría ser ajustado en multiples líneas."/>

Similar al elemnento HTML textarea, puedes usar los tributos rows y cols para seleccionar el tamaño. Esto debería seleccionar el nñumero de filas y columnas de caracteres a mostrar.

<label value="Buscar por:" control="find-text"/>
<textbox id="find-text"/>

<button id="find-button" label="Find"/>

Cajas de Chekeo y Botones de Radio

Dos elementos adicionales son usados para crear las cajas de chekeo y los botones de radio. Son variaciones de botones. Las cajas de checkeo se usan para opciones que pueden ser habilitadas o desabilitadas. Los Botones de Radio pueden usarse para propositos similares cuando dentro de un grupo de elementos solo podemos seleccionar uno.

La mayoría de los atributos de las cajas de checkeo y los botones de radio coinciden con los de los botones. El ejemplo siguiente muestra algunas cajas de checkeo y botones de radio simples.

<checkbox id="case-sensitive" checked="true" label="Case sensitive"/>
<radio id="orange" label="Orange"/>
<radio id="violet" selected="true" label="Violet"/>
<radio id="yellow" label="Yellow"/>

La primera línea crea una caja de checkeo simple. Cuando el usuario hace click en la aja de checkeo, esta cambia entre checkeada y no checkeada. El atributo checked puede usarse para indicar el estado por defecto. Puedes seleccionarlo como true o false. El atributo etiqueta puede usarse para asignar una etiqueta que aparezca despues de la caja de chekeo. Para los botones de radio, deberías usar el atributo selected en lugar del atributo checked. Seleccionalo a true para tener un botón de radio seleccionado por defecto, o dejalo para otros botones de radio.

Para que un grupo de botones de radio trabajen junto, necesitas usar el elemento radiogroup. Solo uno de los botones de radio en un grupo de botones de radio puede estar seleccionado. Pulsando en uno desactivaras el resto de los botones de radio en el mismo grupo. El siguiente ejemplo demuestra esto.

Ejemplo

Código Ver en funcionamiento

<radiogroup>
  <radio id="orange" label="Orange"/>
  <radio id="violet" selected="true" label="Violet"/>
  <radio id="yellow" label="Yellow"/>
</radiogroup>

Como los botones, la cajas de checkeo y los botones de radio estan hechos de una etiqueta y una imagen, donde la imagen cambia entre checkeado y no checkeado cuando se pulsa. Las cajas de checkeo tienen la muchos de los atributos de los botones:

label 

La etiqueta de las cajas de checkeo o botones de radio.

disabled 

Seleecciona entre true or false para habilitar o deshabilitar una caja de checkeo o botón de radio.

accesskey 

Las teclas de acceso rápido pueden usarse para seleccionar el elemento. La letra especificada es normalmente subrallada en la etiqueta.

Llevando el ejemplo Burcar Archivos más lejos

Código Ver en funcionamiento

En la siguiente sección, veremos algunos elementos para crear cajas de listas.

Categorías

links interwikis