Tag HTML input
Nota: Si no sabes lo que es un tag y/o cómo se debe utilizar, te recomendamos que leas nuestro tutorial "tags y atributos HTML" que puedes encontrar en nuestra sección de tutoriales HTML.
Descripción
El tag
HTML input es usado para mostrar controles que permiten a los usuario ingresar datos en un formulario. La conducta del control depende mayormente del atributo "type". Este atributo define el tipo de control que se mostrará.
El atributo "type" puede tomar varios valores serán descriptos a continuación.
text
Este valor define un control diseñado para entrada de texto. Este tipo de campo permite a los usuarios ingresar información textual. (por ejemplo, nombres, títulos, etc.).
password
Este tipo de control funciona exactamente como en tipo "text" con una pequeña diferencia: el tipo "password" usualmente oculta los caracteres ingresados usando puntos o asteriscos en su lugar.
checkbox
Cada "checkbox" (casilla de verificación) funciona como un interruptor "encendido/apagado" (valores booleanos). Este control es comunmente usado en formularios para seleccionar opciones, intereses, etc. Varios "checkbox" pueden compartir un mismo nombre de control (atributo "name"), permitiendo a los autores dar más de un valor a una misma propiedad.
radio
Los botones "radio" funcionan como las "checkbox". La diferencia es que los botones "radio", cuando comparten un mismo nombre de control, son exclusivos. Esto significa que solo uno de ellos puede ser elegido, y cuando es elegido, el resto automáticamente pierde la selección.
submit
El tipo "submit" crea un botón. Cuando un botón "submit" es presionado, el formulario es automáticamente enviado.
image
Este valor crea un botón "submit" que puede tomar un aspecto gráfico. Los botones gráficos también pueden ser usados como mapas de imagen. Cuando se lo presiona, un botón gráfico llamado "boton1" también envía las coordenadas del puntero (lugar de la imagen donde ocurrió el click): "boton1.x" y "boton1.y".
reset
Este tipo crea un botón. Cuando un botón "reset" es presionado, todos los campos del formulario son reestablecidos a sus correspondientes valores iniciales.
button
El tipo "button" crea un botón ordinario que no tiene ninguna función preestablecida. Las acciones para estos botones son usualmente definidas con scripts del lado cliente (por ejemplo, JavaScript).
hidden
Este tipo de control permite a los autores insertar valores en un formulario que no serán mostrados, pero que aún así serán enviados con el formulario. Estos valores son muy usados cuando los formularios consisten de dos o más etapas, donde la transición de una etapa a la siguiente se logra enviando un formulario. Entonces, los valores de la etapa anterior son "salvados" en controles "hidden".
file
Este tipo de control permite a los usuarios elegir un archivo para enviar. Este archivo es enviado con el formulario. Nota que para carga de archivos, el atributo "enctype" del formulario debe tomar le valor "multipart/form-data".
Atributos
El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en el documento y puede ser usado para referirse a ese elemento.
Ejemplo:
Code begin
<p id="parrafo1">Este es el primer párrafo nombrado parrafo1. Para cambiar dinámicamente las propiedades del mismo usa este identificador.</p>
Code end
El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento está asociado. Una clase provee atributos visuales para los elementos.
Ejemplo:
Code begin
<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" por Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" por Jhon L. Brooks... y es más importante que el anterior.</p>
Code end
Define un estilo visual para el elemento. Es una mejor práctica definir atributos en hojas de estilos externas agrupándolos en clases. Los atributos en el parámetro "style" deben preservar este orden "nombre : valor" y ser separados por un punto y coma.
Si estás escribiendo
código XHTML te recomendamos no utilizar este atributo y probar con las clases de hojas de estilo (con el atributo "class").
Ejemplo:
Code begin
<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido</p>
<p>Y este es otro texto sin estilo.</p>
Code end
Indica un título para el elemento. Usado para dar una descripción acerca del elemento que es usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el elemento.
Ejemplo:
| Código |
Visualización |
|
<a title="HTMLQuick.com" href="https://www.htmlquick.com">Código HTML</a> |
Código HTML |
Especifica el lenguaje del contenido de un elemento. El valor predeterminado es "desconocido".
Al escribir
código XHTML la sintaxis "xml:lang" representa una alternativa preferida en XHTML 1.0 y un reemplazo en XHTML 1.1 (por ejemeplo, xml:lang="en").
Ejemplo:
Code begin
<p lang="en">This is a paragraph in english.</p>
<p lang="es">Este es un párrafo en español.</p>
Code end
dir
Especifica la dirección de texto del contenido y atributos del elemento, así como la direccionalidad de las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:
- RTL: Derecha a izquierda.
- LTR: Izquierda a derecha.
Ejemplo:
Code begin
<q lang="he" dir="rtl">...Una cita en Hebreo...</q>Code end
Asigna un valor inicial al elemento. Depenediendo de la naturaleza del elemento este valor puede ser posteriormente cambiado por el usuario.
Ejemplo:
| Código |
Visualización |
<form action="ejemplo.php">
<div>
<input name="primercampo" type="text" value="Aquí está el valor inicial" />
</div>
</form> |
|
El atributo "alt" define un texto alternativo diseñado para servir como reemplazo textual para objetos que son usualmente no soportados por algunos navegadores. También sirve como información adicional para navegadores que si los soportan (imágenes, formularios y applets). Los navegadores pueden mostrar este texto en forma de "tool tip" cuando el mouse se encuentra sobre el objeto. Nota que este atributo solo puede ser utilizado cuando el valor del atributo "type" es "image".
Este atributo es requerido al escribir
código XHTML.
Ejemplo:
| Código |
Visualización |
|
<img width="88" height="31" src="https://www.htmlquick.com/es/img/links/button.jpg" alt="Botón de vínculo de HTMLQuick" /> |
 |
