Formularios: controles avanzados y tipos de input en proyectos reales

Domina tipos de input menos usados, select/optgroup/textarea/output y decisiones de UX para formularios sólidos.

📘 Teoría

Tipos de input que marcan la diferencia

Estos tipos nativos te ahorran JavaScript y mejoran experiencia móvil. 📱

Usar `type="email"`, `url` o `tel` no es solo semántica: activa teclados y validaciones más adecuadas en móvil.

Tipos como `date`, `file`, `range`, `color` y `search` resuelven necesidades comunes con controles nativos consistentes.

date / time

Fechas y horas con selector nativo.

file

Subida de archivos con restricción de tipo.

range

Controles deslizantes para valores continuos.

url / tel / search

Teclados y validación contextual.

Inputs especializados

<form>
  <label for="web">Web del proyecto</label>
  <input id="web" name="web" type="url" placeholder="https://..." required />

  <label for="telefono">Teléfono</label>
  <input id="telefono" name="telefono" type="tel" autocomplete="tel" />

  <label for="entrega">Fecha de entrega</label>
  <input id="entrega" name="entrega" type="date" />

  <label for="brief">Brief (PDF)</label>
  <input id="brief" name="brief" type="file" accept=".pdf" />
</form>

select, optgroup, textarea y output

Cuatro etiquetas que elevan un formulario básico a formulario útil.

`select` funciona mejor cuando las opciones son cerradas y conocidas. Si hay muchas, agrúpalas con `optgroup`.

`textarea` es para texto largo con contexto. `output` muestra resultados calculados (precio, total, score) de forma clara.

Si el usuario puede escribir cualquier valor, evita select.
Agrupa opciones para reducir carga cognitiva.
Siempre etiqueta textarea con un label claro.
En output, deja claro qué representa el valor.

Formulario con controles avanzados

<form oninput="total.value = Number(horas.value || 0) * 30">
  <label for="servicio">Servicio</label>
  <select id="servicio" name="servicio" required>
    <optgroup label="Diseño">
      <option value="ui">UI</option>
      <option value="ux">UX audit</option>
    </optgroup>
    <optgroup label="Desarrollo">
      <option value="landing">Landing</option>
      <option value="app">Aplicación web</option>
    </optgroup>
  </select>

  <label for="detalle">Detalle del encargo</label>
  <textarea id="detalle" name="detalle" rows="4" placeholder="Contexto, objetivos y plazos"></textarea>

  <label for="horas">Horas estimadas</label>
  <input id="horas" name="horas" type="number" min="0" step="1" value="2" />

  <p>Total estimado: <output name="total">60</output> €</p>
</form>

novalidate y mensajes personalizados

Control total cuando necesitas lógica de negocio más compleja.

La validación nativa cubre mucho, pero en formularios avanzados puedes necesitar reglas cruzadas (por ejemplo, fecha de fin mayor que inicio).

En esos casos, `novalidate` evita mensajes del navegador y te permite mostrar mensajes propios, consistentes con el diseño del producto.

1 Tipos de input que marcan la diferencia 2 select, optgroup, textarea y output 3 novalidate y mensajes personalizados

🧪 Aprende probando

Ejemplo Ejemplo guiado: formulario de presupuesto Combina input especializados, select y output para una UX completa.

⌄

Ejemplo Demo interactiva: tipos de input, datalist y output Prueba controles nativos menos obvios y decide qué tipo encaja mejor según el dato.

⌄

🏁 Retos

Reto Reto: control de archivo y URL Añade campos correctos para subir brief y poner web de referencia.

⌄

🧰 Recursos

Enlaces útiles

MDN - Elemento input MDN - Formularios web MDN - select MDN - textarea

Test

Comprueba tus conocimientos con un test sobre HTML.

Test de HTML

CodePen: Form Validation with HTML5 and JavaScript

Abrir en CodePen

Recursos del curso 27

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 13

Formularios Pro y Validación Nativa

Lección 15

Multimedia en HTML: video, audio y embeds seguros

›