Etiqueta HTML <input>
La etiqueta <input> se usa en formularios HTML para definir el campo donde el usuario puede ingresar datos. Descripción, atributos y ejemplos de uso.
La etiqueta <input> se usa dentro del elemento <form> y define los campos para la entrada del usuario. El tipo de campo — un cuadro de texto, casilla de verificación, botón de opción, campo de contraseña, selector de archivos y muchos más — está determinado por el valor del atributo type. El elemento está vacío: no tiene contenido de texto y solo contiene atributos.
<input> pertenece al grupo de elementos de formulario, y es una de las etiquetas más utilizadas en las páginas interactivas. Casi todos los cuadros de inicio de sesión, barras de búsqueda y formularios de registro se construyen con uno o más elementos <input>.
Para etiquetar un campo de modo que los usuarios (y las tecnologías de asistencia) sepan para qué sirve, combínalo con una etiqueta <label>. Para convertir la entrada en una acción — enviar o restablecer el formulario — usa un input de tipo submit/reset o el elemento <button>.
Esta página cubre la sintaxis, cada valor de type con ejemplos ejecutables, cómo se envían los pares name/value, la asociación de etiquetas y la validación HTML integrada.
Sintaxis
La etiqueta <input> está vacía, lo que significa que no se requiere la etiqueta de cierre. Pero en XHTML, la etiqueta (<input>) debe cerrarse (<input/>).
Ejemplo de la etiqueta HTML <input>:
Ejemplo de la etiqueta HTML <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="get">
<input type="email" name="user_email" placeholder="Enter your email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Ejemplo de la etiqueta HTML <input> con la etiqueta HTML <label>:
Ejemplo de la etiqueta HTML <input> con la etiqueta HTML <label>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.form-group { margin-bottom: 10px; }
</style>
</head>
<body>
<form action="/form/submit" method="get">
<div class="form-group">
<label for="first_name">Your Name:</label>
<input type="text" id="first_name" name="first_name" />
</div>
<div class="form-group">
<label for="last_name">Your Surname:</label>
<input type="text" id="last_name" name="last_name" />
</div>
<div class="form-group">
<label for="user_email">Enter Your E-Mail:</label>
<input type="email" id="user_email" name="user_email" />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Asociar una etiqueta con un input
Un cuadro de input sin etiqueta no da a los usuarios ninguna pista sobre qué escribir. La etiqueta <label> soluciona esto, y hace más que mostrar texto:
- Los lectores de pantalla anuncian la etiqueta cuando el input recibe el foco, para que los usuarios de tecnología de asistencia sepan qué se espera en el campo.
- El área de clic aumenta. Hacer clic en el texto de la etiqueta enfoca el input (y activa o desactiva una casilla de verificación o botón de opción). Esto es una gran mejora de usabilidad en casillas pequeñas.
Hay dos formas de asociar una etiqueta con un input:
1. Explícita — for coincide con id. El atributo for de la etiqueta debe ser igual al id del input:
<label for="username">Username:</label>
<input type="text" id="username" name="username" />2. Implícita — envolver el input dentro de la etiqueta. No se necesita id/for:
<label>
Username:
<input type="text" name="username" />
</label>Prefiere la forma explícita cuando tu diseño CSS separa la etiqueta y el campo. De cualquier manera, dale una etiqueta a cada input — el atributo placeholder no es un sustituto, porque la sugerencia desaparece en cuanto el usuario empieza a escribir.
Atributos
El atributo principal que determina el tipo de campo de input es type. Si el atributo no está presente, el valor predeterminado es "text".
| Atributo | Valor | Descripción |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | Especifica los tipos de archivos que se pueden enviar a través del campo de carga de archivos. (Se usa con type="file"). |
| align | left right top middle bottom | Define el tipo de alineación de la imagen. (Solo se usa con imágenes). No compatible con HTML5. |
| alt | text | Define el texto alternativo para la imagen. (Solo se usa con imágenes). |
| autocomplete | on off | Activa o desactiva el autocompletado. Nuevo atributo en HTML5. |
| autofocus | autofocus | Indica que el campo del formulario debe recibir el foco después de que se cargue la página. Nuevo atributo en HTML5. |
| checked | checked | Indica que el elemento debe estar preseleccionado cuando se cargue la página. (Solo para <input type = "checkbox"> y <input type = "radio">). |
| disabled | disabled | Indica que el elemento no debe estar disponible para la interacción del usuario. |
| form | form_id | Indica el formulario (especificado por el elemento <form>) del elemento de control. El valor es el identificador (id) del formulario en el mismo documento. Nuevo atributo en HTML5. |
| formaction | URL | Especifica la dirección donde se enviarán los datos del formulario al hacer clic en el botón. (Solo para <input type = "image"> y <input type = "submit">). |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Determina cómo se codifican los datos del formulario antes de enviarlos al servidor. (Solo con <input type="image"> y <input type="submit">). Valores: application/x-www-form-urlencoded (predeterminado, codifica todos los caracteres), multipart/form-data (sin codificación, se usa para subir archivos), text/plain (los espacios se convierten en +, otros caracteres no se codifican). |
| formmethod | get post | Indica el método de solicitud HTTP que se usará al enviar los datos del formulario. (Solo para <input type = "image"> y <input type = "submit">). get envía los datos del formulario en la barra de direcciones. post envía los datos al servidor para su procesamiento. |
| formnovalidate | formnovalidate | Indica que no es necesario comprobar la exactitud de los datos. (Solo para <input type = "submit">). |
| formtarget | _blank _self _parent _top | Especifica dónde mostrar la respuesta después de enviar el formulario. (Solo para <input type = "image"> y <input type = "submit">). |
| height | pixels | Define la altura del elemento (solo para <input type = "image">). |
| inputmode | none text decimal numeric tel search email url | Sugiere qué diseño de teclado virtual mostrar en dispositivos táctiles (por ejemplo, numeric muestra un teclado solo de dígitos). |
| list | datalist_id | Define una lista de opciones entre las que el usuario puede elegir. El valor del atributo es el id del elemento <datalist>. |
| max | number date | Establece el valor máximo para introducir un número o una fecha. |
| maxlength | number | Define el número máximo de caracteres que el usuario puede introducir. |
| min | number date | Establece el valor mínimo para introducir un número o una fecha. |
| multiple | multiple | Indica que el usuario puede introducir más de un valor en el elemento (solo para <input type = "file"> y <input type = "email">). |
| name | text | Define el nombre del elemento. (Se usa para la identificación del formulario). |
| pattern | regular expression | Especifica una expresión regular según la cual se deben introducir y verificar los datos en el campo del formulario. (Solo para los elementos de control text, search, tel, url, email y password). |
| placeholder | text | Define una sugerencia breve que describe el valor esperado para el campo de input. El usuario ve una pista en el campo de input. Desaparece cuando el usuario comienza a ingresar datos o cuando el campo recibe el foco. |
| readonly | readonly | Define que el campo de input está habilitado solo para lectura. El usuario no puede realizar cambios. |
| required | required | Indica que el campo de input debe completarse antes de enviar el formulario. |
| size | number | Define el ancho visible del campo de texto en caracteres. (Solo para text, search, tel, url, email y password). El valor predeterminado es 20 caracteres. |
| src | URL | Indica la ruta a la imagen que se usa como botón de envío. (Solo para <input type = "image">). |
| step | number | Establece el incremento para los campos numéricos. Se usa con los atributos min y max que definen los valores mínimo y máximo. |
| type | button checkbox color date datetime (deprecated) datetime-local email file hidden image month number password radio range reset search submit tel text time url week | Define el tipo del campo de input. |
| value | text | Define el valor del elemento. |
| width | width | Define el ancho del elemento (solo para <input type = "image">). |
La etiqueta <input> también admite los Atributos globales y los Atributos de evento.
Valores del atributo type
| Valor | Descripción |
|---|---|
| button | Define un botón activo. |
| checkbox | Casillas de verificación (el usuario puede seleccionar más de una opción). |
| color | Especifica una paleta de colores (el usuario puede seleccionar valores de color en hexadecimal). |
| date | Define el campo de input para la fecha del calendario. |
| datetime (deprecated) | Define el campo de input para fecha y hora. (Obsoleto en HTML5, usa datetime-local en su lugar). |
| datetime-local | Define el campo de input para fecha y hora sin zona horaria. |
| Define el campo de input para el correo electrónico. | |
| file | Establece el control con el botón Examinar, al hacer clic en el cual puedes seleccionar y cargar el archivo. |
| hidden | Define un campo de input oculto. No es visible para el usuario. |
| image | Indica que se usa una imagen en lugar de un botón para enviar datos al servidor. La ruta a la imagen se indica con el atributo src. También se puede usar el atributo alt para especificar texto alternativo, y los atributos height y width para especificar la altura y el ancho de la imagen. |
| month | Define el campo de selección de un mes, después de lo cual los datos se mostrarán como año-mes (por ejemplo: 2018-07). |
| number | Define el campo de input para números. |
| password | Define un campo para ingresar una contraseña (los caracteres ingresados se muestran como asteriscos, puntos u otros caracteres). |
| radio | Crea un botón de opción (al elegir un botón de opción, todos los demás se desactivarán). |
| range | Crea un control deslizante para seleccionar números en el rango especificado. El rango predeterminado es de 0 a 100. El rango de números se especifica con los atributos min y max. |
| reset | Define un botón para restablecer la información. |
| search | Crea un campo de texto para búsqueda. |
| submit | Crea un botón para enviar los datos del formulario (botón "enviar"). |
| text | Crea un campo de texto de una sola línea. |
| time | Especifica un campo numérico para ingresar la hora en formato de 24 horas (por ejemplo, 13:45). |
| url | Crea un campo de input para URL. |
| week | Crea un campo para seleccionar la semana, después de lo cual los datos se mostrarán como año-semana (por ejemplo: 2018-W25). |
Ejemplos de los tipos de input más comunes
El valor de type cambia tanto el aspecto como el comportamiento de un input. Aquí están los que usarás con más frecuencia.
Casillas de verificación y agrupación con name
Una casilla de verificación permite al usuario activar o desactivar una opción. Usa checked para preseleccionarla. Cuando varias casillas comparten el mismo name, forman un grupo, y cada casilla marcada se envía por separado como name=value:
<form>
<label><input type="checkbox" name="topping" value="cheese" checked /> Cheese</label>
<label><input type="checkbox" name="topping" value="bacon" /> Bacon</label>
<label><input type="checkbox" name="topping" value="onion" /> Onion</label>
</form>Al enviar con Cheese y Onion marcados se envía topping=cheese&topping=onion.
Botones de opción (name compartido)
Los botones de opción que comparten el mismo name son mutuamente excluyentes — seleccionar uno deselecciona los demás. Siempre establece un value en cada uno para que el servidor sepa qué opción se seleccionó:
<form>
<p>Choose a size:</p>
<label><input type="radio" name="size" value="s" /> Small</label>
<label><input type="radio" name="size" value="m" checked /> Medium</label>
<label><input type="radio" name="size" value="l" /> Large</label>
</form>Carga de archivos
type="file" agrega un botón Examinar. Añade accept para filtrar el selector de archivos y multiple para permitir seleccionar más de un archivo:
<form>
<label for="avatar">Profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/*" />
</form>Número con min, max y step
type="number" muestra un campo numérico con flechas de incremento. min/max delimitan el rango y step establece el incremento (usa step="0.01" para moneda, step="any" para permitir cualquier decimal):
<form>
<label for="qty">Quantity (1–10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" step="1" value="1" />
</form>Control deslizante de rango
type="range" es un control deslizante para un valor aproximado que el usuario no necesita ver exactamente. Usa los mismos atributos min, max y step:
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50" />
</form>Contraseña
type="password" enmascara los caracteres escritos. El valor sigue enviándose en texto plano, por lo que el formulario debe enviarse a través de HTTPS:
<form>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8" required />
</form>Cómo se envían name y value
Cuando se envía un formulario, el navegador construye una cadena de consulta de pares name=value a partir de sus controles. El papel de value depende del tipo de input:
- Campos de tipo texto (
text,email,url,password,number,search,tel):valuees el texto predeterminado que se muestra en el cuadro; lo que el usuario escribe lo reemplaza y se envía. - Radio y checkbox:
valueson los datos enviados solo cuando ese control está marcado. Una casilla desmarcada no envía nada. Por eso cada opción necesita su propiovalue. - Submit y button:
valuees la etiqueta impresa en el botón. Un botón submit con nombre también envía su parname=value, lo que permite al servidor saber qué botón fue presionado.
Un input sin name nunca se envía — puede ser útil para scripts del lado del cliente, pero el servidor nunca lo ve.
Validación de formularios
Los navegadores pueden validar los inputs antes de que se envíe el formulario, sin JavaScript. Si un campo falla, el navegador bloquea el envío y muestra un mensaje. Las principales herramientas son:
required— el campo no debe estar vacío.type="email"/type="url"— el valor debe ser un correo electrónico o URL sintácticamente válido.pattern— una expresión regular con la que el valor debe coincidir (funciona con text, search, tel, url, email, password).min/max/step— límites de rango numérico y de fecha.minlength/maxlength— límites de longitud de cadena.
Este ejemplo los combina. Intenta enviarlo vacío y luego con datos incorrectos:
<!DOCTYPE html>
<html>
<head>
<title>Form validation</title>
<style>
.form-group { margin-bottom: 10px; }
label { display: block; }
</style>
</head>
<body>
<form action="/form/submit" method="post">
<div class="form-group">
<label for="email">Email (required):</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<label for="site">Website (must start with https://):</label>
<input type="url" id="site" name="site" pattern="https://.*" placeholder="https://example.com" />
</div>
<div class="form-group">
<label for="zip">ZIP code (5 digits):</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}" maxlength="5" required />
</div>
<div class="form-group">
<label for="age">Age (18–99):</label>
<input type="number" id="age" name="age" min="18" max="99" step="1" required />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Para omitir esta comprobación integrada en un botón submit en particular, añade formnovalidate. Para seleccionar un campo con CSS, las pseudoclases :valid, :invalid y :required coinciden con el estado de validación. Para más información sobre cómo configurar formularios y su envío, consulta la etiqueta <form>.