Los formularios son una parte esencial de cualquier página web que quiera recoger datos de los usuarios, como sus nombres, correos electrónicos, opiniones, preferencias, etc. Los formularios permiten crear una comunicación bidireccional entre el usuario y el servidor, y facilitan la realización de acciones como el registro, el inicio de sesión, el envío de comentarios, la compra de productos, etc.
Para crear formularios en HTML, se necesita usar una etiqueta especial que se encarga de generar los controles interactivos que permiten al usuario introducir los datos. Esta etiqueta es la etiqueta <input>.
En este artículo te explicaremos qué es la etiqueta <input>, cómo se usa, qué tipos y atributos tiene y qué consejos debes seguir para crear formularios efectivos y accesibles.
¿Qué es la etiqueta <input>?
La etiqueta <input> es una etiqueta de HTML que se usa para crear controles interactivos para formularios basados en la web con el fin de recibir datos del usuario.
La etiqueta <input> es una etiqueta vacía, lo que significa que no tiene contenido ni etiqueta de cierre. Solo tiene atributos que indican las características del control interactivo.
La etiqueta <input> se debe colocar dentro de una etiqueta <form>, que define el formulario al que pertenece el control. La etiqueta <form> tiene algunos atributos importantes, como action, que indica la URL del servidor que procesa los datos del formulario; y method, que indica el método HTTP que se usa para enviar los datos (GET o POST).
¿Cómo se usa la etiqueta <input>?
La sintaxis básica de la etiqueta <input> es la siguiente:
<input type=“tipo” name=“nombre” value=“valor” /> El atributo type indica el tipo de control interactivo que se quiere crear. Hay disponible una amplia variedad de tipos de datos de entrada y widgets de control, que dependen del dispositivo y el agente de usuario. El tipo predeterminado es text, que crea un campo para introducir texto libre. Otros tipos comunes son button, checkbox, radio, password, email, number, date, etc.
El atributo name indica el nombre del control interactivo, que se usa para identificarlo y enviarlo al servidor. El nombre debe ser único dentro del formulario y debe contener solo caracteres alfanuméricos.
El atributo value indica el valor inicial del control interactivo, que se puede modificar por el usuario o por el código. El valor se envía al servidor junto con el nombre cuando se envía el formulario.
Por ejemplo, si queremos crear un formulario para solicitar el nombre y el correo electrónico del usuario, podríamos usar el siguiente código:
<form action=“https://example.com/subscribe” method=“POST”> <label for=“name”>Nombre:</label> <input type=“text” id=“name” name=“name” value=“” /> <label for=“email”>Correo electrónico:</label> <input type=“email” id=“email” name=“email” value=“” /> <input type=“submit” value=“Suscribirse” /> </form>
El resultado sería el siguiente:
Aquí tienes algunos ejemplos de cómo usar la etiqueta <input> con diferentes tipos y atributos:
- Para crear un campo para introducir el nombre del usuario, puedes usar el siguiente código:
Esto creará un campo de texto vacío con el texto indicativo “Escribe tu nombre”. El atributo required hará que el campo sea obligatorio para enviar el formulario.
- Para crear un botón que envíe los datos del formulario al servidor, puedes usar el siguiente código:
Esto creará un botón con el texto “Enviar” que al pulsarlo enviará los datos del formulario a la URL especificada en el atributo action de la etiqueta <form>.
- Para crear una casilla de verificación que permita al usuario aceptar los términos y condiciones, puedes usar el siguiente código:
Esto creará una casilla de verificación sin marcar junto a un texto que dice “Acepto los términos y condiciones”. El atributo value indica el valor que se enviará al servidor si la casilla está marcada. La etiqueta <label> asocia el texto con la casilla, de forma que al hacer clic en el texto se marque o desmarque la casilla.
- Para crear un control deslizante que permita al usuario elegir un valor entre 0 y 100, puedes usar el siguiente código:
Esto creará un control deslizante con un valor inicial de 50 que se puede modificar entre 0 y 100 con intervalos de 10. La etiqueta <output> muestra el valor actual del control deslizante.
Tipos y atributos tiene la etiqueta <input>
La forma en que funciona un <input> varía considerablemente dependiendo del valor de su atributo type, por lo que los diferentes tipos se cubren en sus propias páginas de referencia separadas. Si este atributo no se especifica, el tipo predeterminado adoptado es text. Los tipos disponibles son los siguientes:
- <input type=“button”>: Un botón pulsable sin comportamiento predeterminado que muestra el valor del atributo value, vacío por defecto.
- <input type=“checkbox”>: Una casilla de verificación que permite seleccionar o deseleccionar un solo valor.
- <input type=“color”>: Un control para especificar un color; abre un selector de color cuando está activo en los navegadores compatibles.
- <input type=“date”>: Un control para introducir una fecha (año, mes y día, sin hora). Abre un selector de fecha o ruedas numéricas para el año, el mes y el día cuando está activo en los navegadores compatibles.
- <input type=“datetime-local”>: Un control para introducir una fecha y hora, sin zona horaria. Abre un selector de fecha y hora o ruedas numéricas para los componentes de fecha y hora cuando está activo en los navegadores compatibles.
- <input type=“email”>: Un campo para editar una dirección de correo electrónico. Parece un campo de texto, pero tiene parámetros de validación y teclado relevantes en los navegadores y dispositivos compatibles con teclados dinámicos.
- <input type=“file”>: Un control que permite al usuario seleccionar un archivo. Usa el atributo accept para definir los tipos de archivos que el control puede seleccionar.
- <input type=“hidden”>: Un control que no se muestra pero cuyo valor se envía al servidor.
- <input type=“image”>: Un botón de envío gráfico. Muestra una imagen definida por el atributo src. El atributo alt se muestra si falta la imagen src.
- <input type=“month”>: Un control para introducir un mes y un año, sin zona horaria.
- <input type=“number”>: Un control para introducir un número. Muestra un controlador giratorio y añade una validación predeterminada. Muestra un teclado numérico en algunos dispositivos con teclados dinámicos.
- <input type=“password”>: Un campo de texto cuyo valor está oculto. Avisará al usuario si el sitio no es seguro.
- <input type=“radio”>: Un botón de opción que permite seleccionar una sola opción entre un conjunto de opciones.
- <input type=“range”>: Un control deslizante que permite seleccionar un valor numérico dentro de un rango predefinido.
- <input type=“reset”>: Un botón que restablece todos los controles a sus valores iniciales.
- <input type=“search”>: Un campo para introducir una consulta de búsqueda. Parece un campo de texto, pero puede tener iconos adicionales para borrar la consulta o enviarla al servidor.
- <input type=“submit”>: Un botón que envía los datos del formulario al servidor.
- <input type=“tel”>: Un campo para introducir un número de teléfono. Parece un campo de texto, pero puede tener un teclado específico en algunos dispositivos con teclados dinámicos.
- <input type=“text”> (valor predeterminado): Un campo para introducir texto libre. El tamaño del campo se puede especificar con el atributo size o con CSS.
- <input type=“time”>: Un control para introducir una hora, sin zona horaria.
- <input type=“url”>: Un campo para introducir una URL. Parece un campo de texto, pero tiene parámetros de validación y teclado relevantes en los navegadores y dispositivos compatibles con teclados dinámicos.
- <input type=“week”>: Un control para introducir una semana y un año, sin zona horaria.
Además del atributo type, la etiqueta <input> tiene otros atributos comunes a todos los tipos o específicos de algunos tipos. Algunos de estos atributos son:
- id: este atributo asigna un identificador único al control interactivo, que se puede usar para referirse a él desde el código o desde otras etiquetas como <label> o <output>.
- class: este atributo asigna una o más clases al control interactivo, que se pueden usar para aplicar estilos CSS o manipularlo desde el código.
- disabled: este atributo deshabilita el control interactivo, impidiendo que el usuario lo modifique o lo envíe al servidor.
- readonly: este atributo hace que el control interactivo sea solo de lectura, impidiendo que el usuario lo modifique pero permitiendo que lo envíe al servidor.
- required: este atributo indica que el control interactivo es obligatorio, es decir, que debe tener un valor antes de enviar el formulario.
- placeholder: este atributo muestra un texto indicativo dentro del control interactivo cuando está vacío, que desaparece cuando el usuario empieza a escribir o seleccionar un valor.
- min, max y step: estos atributos definen el valor mínimo, máximo e intervalo permitidos para los controles numéricos como number, range, date, time, etc.