align
Especifica la alineación horizontal del elemento. Los valores posibles son (insensibles a mayúsculas/minúsculas):
- left: El texto es alineado hacia el margen izquierdo.
- center: El texto es centrado.
- right: El texto es alineado hacia el margen derecho.
- justify: El texto es justificado hacia ambos márgenes.
accept
Define una lista separada por comas de tipos de contenido que el agente procesador manejará correctamente. Esto puede ser utilizado para filtrar archivos a enviar en el lado cliente (por ejemplo, solo permitir la subida de archivos de imagen comprimidos, como JPG y GIF).
Ejemplo:
Code begin
<form accept="image/gif,image/jpg">Code end
readonly
Cuando este atributo booleano está presente, el usuario no podrá realizar cambios en el control. Los controles de solo-lectura no reciben el enfoque y no son enviados junto con el formulario.
Recuerda que los atributos booleanos deben ser definidos en la forma nombre_atributo="nombre_atributo" para ser compatibles con el
código XHTML.
Ejemplo:
| Código |
Visualización |
<form action="ejemplo.php">
<div>
<input name="nombre" type="text" value="Jhon" readonly="readonly" />
</div>
</form> |
|
disabled
Cuando se establece este atributo, el control es deshabilitado, lo que significa que no puede obtener el enfoque, que su valor no puede ser cambiado y que no será enviado junto con el formulario. Dependiendo del navegador los elementos deshabilitados pueden ser mostrados de una manera diferente.
Ejemplo:
| Código |
Visualización |
<form action="ejemplo.php">
<div>
<input name="primerboton" type="button" value="Habilitado" /><br /><br />
<input name="segundoboton" type="button" value="Deshabilitado" disabled="disabled" /><br /><br />
<input name="textosegundo" type="text" value="Habilitado" /><br /><br />
<input name="textoprimero" type="text" value="Deshabilitado" disabled="disabled" />
</div>
</form> |
|
Especifica la posición del elemento en el orden de tabulación. El orden de tabulación define una secuencia con todos los elementos que pueden recibir el enfoque. Los usuarios pueden navegar dicha secuencia mediante el teclado (usualmente con la tecla "tab").
Establece una relación entre este elemento y una tecla de carácter, permitiendo al usuario activarlo mediante esa tecla (usualmente cuando es utilizada junto con la tecla "alt"). El resultado de la activación depende de la naturaleza del elemento actual. Para vínculos, esta acción automáticamente sigue el vínculo, y para otros elementos simplemente recibe el enfoque.
usemap (uri)
Este atributo especifica el mapa de imagen al cual el elemento está relacionado. Para funcionar correctamente el atributo "usemap" de este elemento debe coincidir con el atributo "name" del
tag HTML map asociado.
Ejemplo:
Code begin
<img src="https://www.htmlquick.com/es/img/examples/nav1.jpg" usemap="#nav1" alt="Menú de navegación" />
Code end
ismap
Cuando este atributo booleano está presente, la imagen es definida como un mapa de imagen del lado servidor. La imagen también debe ser vinculada a un agente procesador (script) que manejará los datos enviados por el usuario. Cuando el usuario presiona el botón del mouse sobre la imagen, las coordenadas donde se ha presionado el botón son enviadas al agente procesador (funcionado como un formulario).
Recuerda que los atributos booleanos deben ser definidos en la forma nombre_atributo="nombre_atributo" para se compatibles con el
código XHTML.
type
Define el tipo de control que será insertado. Los valores posibles son:
- text
- password
- checkbox
- radio
- submit
- image
- reset
- button
- hidden
- file
Asigna un nombre de control que será usado posteriormente por el agente procesador para identificar al campo.
size
Establece el ancho inicial de los controles. En el caso de controles "text" o "password", este valor es un número de caracteres. Para todos los demás tipos este valor es un número de pixels.
Ejemplo:
| Código |
Visualización |
<form action="ejemplo.php">
<div>
<input name="campo1" type="text" size="30" value="-" /><br />
<input name="campo2" type="text" size="20" value="-" /><br />
<input name="campo3" type="file" size="30" value="-" /><br />
<input name="campo4" type="file" size="20" value="-" />
</div>
</form> |
|
Para los tipos "text" y "password", este atributo establece el máximo número de caracteres que el usuario puede ingresar.
Ejemplo:
| Código |
Visualización |
<form action="ejemplo.php">
<div>
Escribe solo tres caracteres:<br />
<input type="text" name="longitud3" maxlength="3" value="-" />
</div>
</form> |
|
checked
Cuando el tipo es "radio" o "checkbox", este atributo booleano especifica el valor inicial (seleccionado o sin seleccionar).
Recuerda que los atributos booleanos deben ser definidos en la forma nombre_atributo="nombre_atributo" para ser compatibles con el
código XHTML.
Ejemplo:
| Código |
Visualización |
<form action="ejemplo.php">
<div>
<input name="check1" type="checkbox" />Sin seleccionar<br />
<input name="check2" type="checkbox" checked="checked" />Seleccionada<br /><br />
<input name="radio1" type="radio" />Valor<br />
<input name="radio2" type="radio" checked="checked" />Valor predeterminado<br />
<input name="radio3" type="radio" />Valor
</div>
</form> |
|
Cuando el tipo es "image", este atributo especifica la ubicación de la imagen a ser usada para decorar botones gráficos.
Eventos
- onfocus
- onblur
- onselect
- onchange
- onclick
- ondblclick
- onmousedown
- onmouseup
- onmouseover
- onmousemove
- onmouseout
- onkeypress
- onkeydown
- onkeyup
Lista completa e información acerca de
eventos en HTML
Ejemplos
Un formulario completo mostrando la funcionalidad de todos los controles input (el botón submit no está incluído debido a que esto solo es un ejemplo).
| Código |
Visualización |
<form action="ejemplo.php" enctype="multipart/form-data">
<div><fieldset>
<legend>Información personal</legend>
Nombre: <input name="nombre" type="text" maxlength="20" size="20" value="-" /><br />
Apellido: <input name="apellido" type="text" maxlength="15" size="15" value="-" /><br />
Contraseña: <input name="contrasena" type="password" maxlength="15" size="15" value="-" /><br /><br />
Género:<br />
<input name="genero" type="radio" checked="checked" value="masculino" />Masculino<br />
<input name="genero" type="radio" value="femenino" />Femenino<br /><br />
Imagen: <input name="imagen" type="file" size="10" accept="image/gif" value="-" />
</fieldset>
<fieldset>
<legend>Intereses</legend>
<input name="intereses" type="checkbox" checked="checked" />Deportes<br />
<input name="intereses" type="checkbox" checked="checked" />Películas<br />
<input name="intereses" type="checkbox" />Viajes<br />
<input name="intereses" type="checkbox" />Arte<br />
<input name="intereses" type="checkbox" />Autos
</fieldset>
<input name="borrarform" type="reset" value="Borrar formulario" />
<input name="enviarform" type="button" value="Enviar formulario" />
<input name="email" type="hidden" value="usuario@servidor.com" /></div>
</form> |
|
