Etiqueta INPUT en HTML con Ejemplos

La etiqueta HTML <input> representa un control de entrada de formulario en un documento HTML. Un control de entrada de formulario es un control que permite al usuario ingresar datos e interactuar con un sitio web o aplicación.

Sintaxis

La etiqueta <input> se escribe como <input> (sin etiqueta de cierre). A una etiqueta <input> se le asigna típicamente un atributo type para especificar el tipo de control y un atributo name para que el procesador del formulario pueda hacer referencia a él. A menudo se utiliza un atributo value para especificar el valor predeterminado del control de formulario.

Hay muchos otros atributos que se pueden utilizar con la etiqueta <input>. Estos se enumeran en la tabla a continuación.

Valor	Tipo de Dato	Tipo de Control
`hidden`	Una cadena arbitraria	N/A
`text`	Texto sin saltos de línea	Campo de texto
`search`	Texto sin saltos de línea	Campo de texto
`tel`	Texto sin saltos de línea	Campo de texto
`url`	Una URL absoluta	Campo de texto
`email`	Una dirección de correo electrónico o una lista de direcciones de correo electrónico	Campo de texto
`password`	Texto sin saltos de línea (información sensible)	Campo de texto que oculta la entrada de datos (por ejemplo, oculta la contraseña usando asteriscos () o similar)
`datetime`	Una fecha y hora (año, mes, día, hora, minuto, segundo, fracción de segundo) con la zona horaria establecida en UTC	Control de fecha y hora
`date`	Una fecha (año, mes, día) sin zona horaria	Control de fecha
`month`	Una fecha que consiste en un año y un mes sin zona horaria	Control de mes
`week`	Una fecha que consiste en un número de año de semana y un número de semana sin zona horaria	Control de semana
`time`	Una hora (hora, minuto, segundo, fracciones de segundo) sin zona horaria	Control de hora
`datetime-local`	Una fecha y hora (año, mes, día, hora, minuto, segundo, fracción de segundo) sin zona horaria	Control de fecha y hora
`number`	Un valor numérico	Campo de texto o control de spinner
`range`	Un valor numérico, con la semántica adicional de que el valor exacto no es importante	Control deslizante o similar
`color`	Un color sRGB con componentes rojo, verde y azul de 8 bits	Un cuadro de color. Permite al usuario seleccionar un color.
`checkbox`	Un conjunto de cero o más valores de una lista predefinida	Casilla de verificación
`radio`	Un valor enumerado	Botón de radio
`file`	Cero o más archivos, cada uno con un tipo MIME y, opcionalmente, un nombre de archivo	Una etiqueta y un botón
`submit`	Un valor enumerado, con la semántica adicional de que debe ser el último valor seleccionado e inicia el envío del formulario	Botón
`image`	Una coordenada, relativa al tamaño de una imagen en particular, con la semántica adicional de que debe ser el último valor seleccionado e inicia el envío del formulario	Ya sea una imagen clickable o un botón
`reset`	N/A	Botón
`button`	N/A	Botón

Aquí tienes un ejemplo básico de la sintaxis para la etiqueta <input> con algunos atributos:

HTML

<input type="text" name="fcolor" value="Blue">

Aquí tienes un ejemplo que contiene tres elementos <input> dentro de un formulario típico:

HTML

<form action="process_form.cfm" method="get">
    <label>Nombre: <input name="first_name"></label>
    <label>Apellido: <input name="last_name"></label>
    <input type="submit" value="Enviar">
</form>

Ejemplos

Formulario Básico

Aquí tienes un formulario que se utiliza para recopilar los detalles del nombre del usuario. Se utilizan tres etiquetas <input>: dos para los detalles del nombre, una para el botón de envío.

HTML

<form action="/html/form_handler.cfm" target="_blank" method="get">
<p><label>Nombre: <input type="text" name="first_name" maxlength="100" style="width:120px;"></label></p>
<p><label>Apellido: <input type="text" name="last_name" maxlength="100" style="width:120px;"></label></p>
<input type="submit" value="Enviar">
</form>

El atributo `form`

Es posible asociar el elemento <input> a un formulario utilizando el atributo form del elemento <input>.

Si utilizas el atributo form del elemento <input>, debes especificar el ID del formulario con el que deseas asociar el elemento.

En el siguiente ejemplo, he colocado todos los elementos asociados al formulario fuera del elemento <input>. Pero he asociado intencionadamente solo dos elementos con el formulario (para demostrar el efecto del atributo form). El nombre se ha asociado a un formulario, pero el apellido no. Por lo tanto, el apellido no se envía con el formulario y la página de acción no reconoce el apellido del usuario.

HTML

<form action="/html/form_handler.cfm" target="_blank" method="get" id="customer_name"></form>
<p><label>Nombre: <input form="customer_name" type="text" name="first_name" maxlength="100" style="width:120px;"></label></p>
<p><label>Apellido: <input type="text" name="last_name" maxlength="100" style="width:120px;"></label></p>
<input form="customer_name" type="submit" value="Enviar">

Botones de Radio

En este ejemplo, creamos botones de radio. Para ello, damos al atributo type un valor de radio. Cada botón de radio de un grupo debe tener el mismo valor de nombre: así es como se asocian. El valor es lo que distingue las diferentes opciones.

HTML

<p>¿Qué premio prefieres?</p>
<form>
<label><input type="radio" name="prize" value="house">Casa</label>
<label><input type="radio" name="prize" value="money">$1 millón</label>
<label><input type="radio" name="prize" value="none">No quiero premio, ¡ya soy feliz!</label>
</form>

