mozilla
Los resultados de tu búsqueda

    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.

    Vamos a añadir un campo de entrada de busqueda para el dialogo buscar archivo. Usaremos el elemento textbox.

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

    Añade estas líneas antes de los botones que creamos en la última sección. Si abres esta ventana, verás algo parecido a lo que se muestra en la imagen siguiente.

    Image:inputs1.jpg

    Nota que la etiqueta y el campo de entrada de texto ahora aparecen en la ventana. La caja de etxto es completamente funcional y puedes teclear dentro y seleccionar texto. Nota que el atributo de control tiene que estar siendo usado con la caja de texto seleccionada cuando la etiqueta se pulsa.

    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

    Etiquetas y colaboradores del documento

    Etiquetas: 
    Contributors to this page: Telco, Jorolo, golthiryus, Mpescador, teoli
    Última actualización por: teoli,