El elemento <input> se usa para crear campos de entrada de datos. Se trata de un elemento vacío, pues no tiene etiqueta de cierre. Este elemento tiene una amplia variedad de tipos de campo que se especifican mediante el atributo type. Su flexibilidad lo convierte en uno de los elementos más potentes del HTML.
El atributo type es el que permite definir el tipo de campo del elemento. Los tipos de campo permitidos son muchos y muy variados, como texto, casillas de verificación, contraseñas, botones de borrar y enviar datos del formulario, selectores de color, selectores de fecha, introducción de números, y un largo etcétera.
Lista de valores del atributo type:
| Índice | Valor | Definición |
|---|---|---|
| 1 | button | Botón normal |
| 2 | submit | Botón de enviar |
| 3 | image | Botón de imagen |
| 4 | reset | Botón de reiniciar |
| 5 | checkbox | Casilla de verificación |
| 6 | radio | Grupo de opciones |
| 7 | hidden | Campo invisible al usuario |
| 8 | text | Campo de texto |
email | Campo formateado de correo electrónico | |
password | Campo formateado de contraseñas | |
tel | Campo formateado de número telefónico | |
url | Campo formateado de dirección URL | |
search | Campo de búsqueda | |
number | Campo formateado de números enteros | |
| 9 | date | Selector de fecha |
time | Campo formateado de hora | |
datetime-local | Selector de fecha y hora | |
week | Selector de semana y año | |
month | Selector de mes y año | |
| 10 | color | Selector de colores |
| 11 | file | Selector de archivos |
| 12 | range | Número dentro de un rango |
Nota de autor: en cada tipo de campo se describen únicamente los atributos específicos de forma individualizada, así se organiza mejor. Encontrarás el resto de atributos del elemento <input> al final del artículo.
1. Botón normal
El elemento <input> con el atributo type='button' permite crear un botón normal. Este botón no tiene ninguna acción definida por defecto, por lo que pulsarlo no hará nada. Es necesario asociarle una acción o un evento en JavaScript.
Ejemplo de código HTML de botón normal:
<form>
<input type='button' onclick='alert("¡Hola!");' value='Saluda'>
</form>
Resultado:
Tal y como se puede ver en el ejemplo anterior, con el atributo value se puede especificar el texto que se mostrará en el botón.
2. Botón de enviar
En cambio, para crear el botón de enviar se usa el elemento <input> con el atributo type='submit'. Cuando se presiona este botón, los datos del formulario son enviados y procesados.
Ejemplo de código HTML de botón de enviar:
<form action="javascript:" onsubmit="alert('¡Hola, mundo!');">
<input type='submit' value='Saluda'>
</form>
Resultado:
Este tipo de control tiene algunos atributos específicos que definen y anulan ciertos parámetros que están relacionados con el envío del formulario. Estos atributos tienen su utilidad cuando se quiere crear más de un botón de envío en un mismo formulario, de modo que cada botón tenga unas características distintas.
Estos atributos son: formaction, formenctype, formmethod y formnovalidate, cuya descripción es idéntica a la descripción de los atributos action, enctype, method y novalidate del elemento <form>. La diferencia es que en este caso se aplican sobre el botón y no sobre el conjunto del formulario.
3. Botón de imagen
El elemento <input> con el atributo type='image' permite crear un botón con una imagen. Cuando se presiona dicha imagen, el navegador envía los datos del formulario. En este caso, el navegador también envía las coordenadas de posición del puntero sobre la imagen en el momento de hacer clic, en píxeles. Es útil, por ejemplo, para recopilar datos de la región seleccionada por el usuario.
Además, este control también tiene atributos similares a los del elemento de imagen, como es el caso del atributo alt para proveer la descripción de la imagen, cuyo valor será una cadena de texto; los atributos width y height permiten especificar el ancho y alto de la imagen mediante un número entero que representa los píxeles, y el atributo src para indicar la ruta de la imagen.
Lo mismo que ocurre con el control anterior, el botón de imagen también tiene los atributos específicos formaction, formenctype, formmethod y formnovalidate; cuya finalidad es la misma que en el caso anterior.
4. Botón de reiniciar
Podemos crear un botón para reiniciar los datos del formulario mediante el elemento <input> y el atributo type='reset'. De esta manera, cuando se pulse este botón, los controles de entrada de datos del formulario quedarán limpios.
Con el atributo value se puede especificar el nombre que aparecerá en este botón. Generalmente, se puede especificar un valor por defecto con este mismo atributo. Vamos a ver un ejemplo de un texto por defecto.
<form>
<input type='text' value='Texto por defecto'>
<input type='reset' value='Reiniciar'>
</form>
Resultado del código HTML anterior:
Modifica el texto que sale por defecto y luego pulsa el botón reiniciar. El texto por defecto volverá a aparecer. Si el valor por defecto está vacío, el valor que haya introducido el usuario se limpiará por completo.
5. Casilla de verificación
El elemento <input> con el atributo type='checkbox' permite crear casillas de verificación. Se trata de un control interactivo de dos estados: seleccionado o deseleccionado; por tanto, su valor es binario (verdadero o falso). Haciendo clic sobre el control se puede cambiar de un estado a otro.
Cuando la casilla de verificación está marcada con valor verdadero, se inserta el atributo binario checked. Este atributo no tiene valor, es decir, que su presencia o ausencia indica el valor del campo. Si la casilla de verificación está marcada, su nombre y valor serán enviados con el formulario. Esto significa que dicho control sólo es enviado cuando la casilla está seleccionada.
Ejemplo de código HTML con casillas de verificación:
<form>
<label><input type='checkbox' checked> HTML</label><br>
<label><input type='checkbox'> CSS</label><br>
<label><input type='checkbox'> JS</label><br>
</form>
Resultado:
Con el atributo required podemos obligar al usuario a seleccionar el control para poder enviar el formulario. Se trata también de un atributo binario, es decir, sin valor. Mediante el atributo disabled —también binario— podemos deshabilitar el control, de modo que no se podrá hacer clic sobre él.
6. Grupo de opciones
El elemento <input> en conjunto con el atributo type='radio' permite añadir un grupo de opciones en el que sólo se puede seleccionar una opción. Por tanto, si tenemos un grupo de cinco opciones, sólo una de ellas será seleccionable. Las opciones de este tipo de control se agrupan mediante el atributo name: las que compartan el mismo valor pertenecerán al mismo grupo.
Ejemplo de código HTML con un grupo de opciones:
<form>
<label><input type='radio' name='grupo1' checked> HTML</label><br>
<label><input type='radio' name='grupo1'> CSS</label><br>
<label><input type='radio' name='grupo1'> JS</label><br>
</form>
Resultado:
Tal y como se puede observar, en el grupo de opciones sólo puede haber una opción seleccionada. Si se intenta seleccionar una segunda opción se desactiva la anterior. Esta es la principal diferencia de este control en contraste con las casillas de verificación, en las que se puede seleccionar varias opciones a la vez.
El atributo checked también puede usarse en este control. Cuando una opción es marcada, se inserta este atributo en el elemento <input>. Se puede añadir este atributo de forma directa si se quiere que una opción esté marcada por defecto, así el usuario ya la verá marcada. También se puede usar el atributo required para obligar a marcar una opción antes de enviar el formulario.
7. Campo invisible
Con el elemento <input> y el atributo type='hidden' puede crearse un control interactivo que será visible a ojos del usuario. Su valor puede ser una cadena de texto, que será definida por el autor del formulario. Su valor será enviado por el formulario, junto con los datos del resto de controles interactivos.
8. Entrada de texto
El elemento <input> y el atributo type='text' permite crear un control de entrada de texto. Se muestra como una caja de texto en la que el usuario puede introducir una cadena de texto de una sola línea. Puede ser útil para solicitar campos de datos de poca cantidad de caracteres, como el nombre y los apellidos.
Ejemplo de código HTML de elemento de entrada de texto:
<form>
<input type='text'>
</form>
Resultado:
Además, es posible crear controles cuyos campos de texto aparecerán formateados; por ejemplo: un correo electrónico, una contraseña, un número telefónico, una dirección URL o un campo de búsqueda. Esto es posible con el elemento <input> en combinación con los atributos type='email', type='password', type='tel', type='url' y type='search', respectivamente.
Para estos casos anteriores —incluyendo el del atributo type='text'— se puede usar el atributo pattern con el fin de especificar un formato que los usuarios tendrán que respetar. El valor del atributo pattern será una expresión regular. Si no se respeta el formato indicado, aparecerá un error y no se enviará el formulario.
Con el atributo size se indica el tamaño inicial del control. Su valor deberá ser un número entero que representa el total de píxeles. Este atributo se aplica sólo para los casos anteriores, es decir, los que como valor del atributo type tengan: text, search, tel, url, email o password.
El atributo placeholder permite introducir una pista sobre el contenido del campo, dentro del mismo campo. Cuando el usuario empieza a escribir su propio texto, el texto de ayuda del atributo placeholder desaparecerá del control. No debe usarse este atributo para reemplazar el elemento <label>.
Ejemplo de código HTML con entrada de una URL:
<form>
<input type='url' placeholder='example.com' pattern='.+\.com'>
</form>
Resultado:
También es posible entrar texto limitándolo a valores numéricos mediante el atributo type='number'. En este caso, aparecerán dos flechitas en el lado derecho de la caja de texto, para incrementar y decrementar los valores. Se puede establecer un mínimo y un máximo con los atributos min y max.
En un principio, este tipo de campo incrementa y decrementa valores de uno en uno, por lo que sólo acepta números enteros, por defecto. Para cambiar el intervalo de paso se usa el atributo step. Si por ejemplo, lo definimos en 0.5, el valor del campo se incrementará y decrementará cada este intervalo.
Ejemplo de código HTML de elemento con valor numérico:
<form>
<input type='number' step='0.5'>
</form>
Resultado:
9. Fecha y hora
Existen varios atributos para crear campos de fecha y hora en combinación con el elemento <input>. El atributo type='date' permite crear un campo de entrada de fecha en el que aparecerá un desplegable con un calendario mensual. Si lo que se quiere es la hora, se usa el atributo type='time'. Pero si se necesita introducir la fecha y la hora, se debe usar el atributo type='datetime-local'.
Mediante los atributos type='week' y type='month' puede especificarse las semanas y los meses, respectivamente. En estos casos también aparecerá un desplegable con un calendario mensual, y el control interactivo será el que determine la semana o el mes del año, según convenga.
Ejemplo de código HTML de entrada de fecha:
<form>
<input type='date'>
</form>
Resultado:
Los controles mencionados en este apartado tienen atributos específicos que permiten definir la fecha máxima que el usuario debería estar habilitado para entrar (atributo max), la fecha mínima (atributo min) y el intervalo de salto entre fecha y fecha (atributo step). El atributo step sólo acepta valores múltiplos del valor mínimo del atributo; por ejemplo: 3 horas, 1 día, 2 semanas, 5 meses, etc.
10. Selector de color
Con el elemento <input> y el atributo type='color' es posible crear un control para seleccionar colores. De esta manera, es posible introducir colores de una manera gráfica y sin tener que hacerlo de forma textual. El navegador convertirá el color seleccionado en el código hexadecimal correspondiente.
Ejemplo de código HTML de un selector de color:
<form>
<input type='color'>
</form>
Resultado:
11. Selector de archivos
Para crear un selector de archivos se usa el elemento <input> con el atributo type='file'. Gracias este control es posible seleccionar archivos del dispositivo actual. Cuando se envían los datos del formulario, el archivo seleccionado es subido al servidor, junto con su nombre y tipo.
Tal y como se explicó en el artículo de formularios, el elemento <form> debe contener el atributo enctype con el valor multipart/form-data para poder subir archivos al servidor. Sin ese atributo, el control no funcionará.
<form enctype='multipart/form-data'>
<input type='file'>
</form>
Resultado:
Este control tiene el atributo específico accept, que permite especificar los tipos de archivo que el servidor acepta. Si el formato no es aceptado, se ignorará. Por ejemplo, si queremos que sólo acepte archivos de imagen:
<input type='file' accept='.jpg,.jpeg,.gif,.png,.bmp,.svg'>
12. Intervalo de datos
El elemento <input> con el atributo type='range' crea un control interactivo que permite introducir un número dentro de un intervalo, que queda comprendido entre un mínimo y un máximo. El valor se puede seleccionar a través de una barra deslizante horizontal. Se trata de un selector bastante impreciso.
<form>
<input type='range' min='0' max='20' step='2'>
</form>
Resultado:
Con los atributos min y max se puede establecer un valor numérico mínimo y máximo, respectivamente. Con el atributo step se especifica el intervalo de salto entre un valor y el siguiente. En el ejemplo anterior se establece un salto de 2 unidades, pudiendo seleccionar desde el 0 hasta el 20, de 2 en 2.
Lista de atributos de todos los tipos de <input>
El atributo autofocus pone el enfoque sobre el control interactivo cuando el documento HTML o la página web termina de cargarse. Es un atributo binario: su presencia lo activa y su ausencia lo desactiva.
El atributo disabled permite deshabilitar el control interactivo, de modo que aparecerá en color gris. Al ser un atributo binario, su inclusión deshabilita el control y su ausencia lo mantiene activo.
El atributo form se utiliza para crear una asociación entre el control interactivo y el formulario padre al que pertenece. El valor de este atributo debe coincidir con el valor del atributo id del formulario.
El atributo name tiene la función de asignar un nombre al control interactivo. Este nombre se enviará al servidor junto con el valor del control, formando así la pareja de datos «nombre-valor», como en el resto de controles.
Tal y como se ha explicado al inicio de este artículo, el atributo type es el que permite definir el tipo de campo de este control de entrada de datos.
El atributo value define un valor por defecto para el control. Este valor será enviado por el navegador. Puede tener su utilidad en el tipo de campo hidden.
