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 hiddenUna cadena arbitraria N/A textTexto sin saltos de línea Campo de texto searchTexto sin saltos de línea Campo de texto telTexto sin saltos de línea Campo de texto urlUna URL absoluta Campo de texto emailUna dirección de correo electrónico o una lista de direcciones de correo electrónico Campo de texto passwordTexto 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) datetimeUna 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 dateUna fecha (año, mes, día) sin zona horaria Control de fecha monthUna fecha que consiste en un año y un mes sin zona horaria Control de mes weekUna fecha que consiste en un número de año de semana y un número de semana sin zona horaria Control de semana timeUna hora (hora, minuto, segundo, fracciones de segundo) sin zona horaria Control de hora datetime-localUna fecha y hora (año, mes, día, hora, minuto, segundo, fracción de segundo) sin zona horaria Control de fecha y hora numberUn valor numérico Campo de texto o control de spinner rangeUn valor numérico, con la semántica adicional de que el valor exacto no es importante Control deslizante o similar colorUn color sRGB con componentes rojo, verde y azul de 8 bits Un cuadro de color. Permite al usuario seleccionar un color. checkboxUn conjunto de cero o más valores de una lista predefinida Casilla de verificación radioUn valor enumerado Botón de radio fileCero o más archivos, cada uno con un tipo MIME y, opcionalmente, un nombre de archivo Una etiqueta y un botón submitUn valor enumerado, con la semántica adicional de que debe ser el último valor seleccionado e inicia el envío del formulario Botón imageUna 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 resetN/A Botón buttonN/A Botón
Aquí tienes un ejemplo básico de la sintaxis para la etiqueta <input> con algunos atributos:
<input type="text" name="fcolor" value="Blue">Aquí tienes un ejemplo que contiene tres elementos <input> dentro de un formulario típico:
<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.
<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.
<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.
<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:
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 acceptEspecifica 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)altTexto alternativo. Especifica el texto que se utilizará en caso de que el navegador/agente de usuario no pueda renderizar el control de entrada. autocompleteImpide 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)desactivadoautofocusConcede 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]autofocuscheckedEl control de entrada estará ya seleccionado cuando se cargue la página. Se utiliza con type="radio" o type="checkbox".disabledDesactiva 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]disableddirnameDetermina 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.formEspecifica el ID de un formulario al que pertenece este control. formactionEspecifica la URL del archivo que procesará el control cuando se envíe. formenctypeEspecifica 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)formmethodEspecifica 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).formnovalidateEspecifica que el formulario no debe ser validado durante el envío.
Valores posibles:
[Cadena vacía]novalidateformtargetEspecifica el contexto de navegación para cargar el destino indicado en el atributo action.
Valores posibles:_blank_self_top_parentheightEspecifica la altura del control. listEspecifica 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.maxEspecifica el valor máximo para el control. maxlengthEspecifica el número máximo de caracteres que el usuario puede introducir en el campo de texto. minEspecifica el valor mínimo para el control. minlengthEspecifica un límite inferior en el número de caracteres que un usuario puede introducir. multipleEspecifica si el usuario puede introducir más de un valor.
Valores posibles:
[Empty string]multiplenameAsigna un nombre al control de entrada. patternEspecifica 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. placeholderEspecifica 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. readonlyEstablece 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]readonlyrequiredEspecifica que el campo de entrada es un campo obligatorio (el usuario debe completar este campo).
Valores posibles:
[Empty string]requiredsizeEspecifica el ancho del control, en caracteres. Valor que es un entero no negativo válido mayor que cero. srcSi type="image", este atributo especifica la ubicación de la imagen.stepEspecifica la granularidad que se espera (y se requiere) del valor, limitando los valores permitidos. typeEspecifica el tipo de control. valueEspecifica un valor predeterminado para el control. Nota: Si type="checkbox" o type="radio", este atributo es obligatorio.widthEspecifica 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.
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
Para una explicación completa de estos atributos, consulta los atributos globales HTML 5.
