Aprovecha la validación nativa y los controles avanzados de HTML5.
HTML5 valida formatos y obliga requisitos sin JavaScript.
Los tipos de input y atributos como pattern o autocomplete mejoran la UX.
Combina datalist para sugerencias sin bloquear la escritura.
fieldset y legend agrupan campos relacionados para mejor semántica.
Resumen con ideas principales para repasar rápido.
pattern valida formatos con expresiones regulares en el propio HTML.
required, minlength y maxlength cubren la mayoría de validaciones básicas.
autocomplete ayuda a completar datos frecuentes y reduce fricción.
No todo es input. Estos controles mejoran UX en formularios reales.
select es ideal cuando el conjunto de opciones es cerrado. optgroup ayuda a agruparlas con sentido y reduce errores de elección.
textarea cubre entradas largas como comentarios o descripciones. output sirve para mostrar resultados derivados, por ejemplo un cálculo de presupuesto.
Este formulario valida una matrícula de coche (4 números y 3 letras) y ofrece sugerencias de marcas sin una sola línea de código script.
Aprovecha la validación nativa y los controles avanzados de HTML5.
Código del tema: <form> | <input> | <select>
Resumen con ideas principales para repasar rápido.
Valida con regex sin JS.
Evita envíos vacíos.
Controla rangos y saltos en números.
Mejora la UX con autocompletado.
Sugiere valores sin bloquear la escritura.
Agrupa campos relacionados.
pattern valida formatos con expresiones regulares en el propio HTML.
required, minlength y maxlength cubren la mayoría de validaciones básicas.
autocomplete ayuda a completar datos frecuentes y reduce fricción.
No todo es input. Estos controles mejoran UX en formularios reales.
select es ideal cuando el conjunto de opciones es cerrado. optgroup ayuda a agruparlas con sentido y reduce errores de elección.
textarea cubre entradas largas como comentarios o descripciones. output sirve para mostrar resultados derivados, por ejemplo un cálculo de presupuesto.
Opciones cerradas y controladas.
Agrupa opciones por categoría.
Texto largo con contexto.
Resultado visible de una operación.
<form oninput="total.value = Number(horas.value || 0) * 25">
<label for="servicio">Servicio</label>
<select id="servicio" name="servicio" required>
<optgroup label="Frontend">
<option value="landing">Landing</option>
<option value="ui">UI components</option>
</optgroup>
<optgroup label="Backend">
<option value="api">API</option>
<option value="auth">Auth</option>
</optgroup>
</select>
<label for="comentarios">Comentarios</label>
<textarea id="comentarios" name="comentarios" rows="4" placeholder="Cuéntanos el contexto..."></textarea>
<label for="horas">Horas estimadas</label>
<input id="horas" name="horas" type="number" min="0" step="1" value="1" />
<p>Total estimado: <output name="total">25</output> EUR</p>
</form>Este formulario valida una matrícula de coche (4 números y 3 letras) y ofrece sugerencias de marcas sin una sola línea de código script.
- Usa <input type="text"> + pattern para validar formato.
- Añade required y title para mensajes claros.
- Combina datalist para sugerencias sin bloquear.