Elementos Asociados a Formularios

La etiqueta <input> se conoce como un elemento asociado a un formulario. Esto se debe a que puede tener un propietario de formulario.

Estos son los elementos asociados a formularios en HTML:

<button>
<fieldset>
<input>
<label>
<object>
<output>
<select>
<textarea>
<img>

Atributos

Los atributos se pueden añadir a un elemento HTML para proporcionar más información sobre cómo debe aparecer o comportarse el elemento.

El elemento <input> acepta los siguientes atributos:

Atributo	Descripción
`accept`	Especifica una lista separada por comas de tipos de contenido que acepta el servidor. Valores posibles: `audio/` `vídeo/` `imagen/` [Un tipo MIME válido, sin parámetros].* [Una cadena cuyo primer carácter sea (U+002E) FULL STOP] (para especificar una extensión de archivo)
`alt`	Texto alternativo. Especifica el texto que se utilizará en caso de que el navegador/agente de usuario no pueda renderizar el control de entrada.
`autocomplete`	Impide que el navegador utilice la función “autocompletar” con este control. Puede ser útil para datos confidenciales, como detalles bancarios, etc. Valores posibles: o (valor por defecto) `desactivado`
`autofocus`	Concede automáticamente el foco a este control cuando se carga la página. Esto permite al usuario empezar a usar el control sin tener que seleccionarlo primero. No debe haber más de un elemento en el documento con el atributo `autofocus` especificado. Valores posibles: [Cadena vacía] `autofocus`
`checked`	El control de entrada estará ya seleccionado cuando se cargue la página. Se utiliza con `type="radio"` o `type="checkbox"`.
`disabled`	Desactiva el control de entrada. El control no aceptará cambios del usuario. Tampoco puede recibir el foco y se omitirá al pulsar la tecla Tab. Valores posibles: [Cadena vacía] `disabled`
`dirname`	Determina la dirección del texto tal como se envía en el campo `input`. El valor de este atributo puede ser una cadena de texto como un nombre para el campo. Por ejemplo, si especificas el atributo como `dirname="text_dir"`, una vez que el formulario se haya enviado, los datos pueden parecerse a esto: `text_dir=ltr`.
`form`	Especifica el ID de un formulario al que pertenece este control.
`formaction`	Especifica la URL del archivo que procesará el control cuando se envíe.
`formenctype`	Especifica el tipo de contenido que se utiliza para codificar el conjunto de datos del formulario cuando se envía al servidor. Valores posibles: `application/x-www-form-urlencoded` (por defecto) `multipart/form-data` (para cargar archivos) `text/plain` (para cargar archivos)
`formmethod`	Especifica el método HTTP que se utilizará cuando se envíe el control. Valores posibles: `get` (los datos del formulario se añaden a la URL cuando se envían) `post` (los datos del formulario no se añaden a la URL) `dialog` (cierra el cuadro de diálogo en el que se encuentra el formulario, si lo hay, y en caso contrario no lo envía).
`formnovalidate`	Especifica que el formulario no debe ser validado durante el envío. Valores posibles: [Cadena vacía] `novalidate`
`formtarget`	Especifica el contexto de navegación para cargar el destino indicado en el atributo `action`. Valores posibles: `_blank` `_self` `_top` `_parent`
`height`	Especifica la altura del control.
`list`	Especifica un elemento `<datalist>` que se utilizará para una lista de opciones predefinidas para el usuario. El valor debe ser el ID de un elemento `<datalist>` en el mismo documento.
`max`	Especifica el valor máximo para el control.
`maxlength`	Especifica el número máximo de caracteres que el usuario puede introducir en el campo de texto.
`min`	Especifica el valor mínimo para el control.
`minlength`	Especifica un límite inferior en el número de caracteres que un usuario puede introducir.
`multiple`	Especifica si el usuario puede introducir más de un valor. Valores posibles: [Empty string] `multiple`
`name`	Asigna un nombre al control de entrada.
`pattern`	Especifica una expresión regular contra la que se comprobará el valor del control. El valor debe coincidir con la producción de patrones de la gramática ECMA 262.
`placeholder`	Especifica una sugerencia corta (una palabra o frase corta) destinada a ayudar al usuario con la introducción de datos. Una sugerencia podría ser un valor de muestra o una breve descripción del formato esperado.
`readonly`	Establece el control de entrada como de solo lectura: no permitirá al usuario cambiar el valor. El control, sin embargo, puede recibir el foco y se incluye al pulsar la tecla Tab por los controles del formulario. Valores posibles: [Empty string] `readonly`
`required`	Especifica que el campo de entrada es un campo obligatorio (el usuario debe completar este campo). Valores posibles: [Empty string] `required`
`size`	Especifica el ancho del control, en caracteres. Valor que es un entero no negativo válido mayor que cero.
`src`	Si `type="image"`, este atributo especifica la ubicación de la imagen.
`step`	Especifica la granularidad que se espera (y se requiere) del valor, limitando los valores permitidos.
`type`	Especifica el tipo de control.
`value`	Especifica un valor predeterminado para el control. Nota: Si `type="checkbox"` o `type="radio"`, este atributo es obligatorio.
`width`	Especifica el ancho del control.

Atributos Globales

Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes utilizar estos atributos con la etiqueta <input>, así como con todas las demás etiquetas HTML.