Etiqueta input en HTML
Introducción
Uno de los elementos fundamentales en HTML5 es la etiqueta <input>, que permite a los desarrolladores recopilar información del usuario a través de diversos tipos de campos de entrada.
La etiqueta <input> es esencial en la creación de formularios y es la piedra angular para interactuar con los usuarios en la web. Ya sea que necesites recopilar datos para una encuesta, permitir que los usuarios se registren en un sitio web o aceptar información para procesar un pago, la etiqueta <input> es la herramienta que te permitirá lograrlo.
En este artículo, exploraremos en detalle la etiqueta <input> de HTML5, incluyendo sus diferentes tipos, atributos, estilos y cómo asegurar la accesibilidad y compatibilidad con los navegadores.
Además, discutiremos las mejores prácticas para el uso eficiente de la etiqueta <input> en tus proyectos web. Comencemos nuestro viaje para dominar el uso de la etiqueta <input> en HTML5.
¿Qué es la etiqueta <input> en HTML?
La etiqueta <input> en HTML5 es un elemento utilizado dentro de un formulario <form> para crear campos de entrada interactivos que permiten a los usuarios ingresar información.
Esta etiqueta es altamente versátil y puede adaptarse a una amplia variedad de tipos de datos y formatos, como texto, números, fechas, contraseñas, casillas de verificación y botones de opción, entre otros.
La sintaxis básica de la etiqueta <input> es la siguiente:
<input type="tipo_de_input" atributo1="valor1" atributo2="valor2" ...>
Lenguaje del código: HTML, XML (xml)Donde tipo_de_input define el tipo específico de campo de entrada y los atributos adicionales (atributo1, atributo2, …) modifican el comportamiento y la apariencia del elemento.
Tipos de elementos <input> en HTML5
La etiqueta <input> admite varios tipos de campos de entrada que se definen mediante el atributo type.
A continuación, se presentan algunos de los tipos más comunes de elementos <input> con ejemplos:
1. Texto
Para crear un campo de entrada de texto simple, se utiliza el tipo “text”. Los usuarios pueden ingresar cualquier cadena de texto en este campo.
<input type="text" name="nombre" placeholder="Ingrese su nombre">
Lenguaje del código: HTML, XML (xml)2. Contraseña
El tipo “password” crea un campo de entrada donde los caracteres ingresados se ocultan, lo que es útil para ingresar contraseñas de manera segura.
<input type="password" name="contrasena" placeholder="Ingrese su contraseña">
Lenguaje del código: HTML, XML (xml)3. Checkbox
Las casillas de verificación permiten a los usuarios seleccionar múltiples opciones de una lista. Para crear una casilla de verificación, utiliza el tipo “checkbox”.
<input type="checkbox" name="intereses" value="deporte"> Deporte
<input type="checkbox" name="intereses" value="arte"> Arte
Lenguaje del código: HTML, XML (xml)4. Radio
Los botones de opción permiten seleccionar una única opción de un conjunto. Para crear botones de opción, usa el tipo “radio”.
<input type="radio" name="genero" value="masculino"> Masculino
<input type="radio" name="genero" value="femenino"> Femenino
Lenguaje del código: HTML, XML (xml)5. Number
El tipo “number” crea un campo de entrada para ingresar valores numéricos. Puedes especificar el rango de números permitidos utilizando los atributos min y max.
<input type="number" name="edad" min="1" max="120" placeholder="Ingrese su edad">
Lenguaje del código: HTML, XML (xml)6. Email
Para crear un campo de entrada específico para direcciones de correo electrónico, utiliza el tipo “email”. Este tipo de campo proporciona una validación básica de correo electrónico de forma automática.
<input type="email" name="correo" placeholder="Ingrese su correo electrónico">
Lenguaje del código: HTML, XML (xml)7. Date
El tipo “date” crea un campo de entrada para seleccionar fechas utilizando un selector de fecha nativo del navegador.
<input type="date" name="fecha_nacimiento">
Lenguaje del código: HTML, XML (xml)8. File
Para permitir a los usuarios cargar archivos, utiliza el tipo “file”. Los usuarios pueden seleccionar un archivo de su dispositivo utilizando el cuadro de diálogo de carga de archivos.
<input type="file" name="archivo_adjunto">
Lenguaje del código: HTML, XML (xml)9. Submit
El tipo submit crea un botón que, al hacer clic, envía el formulario y sus datos al servidor. Generalmente, se especifica un atributo action en la etiqueta <form> para indicar el destino del envío del formulario.
<input type="submit" value="Enviar">
Lenguaje del código: HTML, XML (xml)10. Button
El tipo “button” crea un botón genérico que puede usarse para diversas acciones en la página, como abrir una ventana emergente, enviar datos mediante JavaScript, etc.
Puedes agregar funcionalidad adicional utilizando JavaScript y escuchando el evento click en el botón.
<input type="button" value="Haga clic aquí" onclick="miFuncion()">
Lenguaje del código: HTML, XML (xml)11. Range
El tipo “range” crea un control deslizante que permite a los usuarios seleccionar un valor dentro de un rango específico. Puedes establecer el rango utilizando los atributos min, max y step.
<input type="range" name="volumen" min="0" max="100" step="1">
Lenguaje del código: HTML, XML (xml)12. Tel
Para crear un campo de entrada específico para números de teléfono, utiliza el tipo “tel”. Aunque este tipo de campo no proporciona una validación automática, ofrece una mejor experiencia de usuario en dispositivos móviles al mostrar el teclado numérico adecuado.
<input type="tel" name="telefono" placeholder="Ingrese su número de teléfono">
Lenguaje del código: HTML, XML (xml)Estos son algunos de los tipos de elementos <input> más comunes en HTML5. Cada tipo de campo tiene sus propias características y comportamientos, y puede personalizarse aún más mediante la adición de atributos y estilos específicos.
Al combinar estos diferentes tipos de elementos <input> y configurar sus atributos y estilos según sea necesario, puedes crear formularios web interactivos y atractivos que se adapten a una amplia variedad de necesidades y casos de uso.
Es importante mencionar que algunos de estos tipos de elementos <input> pueden no ser completamente compatibles con navegadores más antiguos o menos comunes.
Por lo tanto, es recomendable asegurarse de que tu sitio web funcione correctamente en una variedad de navegadores y versiones, utilizando soluciones alternativas o polyfills cuando sea necesario.
En las siguientes secciones, exploraremos en detalle los atributos que pueden aplicarse a los elementos <input>, cómo validar los datos ingresados por el usuario, cómo aplicar estilos a los elementos <input> y cómo garantizar la accesibilidad y la compatibilidad con los navegadores.
Atributos comunes de la etiqueta <input>
Existen varios atributos que pueden aplicarse a la etiqueta <input> para modificar su comportamiento, apariencia y características.
A continuación, se detallan algunos de los atributos más comunes con ejemplos:
name
El atributo name se utiliza para identificar un campo de entrada en particular. Es especialmente útil cuando se procesan los datos del formulario en el servidor, ya que actúa como clave para los valores ingresados.
<input type="text" name="nombre_usuario" placeholder="Ingrese su nombre">
Lenguaje del código: HTML, XML (xml)value
El atributo value define el valor predeterminado de un campo de entrada. Este valor se envía al servidor cuando se envía el formulario.
<input type="text" name="nombre" value="John Doe">
Lenguaje del código: HTML, XML (xml)placeholder
El atributo placeholder muestra un texto de sugerencia en el campo de entrada cuando está vacío. Este texto desaparece cuando el usuario comienza a escribir en el campo.
<input type="text" name="correo" placeholder="Ingrese su correo electrónico">
Lenguaje del código: HTML, XML (xml)required
El atributo required indica que un campo de entrada es obligatorio y debe completarse antes de enviar el formulario.
<input type="text" name="nombre" placeholder="Ingrese su nombre" required>
Lenguaje del código: HTML, XML (xml)disabled
El atributo disabled desactiva un campo de entrada, lo que significa que los usuarios no pueden interactuar con él ni modificar su valor. Los campos desactivados no se envían con el formulario.
<input type="text" name="nombre" value="John Doe" disabled>
Lenguaje del código: HTML, XML (xml)readonly
El atributo readonly hace que un campo de entrada sea de solo lectura. A diferencia de los campos desactivados, los campos de solo lectura sí se envían con el formulario, pero los usuarios no pueden modificar su valor.
<input type="text" name="id_usuario" value="12345" readonly>
Lenguaje del código: HTML, XML (xml)autocomplete
El atributo autocomplete permite al navegador completar automáticamente los campos de entrada con valores almacenados previamente por el usuario.
Puede establecerse en “on” para habilitar la función o en “off” para deshabilitarla.
<input type="text" name="direccion" placeholder="Ingrese su dirección" autocomplete="on">
Lenguaje del código: HTML, XML (xml)id
El atributo id asigna un identificador único al elemento <input>. Este identificador se puede utilizar para seleccionar y manipular el elemento mediante JavaScript y para aplicar estilos específicos mediante CSS. Los valores de los atributos id deben ser únicos en todo el documento.
<input type="text" id="nombre_usuario" name="nombre_usuario" placeholder="Ingrese su nombre de usuario">
Lenguaje del código: HTML, XML (xml)class
El atributo class permite asignar una o varias clases al elemento <input>. Las clases son útiles para aplicar estilos CSS y manipular elementos que comparten características comunes mediante JavaScript. Puedes asignar múltiples clases separándolas con espacios.
<input type="text" class="formulario-entrada entrada-nombre" name="nombre" placeholder="Ingrese su nombre">
Lenguaje del código: HTML, XML (xml)type (explicación adicional)
Como se mencionó anteriormente, el atributo type define el tipo específico de campo de entrada. Algunos ejemplos de tipos de elementos <input> incluyen “text”, “password”, “checkbox”, “radio”, “number”, “email”, “date”, “file”, “submit”, “button”, “range” y “tel”.
El tipo de campo determina el comportamiento y la apariencia del elemento <input> y, en algunos casos, proporciona validación automática del navegador y una experiencia de usuario adaptada a los dispositivos móviles.
<input type="text" class="formulario-entrada" name="nombre" id="nombre" placeholder="Ingrese su nombre">
Lenguaje del código: HTML, XML (xml)Estos son algunos de los atributos más comunes que puedes utilizar con la etiqueta <input>. Al aplicar estos atributos en diferentes combinaciones y ajustarlos según las necesidades de tu formulario, podrás crear una experiencia de usuario más personalizada y accesible.
En la siguiente sección, analizaremos la validación de datos en elementos <input> y cómo puedes asegurarte de que los usuarios ingresen información válida en tus formularios.
Validación de datos en elementos <input>
La validación de datos es esencial para garantizar que los usuarios ingresen información válida y en el formato correcto en tus formularios.
HTML5 introduce características de validación incorporadas en la etiqueta <input> que puedes utilizar para validar datos sin la necesidad de JavaScript adicional.
A continuación, se presentan algunos ejemplos de validación de datos en elementos <input>:
1. Validación de campos obligatorios
El atributo required indica que un campo de entrada es obligatorio y debe completarse antes de enviar el formulario. Si el campo está vacío, el navegador mostrará un mensaje de error y evitará que se envíe el formulario.
<input type="text" name="nombre" placeholder="Ingrese su nombre" required>
Lenguaje del código: HTML, XML (xml)2. Validación de tipos específicos
Al usar un tipo específico de entrada, como “email” o “number”, el navegador proporciona una validación básica para garantizar que los datos ingresados cumplan con el formato correcto.
<input type="email" name="correo" placeholder="Ingrese su correo electrónico" required> <input type="number" name="edad" min="1" max="120" placeholder="Ingrese su edad" required>
Lenguaje del código: HTML, XML (xml)4. Validación de rango
Para campos de entrada numéricos, puedes utilizar los atributos min y max para especificar el rango de valores permitidos.
Si el valor ingresado está fuera del rango especificado, el navegador mostrará un mensaje de error y evitará que se envíe el formulario.
<input type="number" name="edad" min="18" max="120" placeholder="Ingrese su edad" required>
Lenguaje del código: HTML, XML (xml)4. Validación de patrones
El atributo pattern te permite especificar una expresión regular que el valor ingresado debe coincidir para ser válido.
Si el valor no coincide con el patrón, el navegador mostrará un mensaje de error y evitará que se envíe el formulario. Por ejemplo, para validar un código postal de 5 dígitos:
<input type="text" name="codigo_postal" placeholder="Ingrese su código postal" pattern="\d{5}" title="Ingrese un código postal de 5 dígitos" required>
Lenguaje del código: HTML, XML (xml)5. Personalización de mensajes de validación
Puedes personalizar los mensajes de error de validación utilizando el atributo oninvalid y la propiedad setCustomValidity en JavaScript.
Por ejemplo, para personalizar el mensaje de error para un campo de correo electrónico:
<input type="email" name="correo" placeholder="Ingrese su correo electrónico" oninvalid="this.setCustomValidity('Ingrese un correo electrónico válido')" oninput="this.setCustomValidity('')" required>
Lenguaje del código: HTML, XML (xml)Estos son algunos ejemplos de cómo puedes validar datos en elementos <input> utilizando las características de validación incorporadas de HTML5. Si bien estas validaciones cubren muchos casos de uso comunes, es posible que necesites validaciones más avanzadas o personalizadas en ciertos escenarios.
En esos casos, puedes utilizar JavaScript y bibliotecas de validación adicionales para ampliar las capacidades de validación de tus formularios. Es importante recordar que la validación del lado del cliente nunca debe ser el único método de validación, ya que puede ser eludida o desactivada por un usuario malintencionado.
Siempre debes validar los datos en el lado del servidor antes de procesarlos y almacenarlos en una base de datos para garantizar la seguridad y la integridad de tus datos.
En las siguientes secciones, exploraremos cómo aplicar estilos a los elementos <input> y cómo garantizar la accesibilidad y la compatibilidad con diferentes navegadores.
Aplicar estilos a los elementos <input>
Los estilos en elementos <input> pueden mejorar significativamente la experiencia de usuario en tus formularios. Puedes utilizar CSS para personalizar la apariencia de los campos de entrada, adaptarlos a la estética de tu sitio web y hacer que sean más atractivos e intuitivos para los usuarios.
Aquí hay algunos ejemplos de cómo aplicar estilos a los elementos <input>:
Estilos básicos
Puedes aplicar estilos básicos a tus elementos <input>, como cambiar el tamaño, el color de fondo, el color del texto y los bordes.
input[type="text"] {
width: 100%;
padding: 10px;
background-color: #f1f1f1;
color: #333;
border: 1px solid #ccc;
}
Lenguaje del código: CSS (css)Estilos en foco
Puedes personalizar la apariencia de un campo de entrada cuando está enfocado (seleccionado) utilizando la pseudo-clase :focus.
input[type="text"]:focus {
border: 1px solid #0080ff;
outline: none;
}
Lenguaje del código: CSS (css)Estilos para campos inválidos
Puedes aplicar estilos específicos a campos de entrada inválidos utilizando la pseudo-clase :invalid. Esto puede ayudar a destacar errores de validación y guiar a los usuarios para corregirlos.
input[type="text"]:invalid {
border: 1px solid #ff0000;
}
Lenguaje del código: CSS (css)Estilos para campos obligatorios
Puedes aplicar estilos específicos a campos de entrada obligatorios utilizando el atributo required en combinación con un selector de atributos en CSS.
input[type="text"][required] {
border-left: 3px solid #0080ff;
}
Lenguaje del código: CSS (css)Estilos para elementos <input> personalizados
Algunos tipos de elementos <input> pueden ser difíciles de estilizar de manera consistente en todos los navegadores (por ejemplo, “checkbox” y “radio”).
En estos casos, puedes ocultar el elemento original y crear una apariencia personalizada utilizando CSS y pseudo-elementos.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
input[type="checkbox"]:checked + label::before {
background-image: url("checkmark.svg");
background-repeat: no-repeat;
background-position: center;
}
Lenguaje del código: CSS (css)Estos son algunos ejemplos de cómo aplicar estilos a los elementos <input> utilizando CSS. Puedes adaptar estos ejemplos y explorar técnicas adicionales para crear formularios atractivos y coherentes con el diseño general de tu sitio web.
Accesibilidad en elementos <input>
La accesibilidad es esencial para garantizar que todos los usuarios, incluidos aquellos con discapacidades, puedan interactuar con tus formularios y elementos <input>.
A continuación, se presentan algunos ejemplos y prácticas recomendadas para mejorar la accesibilidad en tus elementos <input>:
Asociar etiquetas <label> con elementos <input>
Siempre debes asociar un elemento <label> con cada campo de entrada utilizando el atributo for en la etiqueta <label> y el atributo id en el elemento <input>.
Esto mejora la accesibilidad al proporcionar información contextual sobre el campo de entrada y permitir que los usuarios hagan clic en la etiqueta para enfocar el campo de entrada asociado.
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Ingrese su nombre">
Lenguaje del código: HTML, XML (xml)Agregar descripciones accesibles con aria-label
En casos donde no haya una etiqueta visible asociada al campo de entrada, puedes utilizar el atributo aria-label para proporcionar una descripción accesible.
<input type="text" id="buscar" name="buscar" placeholder="Buscar" aria-label="Buscar en el sitio">
Lenguaje del código: HTML, XML (xml)Utilizar aria-describedby para proporcionar información adicional
Si necesitas brindar información adicional o instrucciones relacionadas con un campo de entrada, puedes utilizar el atributo aria-describedby en combinación con un elemento descriptivo, como un <span> o un <p>.
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena" aria-describedby="info-contrasena">
<p id="info-contrasena">La contraseña debe tener al menos 8 caracteres, incluyendo al menos una letra mayúscula y un número.</p>
Lenguaje del código: HTML, XML (xml)Agrupar elementos relacionados con <fieldset> y <legend>
Cuando tengas un grupo de elementos relacionados, como un conjunto de opciones de radio o casillas de verificación, utiliza los elementos <fieldset> y <legend> para agruparlos y proporcionar un título accesible para el grupo.
<fieldset>
<legend>Seleccione sus intereses:</legend>
<input type="checkbox" id="deporte" name="intereses" value="deporte">
<label for="deporte">Deporte</label>
<input type="checkbox" id="arte" name="intereses" value="arte">
<label for="arte">Arte</label>
<input type="checkbox" id="ciencia" name="intereses" value="ciencia">
<label for="ciencia">Ciencia</label>
</fieldset>
Lenguaje del código: HTML, XML (xml)Proporcionar alternativas para entrada de datos no accesibles
Algunos elementos <input> pueden ser inaccesibles o difíciles de utilizar para ciertos usuarios, como aquellos con discapacidades motoras o visuales. En estos casos, considera proporcionar una alternativa accesible para la entrada de datos.
Por ejemplo, para un control deslizante de rango, podrías ofrecer una entrada de texto donde los usuarios puedan ingresar el valor directamente.
<label for="rango">Rango (1-100):</label>
<input type="range" id="rango" name="rango" min="1" max="100" step="1" aria-labelledby="rango">
<label for="rango-texto" class="visually-hidden">Ingrese el valor del rango:</label>
<input type="number" id="rango-texto" name="rango-texto" min="1" max="100" aria-labelledby="rango-texto">
Lenguaje del código: HTML, XML (xml)Al seguir estas prácticas recomendadas y ejemplos, puedes mejorar significativamente la accesibilidad de tus elementos <input> y garantizar que todos los usuarios, independientemente de sus habilidades, puedan interactuar con tus formularios de manera efectiva y sin frustraciones.
Referencias
Aquí tienes algunas referencias útiles sobre la etiqueta <input> de HTML5. Estos recursos te proporcionarán más información y ejemplos para comprender y trabajar con diferentes tipos de elementos <input> y sus atributos:
- MDN Web Docs – <input>: La documentación oficial de Mozilla Developer Network (MDN) es un recurso confiable y completo sobre la etiqueta <input> en HTML5, incluidos los tipos, atributos y ejemplos.
- W3Schools – HTML <input>: W3Schools ofrece tutoriales y ejemplos prácticos sobre la etiqueta <input> de HTML5. Es una excelente fuente para aprender cómo utilizar diferentes tipos y atributos de elementos <input> en tus formularios.
- HTML5 Doctor – The HTML5 <input> element: HTML5 Doctor es un recurso popular dedicado a explicar las nuevas características de HTML5. Este artículo sobre el elemento <input> proporciona una visión general de los cambios introducidos en HTML5 y consejos para usar la etiqueta de manera efectiva.