HTML
Inputs de texto, email, teléfono, URL y búsqueda
Uso de inputs para texto, correo, teléfono, URL y búsqueda, con tipos adecuados, autocomplete, patrones de entrada y teclados móviles.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
HTML
Uso de inputs para texto, correo, teléfono, URL y búsqueda, con tipos adecuados, autocomplete, patrones de entrada y teclados móviles.
<label for="name">Nombre</label>
<input id="name" name="name" type="text" autocomplete="name">Es el estado general para texto de una línea.
<label for="email">Correo</label>
<input id="email" name="email" type="email" autocomplete="email" required>Activa validación básica de formato y puede mostrar un teclado adaptado.
No comprueba que la cuenta exista ni que el usuario tenga acceso.
<input type="email" name="recipients" multiple>Permite una lista de direcciones separadas según las reglas del navegador.
<label for="phone">Teléfono</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">No impone un formato universal porque los números varían por región.
Usa pattern solo si el producto conoce un formato concreto y explica el ejemplo. Guarda números en una forma normalizada en el servidor.
<label for="website">Sitio web</label>
<input id="website" name="website" type="url" placeholder="https://example.com">Valida una URL absoluta según el estado del control. No garantiza que el recurso exista o sea seguro.
<label for="query">Buscar proyectos</label>
<input id="query" name="q" type="search">Representa una consulta. El navegador puede ofrecer botón de limpiar, historial o estilo específico.
El control no crea por sí solo una región de búsqueda; utiliza search o un form nombrado cuando corresponda.
<label for="password">Contraseña</label>
<input
id="password"
name="password"
type="password"
autocomplete="current-password"
>Oculta visualmente caracteres, pero el valor sigue existiendo en memoria, DOM y solicitud.
No desactives copiar, pegar o password managers. Usa autocomplete correcto.
<input type="text" minlength="2" maxlength="80">Se aplican a longitud del valor bajo las reglas del control. El servidor debe repetir límites y manejar Unicode correctamente.
<input type="text" size="30">Sugiere ancho basado en caracteres, no limita longitud. CSS controla layout final.
<input
id="username"
name="username"
type="text"
pattern="[a-z0-9_]{3,20}"
aria-describedby="username-help"
>
<p id="username-help">
Entre 3 y 20 caracteres: minúsculas, números o guion bajo.
</p>El pattern debe coincidir con el valor completo y necesita instrucciones visibles.
No utilices una RegExp enorme para validar email; type="email" y validación del servidor son más mantenibles.
<input name="comment" dirname="comment.dir">Puede enviar también la dirección del texto (ltr o rtl). Es útil en contenido internacional generado por usuarios.
<input type="text" name="framework" list="frameworks">
<datalist id="frameworks">
<option value="React"></option>
<option value="Vue"></option>
</datalist>Ofrece sugerencias, pero permite otros valores. No es lo mismo que select.
<input name="username" value="nico" readonly>Readonly permite foco y envío, pero no edición normal.
<input name="username" value="nico" disabled>Disabled normalmente no recibe foco ni se envía.
<input type="text" name="city" value="Bogotá">value define el valor inicial en markup. El estado actual puede cambiar por interacción o JavaScript.
No insertes entrada no confiable sin encoding de atributo apropiado.
<div>
<label for="portfolio-url">URL del portfolio</label>
<input
id="portfolio-url"
name="portfolioUrl"
type="url"
autocomplete="url"
placeholder="https://nicoo.dev"
required
>
</div>¿Por qué type="url" no hace seguro redirigir automáticamente al valor recibido?
Porque solo comprueba sintaxis básica; la URL puede apuntar a un origen malicioso o usar un scheme no permitido para ese flujo.
Inputs numéricos, fechas, color, rango y archivos cubre controles con valores especializados.