Ejemplos (izquierda) y vista gráfica (derecha) con colores relacionados por etiqueta.

Ejemplo completo (todas las etiquetas)

<form action="/enviar" method="post">

  <fieldset>
    <legend>Registro</legend>

    <label for="nombre">Nombre</label>
    <input id="nombre" name="nombre" type="text" placeholder="Tu nombre" required>

    <label for="bio">Biografía</label>
    <textarea id="bio" name="bio" rows="3" placeholder="Cuéntanos sobre ti"></textarea>

    <label for="pais">País</label>
    <select id="pais" name="pais" required>
      <optgroup label="América">
        <option value="mx">México</option>
        <option value="co">Colombia</option>
      </optgroup>
      <optgroup label="Europa">
        <option value="es">España</option>
      </optgroup>
    </select>

    <label for="ciudad">Ciudad (con sugerencias)</label>
    <input id="ciudad" name="ciudad" list="ciudades" placeholder="Escribe una ciudad">
    <datalist id="ciudades">
      <option value="Madrid"></option>
      <option value="Lima"></option>
      <option value="Bogotá"></option>
    </datalist>

    <output name="resumen">Listo para enviar</output>

    <progress value="70" max="100"></progress>

    <meter value="0.6" min="0" max="1">60%</meter>

    <button type="submit">Enviar</button>
  </fieldset>

</form>

Jerarquía lógica

form
└─ fieldset → legend
   ├─ label → input
   ├─ label → textarea
   ├─ label → select → optgroup → option
   ├─ label → input(list=...) + datalist → option
   ├─ output
   ├─ progress
   ├─ meter
   └─ button

5) Formularios

Ejemplo completo (todas las etiquetas)

Jerarquía lógica

Vista gráfica (misma paleta)