El elemento HTML <input> es el componente fundamental para capturar datos introducidos por el usuario en formularios web.
Tipos de Entrada (input types)
Tipos Textuales y Semánticos
| Tipo | Descripción |
|---|---|
text |
Texto plano de una sola linea |
password |
Texto enmascarado para contrasenas |
email |
Direccion de email con validacion automatica |
url |
Entrada de URL absoluta |
tel |
Numero de telefono (activa teclado numerico en moviles) |
search |
Campo de busqueda con boton de borrado rapido |
Tipos Numéricos y Cuantitativos
| Tipo | Descripción |
|---|---|
number |
Campo numerico con incremento (min, max, step) |
range |
Control deslizante para seleccionar un valor aproximado |
Tipos Temporales y de Fecha
| Tipo | Descripción |
|---|---|
date |
Selector de fecha de calendario (ano, mes, dia) |
time |
Selector de hora del reloj (horas, minutos) |
datetime-local |
Fecha y hora local sin zona horaria |
month |
Selector de ano y mes |
week |
Selector de ano y numero de semana ISO |
Selección y Acciones
| Tipo | Descripción |
|---|---|
checkbox |
Casilla de verificacion booleana o seleccion multiple |
radio |
Opcion excluyente dentro de un grupo |
color |
Paleta de seleccion de color |
file |
Subida de archivos adjuntos (accept, multiple) |
hidden |
Valor oculto enviado con el formulario |
submit |
Boton para enviar el formulario |
reset |
Restablece el formulario a sus valores iniciales |
button |
Boton sin comportamiento por defecto |
Atributos Principales de Validación
| Atributo | Comportamiento |
|---|---|
required |
Impide el envio si el campo esta vacio |
pattern="[A-Za-z0-9]+" |
Expresion regular que debe cumplir el valor |
min="1" max="100" |
Limites minimos y maximos para numeros o fechas |
step="0.5" |
Intervalo de incremento valido para numeros |
minlength="5" maxlength="20" |
Longitud minima y maxima de caracteres |
placeholder="..." |
Texto descriptivo provisional |
readonly |
Impide la modificacion pero envia el valor |
disabled |
Desactiva el campo y no envia su valor |
autofocus |
Enfoca el campo al cargar la pagina |
Ejemplo Completo de Formulario
<form action="/api/submit" method="POST">
<label for="user-email">Correo electrónico:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">Contraseña (min. 8 caracteres):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">Edad:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
Acepto los términos y condiciones
</label>
<input type="submit" value="Crear Cuenta" />
</form>