HTML
Atributos compartidos por controles de formulario, incluyendo required, readonly, disabled, placeholder, autocomplete, inputmode y patrones de entrada.
<input name="email" type="email" required>Impide el envío nativo cuando falta un valor válido. No garantiza que el servidor reciba un dato correcto.
<input name="country" value="CO" disabled>Normalmente no recibe foco, no puede modificarse y no participa en form data.
Un fieldset disabled deshabilita sus controles descendientes, con excepciones relacionadas con el primer legend.
<input name="username" value="nico" readonly>Permite foco y envío, pero evita edición normal. Solo aplica a ciertos controles textuales; no es equivalente a disabled.
<input placeholder="nombre@empresa.com">Muestra una pista corta o ejemplo. No debe repetir ni sustituir el label.
<input
name="email"
type="email"
autocomplete="email"
>Comunica el propósito del dato a navegadores y password managers.
Tokens comunes:
name
given-name
family-name
email
tel
street-address
postal-code
country
current-password
new-password
one-time-codeUtiliza tokens semánticos, no valores inventados.
<input autocomplete="shipping street-address">
<input autocomplete="billing street-address">Distinguen direcciones de envío y facturación.
Puedes utilizar tokens section-* para múltiples conjuntos repetidos:
<input autocomplete="section-customer1 email">autocomplete="off"Es una sugerencia y los navegadores pueden ignorarla, especialmente para credenciales. No lo uses para impedir password managers.
Datos sensibles como códigos temporales necesitan el token correcto y una política de seguridad, no bloquear autocompletado indiscriminadamente.
<input
type="text"
name="postalCode"
inputmode="numeric"
>Sugiere un teclado. No valida ni cambia el tipo del valor.
Valores comunes:
text.decimal.numeric.tel.search.email.url.none.<input type="search" enterkeyhint="search">Sugiere la etiqueta o icono de la tecla Enter virtual:
enter done go next previous search sendNo cambia qué ocurre al activarla; el formulario y JavaScript definen el comportamiento.
<input type="text" autocapitalize="words">Sugiere capitalización en teclados virtuales. No transforma el valor de forma confiable.
<textarea spellcheck="true"></textarea>Sugiere revisión ortográfica. Puede no ser apropiada para usernames, códigos o identificadores.
<input
minlength="3"
maxlength="20"
pattern="[a-z0-9_]+"
>Definen constraints. Explica el formato en texto visible y repite la validación en servidor.
<input type="number" min="0" max="100" step="5">Restringen rango y granularidad para tipos compatibles.
<input type="email" multiple>
<input type="file" multiple>
<select multiple>...</select>Su significado depende del control.
<input autofocus>Puede desplazar scroll, abrir teclados virtuales y robar foco antes de que el usuario comprenda la página. Utilízalo con mucha moderación y evita múltiples autofocus.
Un control puede sobrescribir propiedades del formulario que lo envía:
<button
type="submit"
formaction="/drafts"
formmethod="post"
formnovalidate
>
Guardar borrador
</button>También existen formenctype y formtarget.
<textarea name="message" dirname="message.dir"></textarea>Envía la dirección del texto como otra entrada. Aporta para contenido bidi de usuarios.
<label for="card-number">Número de tarjeta</label>
<input
id="card-number"
name="cardNumber"
type="text"
inputmode="numeric"
autocomplete="cc-number"
aria-describedby="card-help"
>
<p id="card-help">Escribe solo los números.</p>El dato parece numérico, pero es un identificador y no debe usar type="number".
¿Por qué un código postal puede usar type="text" inputmode="numeric"?
Porque es un identificador que puede incluir ceros iniciales o formatos regionales, mientras inputmode sugiere un teclado numérico sin convertirlo en cantidad.
select, option, optgroup, datalist y textarea modela selección y texto multilínea.