HTML Demos

Demo en vivo

for + id — el for del label debe coincidir con el id del input. Hace el label clickable y mejora accesibilidad.

name — es el nombre que llega al servidor. Sin name, el campo no se envía.

optgroup — agrupa opciones visualmente sin afectar al valor enviado.

Código importante

copiar<!-- action: URL destino · method: GET o POST -->
<form action="/enviar" method="post">

  <!-- fieldset agrupa campos relacionados -->
  <fieldset>
    <legend>Datos personales</legend>

    <!-- for= debe coincidir con id= del input -->
    <label for="nombre">Nombre</label>
    <input type="text"
           id="nombre"
           name="nombre"
           autocomplete="name">
  </fieldset>

  <fieldset>
    <legend>Preferencias</legend>

    <!-- optgroup: agrupa opciones -->
    <select name="lang">
      <optgroup label="Web">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
    </select>

    <!-- rows controla el alto visible -->
    <textarea name="bio" rows="4"></textarea>
  </fieldset>

  <!-- type=submit · type=reset · type=button -->
  <button type="submit">Enviar</button>
  <button type="reset">Limpiar</button>

</form>