Curso HTML 9. Formularios HTML5 y controles avanzados

9. Formularios HTML5 y controles avanzados

HTML5 revolucionó la creación de formularios al incluir nuevos tipos de <input>, atributos de validación nativos y controles especializados. A continuación exploramos en profundidad cada característica, junto con ejemplos y buenas prácticas.

1. Estructura básica y agrupación de campos

• : define el formulario. Atributos clave: action, method, enctype, novalidate.
• y : agrupan campos relacionados.
• : asocia texto a un control. Usar for o envolver el control.

<form action='/submit' method='post' novalidate>
  <fieldset>
    <legend>Datos Personales</legend>
    <label for='nombre'>Nombre:</label>
    <input type='text' id='nombre' name='nombre' required placeholder='Tu nombre'>
    <br>
    <label for='email'>Email:</label>
    <input type='email' id='email' name='email' required placeholder='ejemplo@dominio.com'>
  </fieldset>
  <button type='submit'>Enviar</button>
</form>

2. Nuevos tipos de <input> en HTML5

HTML5 introduce múltiples tipos que mejoran la experiencia de usuario y la validación:

<form>
  <label>Correo:<input type='email' name='email' required></label>
  <label>Sitio web:<input type='url' name='website' placeholder='https://'></label>
  <label>Edad:<input type='number' name='edad' min='18' max='99'></label>
  <label>Rango:<input type='range' name='nivel' min='0' max='10' value='5'></label>
  <label>Fecha:<input type='date' name='fecha_nac'></label>
  <label>Color favorito:<input type='color' name='color'></label>
  <button type='submit'>Registrar</button>
</form>

3. Atributos de validación nativos

• required: campo obligatorio.
• pattern: expresión regular que debe cumplirse.
• min, max, step: aplicables a tipos numéricos y fechas.
• maxlength, minlength: longitud de texto.
• multiple: permite múltiples valores (email, file).
• autocomplete: sugiere datos almacenados.
• autofocus: foco inicial al cargar la página.

<form>
  <label>Usuario (3-10 letras):
    <input type='text' name='user' required pattern='[A-Za-z]{3,10}' title='Solo letras, 3-10 caracteres'>
  </label>
  <label>Adjuntar fotos:
    <input type='file' name='fotos' accept='image/*' multiple>
  </label>
  <button type='submit'>Subir</button>
</form>

4. Controles avanzados

4.1 <datalist> (sugerencias automáticas)

<label>Elige un navegador:
  <input list='navegadores' name='navegador'>
</label>
<datalist id='navegadores'>
  <option value='Chrome'>
  <option value='Firefox'>
  <option value='Safari'>
  <option value='Edge'>
  <option value='Opera'>
</datalist>

4.2 <output> (resultado de cálculos)

<form oninput='total.value = parseFloat(cant.value) * parseFloat(precio.value)'>
  <label>Cantidad:
    <input type='number' name='cant' value='1' min='0'>
  </label>
  <label>Precio unitario:
    <input type='number' name='precio' value='10' step='0.01'>
  </label>
  <label>Total:
    <output name='total'>10</output>
  </label>
</form>

4.3 <progress> y <meter>

<label>Descarga:
  <progress id='prog' value='0' max='100'>0%</progress>
</label>

<label>Nivel de aceite:
  <meter value='0.7' min='0' max='1'>70%</meter>
</label>

5. Atributos de botón y sobreescritura de formulario

• formaction, formenctype, formmethod, formtarget: para botones <button> o <input type='submit'>.
• formnovalidate: omite validación en el botón.
• form: permite asociar un control a un formulario fuera del <form> usando su id.

<form id='miForm' action='/guardar' method='post'>
  <input type='text' name='dato'>
</form>

<button type='submit' form='miForm' formaction='/otro' formmethod='get'>
  Enviar a otro endpoint
</button>

6. API de validación (Constraint Validation)

JavaScript ofrece la API de Constraint Validation para comprobar y personalizar mensajes:

• element.checkValidity(): devuelve true si pasa las restricciones.
• element.setCustomValidity(msg): define mensaje de error personalizado.
• form.reportValidity(): muestra mensajes de todos los campos inválidos.
• Objeto ValidityState: propiedades como valueMissing, typeMismatch, etc.

<form id='frm'>
  <input type='email' id='mail' required>
  <button>Enviar</button>
</form>

<script>
var mail = document.getElementById('mail');
var frm  = document.getElementById('frm');

mail.addEventListener('input', function() {
  // Si el formato es incorrecto, asigna mensaje
  if(mail.validity.typeMismatch) {
    mail.setCustomValidity('Introduce un correo válido');
  } else {
    mail.setCustomValidity(''); // limpia el mensaje
  }
});

frm.addEventListener('submit', function(e) {
  if(!frm.checkValidity()) {
    // Muestra mensajes y previene envío
    frm.reportValidity();
    e.preventDefault();
  }
});
</script>

7. Buenas prácticas y accesibilidad

• Siempre usar <label> accesibles.
• Proporcionar title o aria-describedby para explicar pattern.
• Ofrecer mensajes claros con setCustomValidity.
• Agrupar campos con <fieldset> y <legend>.
• Usar autocomplete para mejorar usabilidad.
• Validar adicionalmente en servidor.

Con estos recursos, podrás crear formularios ricos, accesibles y con validación robusta sin necesidad de librerías externas.