Etiqueta HTML <input>
La etiqueta <input> se usa dentro del elemento <form> y define campos para la entrada del usuario. El tipo del campo (texto, casilla de verificación, botón de opción, campo de contraseña, etc.) lo determina el valor del atributo type. La etiqueta no tiene contenido de texto; contiene solo atributos.
Pertenece a un grupo de etiquetas llamado elementos de formulario.
Para asociar texto con un elemento específico, usamos la etiqueta <label>, que establece una etiqueta de texto para él.
Sintaxis
La etiqueta <input> está vacía, lo que significa que la etiqueta de cierre no es necesaria. Pero en XHTML, la etiqueta (<input>) debe cerrarse (<input/>).
Ejemplo de la etiqueta HTML <input>:
Ejemplo de la etiqueta HTML <input>
html
<!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>
html
<!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>Resultado
Atributos
El atributo principal que determina el tipo de campo de entrada es type. Si el atributo falta, el valor predeterminado es "text".
| Attribute | Value | Description |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | Especifica los tipos de archivos que puedes enviar mediante el 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. (Se usa solo con imágenes). No compatible en HTML5. |
| alt | text | Define el texto alternativo de la imagen. (Se usa solo con imágenes). |
| autocomplete | on off | Habilita/deshabilita 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. (Se usa 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 del formulario (id) en el mismo documento. Nuevo atributo en HTML5. |
| formaction | URL | Especifica la dirección a la que se enviarán los datos del formulario al hacer clic en el botón. (Se usa 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. (Se usa 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 cargas de archivos), text/plain (los espacios se convierten en +, los demás caracteres no se codifican). |
| formmethod | get post | Indica el método de solicitud HTTP que se usará al enviar los datos del formulario. (Se usa 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 corrección de los datos. (Se usa solo para <input type = "submit">). |
| formtarget | _blank _self _parent _top | Especifica dónde mostrar la respuesta después de enviar el formulario. (Se usa solo para <input type = "image"> y <input type = "submit">). |
| height | pixels | Define la altura del elemento (se usa solo para <input type = "image">). |
| inputmode | verbatim latin latin-name latin-prose full-width-latin kana katakana numeric tel email url | Define la distribución del teclado. |
| 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 símbolos 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 debes introducir y verificar los datos en el campo del formulario. (Solo para elementos de control text, search, tel, url, email y password). |
| placeholder | text | Define una breve indicación que describe el valor esperado para el campo de entrada. El usuario ve una sugerencia en el campo de entrada. Desaparece cuando el usuario empieza a introducir datos o cuando el campo recibe el foco. |
| readonly | readonly | Define que el campo de entrada está habilitado solo para lectura. El usuario no puede hacer cambios. |
| required | required | Indica que el campo de entrada 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 de la imagen que se usa como botón de "enviar". (Solo se usa para <input type = "image">). |
| step | number | Establece el paso de incremento (valor de 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 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 entrada. |
| 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
| Value | Description |
|---|---|
| button | Define el botón activo. |
| checkbox | Marca las casillas (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 entrada para una fecha de calendario. |
| datetime (deprecated) | Define el campo de entrada para fecha y hora. (Obsoleto en HTML5, usa datetime-local en su lugar.) |
| datetime-local | Define el campo de entrada para fecha y hora sin zona horaria. |
| Define el campo de entrada para 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 entrada 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 de la imagen se indica mediante el atributo src. El atributo alt también puede usarse para especificar texto alternativo, y los atributos height y width para especificar la altura y el ancho de la imagen. |
| month | Define el campo para seleccionar un mes, después del cual los datos se mostrarán como año-mes (por ejemplo: 2018-07). |
| number | Define el campo de entrada para números. |
| password | Define un campo para introducir una contraseña (los caracteres introducidos 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 mediante los atributos min y max. |
| reset | Define un botón para restablecer la información. |
| search | Crea un campo de texto para buscar. |
| submit | Crea un botón para enviar los datos del formulario (“submit” button). |
| text | Crea un campo de texto de una sola línea. |
| time | Especifica un campo numérico para introducir la hora en formato de 24 horas (por ejemplo, 13:45). |
| url | Crea un campo de entrada para URL. |
| week | Crea un campo para seleccionar la semana, después del cual los datos se mostrarán como año-semana (por ejemplo: 2018-W25). |
Practice
What can be achieved with the HTML <input> tag?