Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML.
Tabla de contenidos
Bypass table of contentsEl elemento HTML input inserta uno de muchos tipos de controles en un formulario, usualmente destinado a recolectar información provista por el usuario. Una vez llenado, el contenido de estos controles puede ser anviado por el usuario y recibido por un agente procesador que manejará la información recolectada.
El tipo de control mostrado depende del atributo "type" que puede tomar uno de los diez valores siguiente.
Cuando este valor es establecido, un control de entrada de texto es mostrado. Este tipo de control puede recibir información textual.
Este control trabja de manera exacta a los controles de tipo "text", con la excepción de que oculta visualmente los caracteres ingresados reemplazándolos por puntos o asteriscos. esto es útil para proveer cierto nivel de protección de información/cotraseñas.
Una casilla de verificación es un control que permite a los usuarios cambiarlo entre dos valores: marcado y no marcado. Este tipo de control puede resultar útil para hacer simples preguntas "sí ó no" a los visitantes de la página. Un buen ejemplo de su uso puede ser un formulario donde el usuario debe seleccional hobbies o intereses (películas, radio, compras, etc.).
Muchas casillas de verificación pueden compartir un mismo nombre de control, permitiendo a los autores más de un valor para una sola propiedad.
Los botones radio trabajan de forma muy similar a las casillas de verificación, permitiendo a los usuarios elegir entre dos valores posibles: marcado y no marcado. La diferencia radica en la exclusividad: cuando muchos botones radio comparten un mismo valor en el atributo "name", sólo uno de ellos puede ser marcado, y cuando ocurre, todos los demás son automáticamente desmarcados.
Al definirse con este tipo, el elemento HTML input inserta un botón de envío. Este botón envía automáticamente la información recolectada al agente procesador cuando es presionado.
Cuando es presionado, un botón reset lleva la información en todos los controles del formulario a sus valores iniciales.
este tipo de control crea un botón regular (que luce igual a los botones submit y reset) que, a diferencia de los anteriores, no tiene ninguna acción asociada predeterminada. Si no se le asigna una acción manualmente, noda sucederá cuando sea presionado.
Este botón es mayormente utilizado para ejecutar funciones del lado cliente al ser presionado.
Este tipo de control consiste en una imagen, apuntada en el atributo "src", que se comporta casi exactamente como el botón submit. La diferencia con el mismo radica en que, al ser presionado, además de enviar el formulario, el control de tipo "image" también envía las coordenadas (desde la esquina superior izquierda de la imagen) donde ha ocurrido el click. Los nombres de las coordenadas se construyen utilizando el valor del atributo "name" del elemento, en la forma: nombreelemento.x and nombreelemento.y.
Un control de archivo permite la entrada y subida de archivos al servidor. Los usuarios deben especificar la ruta local del archivo como contenido del control. Para ayudar con esto, los navegadores usualmente agregan un botón que, cuando es presionado, abre un navegador de archivos que permite a los usuarios elegir el archivo visual y fácilmente.
Nota que para que la subida de archivos sea satisfactoria, el atributos "enctype" del formulario debe tomar el valor "multipart/form-data".
Los controles ocultos permiten a los autores insertar valores en un formulario que no serán mostrados al usuario pero si se enviarán con el mismo.
Un buen ejemplo de su uso son aquellos formularios complejos que consisten de dos o más estapas (como las encuestas), donde la transición de una etapa a la siguiente es lograda a través del envío de un formulario. entonces, los valores de las etapas anteriores son "guardadas" en controles ocultos.
Debajo, hay un ejemplo de un formulario con diferentes tipos de controles "input".
El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).
El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.
Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").
Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.
Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".
El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.
Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".
Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es "xml:lang". Para compatibilidad con los dos tipos de estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo "lang" ha sido completamente reemplazado por "xml:lang" y su uso ya no es válido.
Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:
Este atributo decide que tipo de control mostrará el elemento. Puede tomar cualquiea de los siguientes valores (insensibles a mayúsculas/minúsculas):
Asigna un nombre al elemento, que será usado por el agente procesador para identificar al control.
Establece el valor inicial del control. Este será el valor mostrado por el elemento cuando se cargue la página.
This attribute specifies the initial width for the control. For "text" and "password" inputs, it sets the width as a number of characters. For other controls, the width is set in pixels.
Cuando este atributo booleano está presente, los usuarios están imposibilitados para cambiar el control del contenido. Sin embargo, los controles "readonly" pueden recibir el enfoque y son enviados con el formulario.
Recuerda que en XHTML, los atributos booleanos debe tomar su propio nombre como valor (por ejemplo, nombreatributo="nombreatributo").
Como con el atributo "readonly", los usuarios no podrán cambiar el contenido del control cuando este atributo esté presente. Además, el control no podrá recibir el enfoque y su información no será enviada con el formulario.
Los navegadores habitualmente muestran los controles visuales de manera diferente, como si fueran semitransparentes, con una combinación de colores grises.
Recuerda que en XHTML, los atributos booleanos debe tomar su propio nombre como valor (por ejemplo, nombreatributo="nombreatributo").
Especifica la posición de este elemento en el orden de tabulación. El orden de tabulación define una secuencua con todos los elementos que pueden recibir el enfoque. Los usuarios pueden navegar esta secuencia mediante el teclado (usualmente con la tecla "tab").
Relaciona al elemento con una tecla. La mayoría de los navegadores permite acceder al elemento presionando dicha tecla mientras se mantiene presionada la tecla "alt". El resultado de la activacióndepende de la naturaleza del elemento. Para vínculos, esta acción automáticamente sigue el vínculo, mientras que otros elementos simplemente reciben el enfoque.
Define una lista, separada por espacios y/o comas, de tipos de contenido que el agente procesador debería manejar correctamente. Para el elemento HTML input, este atributo es únicamente útil cuando el atributo "type" tiene el valor "file".
Esto podría resultar útil al subir archivos, por ejemplo, para filtrar archivos en la coputadora cliente, que el agente no podrá manejar (por ejemplo, sólo permitir imágenes JPG ó GIF).
Establece el número máximo de caracteres que un usuario puede ingresar en un campo "text" ó "password". Los navegadores habitualmente deshabilitan la entrada cuando la longitud del contenido alcanza este límite.
Cuando este atributo booleano está presente, los botones radio o las casillas de verificación (cuando el atributo "type" tiene el valor "radio" ó "checkbox") aparecen seleccionados por defecto.
Recuerda que en XHTML, los atributos booleanos debe tomar su propio nombre como valor (por ejemplo, nombreatributo="nombreatributo").
el valor de este atributo apunta a la imagen que será usada por el botón gráfico, cuando el valor del atributo "type" sea "image".
Cuando el atributo "type" tenga el valor "image", este atributo proveerá una alternativa textual para el contenido de la imagen, y por lo tanto, deberá describir exactamente lo que la imagen intenta mostrar. Esto es vital al desarrollar sitios web que necesitan llegar a audiencias con discapacidades visuales.
El valor de este atributo apunta a un mapa de imagen (elemento HTML map) que será asociado a este elemento. Por lo tanto, este valor debe coincidir con el valor del atributo "name" en el mapa de imagen.
Este atributo es inútil si el valor del atributo "type" no es "image".
Este atributo booleano establece al control como un mapa de imagen del lado servidor, lo que significa que el punto donde el usuario haga click en la imagen al enviar el formulario también será enviado con el mismo como coordenadas "x" e "y".
Estas coordenadas definirán el número de píxeles desde la esquina superior izquierda de la imagen, y se nombrarán usando el valor del atributo "name" de la imagen: "nombre_elemento.x" para la coordenada horizontal y "nombre_elemento.y" para la vertical.
Este atributo es inútil si el valor del atributo "type" no es "image".
Recuerda que en XHTML, los atributos booleanos deben tomar a sus propios nombres como valor (por ejemplo, nombreatributo="nombreatributo").
Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.
define la alineación horizontal de su contenido. Los valores posibles, insensibles a mayúsculas/minúsculas, son:
Ve a la lista completa de eventos en HTML.
Diseño y desarrollo: Latitud29.com