En HTML, los elementos 'input' permiten a los usuarios ingresar datos. La propiedad 'type' de un 'input' especifica qué tipo de dato puede ingresar el usuario, y es crucial para mejorar la experiencia del usuario y la validación de los formularios. A continuación, se describe el uso de los principales tipos de 'input' disponibles en HTML.
Tipos de 'input'
- text: Permite introducir texto de una sola línea.
- number: Permite introducir un número. Proporciona controles específicos para incrementar o decrementar el valor.
- email: Permite introducir una dirección de correo electrónico. Realiza validaciones básicas de formato.
- date: Permite seleccionar una fecha mediante un selector de calendario.
- month: Permite seleccionar un mes y un año, sin un día específico.
- url: Permite introducir una URL. Realiza validaciones básicas de formato.
- tel: Permite introducir un número de teléfono.
- password: Permite introducir una contraseña y oculta el texto escrito.
- search: Similar al input 'text', pero diseñado específicamente para búsquedas.
- color: Permite seleccionar un color mediante una interfaz gráfica.
- range: Permite seleccionar un valor numérico dentro de un rango usando un control deslizante.
- time: Permite seleccionar una hora específica.
- datetime-local: Permite seleccionar una fecha y hora (sin huso horario).
- week: Permite seleccionar una semana del año.
- file: Permite seleccionar un archivo para subir.
La correcta especificación del tipo de 'input' ayuda a los navegadores y a los dispositivos a proporcionar interfaces de usuario adecuadas, lo que mejora la usabilidad y accesibilidad del formulario. Además, algunos tipos de 'input' proporcionan validación automática, lo que puede reducir la cantidad de errores de entrada.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Inputs</title>
</head>
<body>
<label for="text">Texto:</label>
<input type="text" id="text" name="text" /><br /><br />
<label for="number">Número:</label>
<input type="number" id="number" name="number" /><br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" /><br /><br />
<label for="date">Fecha:</label>
<input type="date" id="date" name="date" /><br /><br />
<label for="month">Mes:</label>
<input type="month" id="month" name="month" /><br /><br />
<label for="url">URL:</label>
<input type="url" id="url" name="url" /><br /><br />
<label for="tel">Teléfono:</label>
<input type="tel" id="tel" name="tel" /><br /><br />
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" /><br /><br />
<label for="search">Buscar:</label>
<input type="search" id="search" name="search" /><br /><br />
<label for="color">Color:</label>
<input type="color" id="color" name="color" /><br /><br />
<label for="range">Rango:</label>
<input type="range" id="range" name="range" min="0" max="100" /><br /><br />
<label for="time">Hora:</label>
<input type="time" id="time" name="time" /><br /><br />
<label for="datetime-local">Fecha y Hora Local:</label>
<input type="datetime-local" id="datetime-local" name="datetime-local" /><br /><br />
<label for="week">Semana:</label>
<input type="week" id="week" name="week" /><br /><br />
<label for="file">Archivo:</label>
<input type="file" id="file" name="file" /><br /><br />
</body>
</html>
Ejemplo Funcional
Validación de Inputs
Es muy importante validar los inputs antes de enviarlos al servidor y al recibirlos en el servidor. Las validaciones nativas de los inputs se pueden saltar muy fácilmente cambiando el 'type' en ejecución. Por lo tanto, es recomendable implementar validaciones adicionales tanto en el lado del cliente como en el del servidor para garantizar la integridad y seguridad de los datos.
Recursos
Puedes encontrar mas información visitando la documentación oficial
