Atributos de input en HTML
Los tipos de input eligieron la cara con type. Los atributos de input afinan el comportamiento en la misma etiqueta: pistas, obligatorio, rangos, longitud, patrones y bloqueos. Catálogo de ayudantes diarios — no un segundo mapa de type ni el truco form= siguiente.
Por qué importan los atributos
Un type correcto aún deja huecos: vacíos obligatorios, edades fuera de rango, códigos largos. Los atributos aportan comprobaciones ligeras. En apps reales, valida también en el servidor.
Respuesta directa
1) Mantén name, id, value. 2) placeholder es pista — no sustituye label. 3) required para obligatorios. 4) min/max/step en número/fecha; maxlength en texto; a veces pattern. 5) readonly se ve y suele enviarse; disabled bloquea y suele no enviarse. 6) Los atributos afinar type — no lo reemplazan; distintos de form=.
📊 Handy input attributes
| Attribute | Role | Beginner tip |
|---|---|---|
| placeholder | Hint text in an empty field | Not a label — always keep a real label |
| required | Must be filled before submit | Browser may block empty submit |
| min / max / step | Limits for number/date-like types | Match the type you already chose |
| maxlength | Max characters for text-like types | Soft cap in the UI; still check on the server |
| pattern | Allowed character pattern | Keep patterns simple for beginners |
| disabled | Not usable; usually not submitted | Do not disable fields you still need to send |
| readonly | Visible, not editable; still submitted | Good for fixed display values |
Perfil: obligatorio, pistas y longitud
Formulario pequeño: nombre required con placeholder, usuario con maxlength/pattern, ciudad opcional.
<form action="/profile" method="post">
<label for="fullname">Full name</label>
<input id="fullname" name="fullname" type="text"
placeholder="Ada Lovelace" required>
<label for="user">Username</label>
<input id="user" name="user" type="text"
maxlength="12" pattern="[A-Za-z0-9_]+"
placeholder="ada_lovelace" required>
<label for="city">City</label>
<input id="city" name="city" type="text"
placeholder="Optional">
<button type="submit">Save</button>
</form>
Leer el demo de perfil
- required en nombre y usuario
- placeholder solo si vacío — el nombre viene del label
- maxlength=12
- pattern letras/dígitos/_
- ciudad sin required
- type=text ya elegido; atributos afinan
Reserva: rangos y bloqueos
Número y fecha ganan con min/max/step. Código readonly visible y suele enviarse; promo disabled suele omitirse.
<form action="/book" method="post">
<label for="guests">Guests</label>
<input id="guests" name="guests" type="number"
min="1" max="8" step="1" value="2" required>
<label for="night">Night</label>
<input id="night" name="night" type="date"
min="2026-10-01" max="2026-12-31" required>
<label for="code">Booking code</label>
<input id="code" name="code" type="text"
value="BK-1042" readonly>
<label for="promo">Promo (staff only)</label>
<input id="promo" name="promo" type="text"
value="STAFF" disabled>
<button type="submit">Book</button>
</form>
Leer el demo de reserva
- min/max/step huéspedes y noche
- value=2 inicio editable
- readonly mantiene el código y suele enviar
- disabled bloquea edición y a menudo el envío
- límites de fecha con type=date
- siguiente: asociar con form=id
Elegir los ayudantes
- Debe rellenarse: required
- Pista vacía: placeholder (+ label)
- Límites número/fecha: min max step
- Tope de caracteres: maxlength
- Formato simple: pattern
- Ver sin editar y enviar: readonly
- Bloquear y a menudo no enviar: disabled
- Cableado: name id value
- No reelegir type aquí
Práctica — apretar campos con atributos
- Perfil; quita required y restáuralo
- Vacía placeholder; conserva label
- maxlength a 20
- Huéspedes fuera de min/max
- Cambia readonly del código
- Compara envío código vs promo
- Frase: atributos afinan; type eligió la cara
Errores fáciles
- placeholder en vez de label
- desactivar campo que debe enviarse
- confiar solo en el navegador
- min/max en tipos que los ignoran
- pattern demasiado complejo
- confundir con el catálogo type
- saltar pronto a form=
Resumen
- Los atributos afinan tras type
- Diarios: required, placeholder, rangos, maxlength, pattern
- readonly suele enviarse; disabled no
- placeholder sugiere; label nombra
- Mantén name/id/value
- Siguiente: atributos form del input
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior