En esta página

Formularios HTML completos y funcionales

14 min lectura TextoCap. 4 — Formularios

Anatomia de un formulario

Un formulario HTML es un contenedor interactivo que recopila datos del usuario y los envia a un servidor. Esta compuesto por el elemento <form> y sus controles internos.

El elemento form

<form action="/procesar" method="post">
  <!-- Controles del formulario -->
</form>

Atributos principales del <form>:

Atributo Descripcion
action URL a donde se envian los datos
method get (datos en URL) o post (datos en el cuerpo)
enctype Tipo de codificacion (necesario para archivos)
novalidate Desactiva la validación nativa del navegador

Tipos de input

HTML5 introdujo muchos tipos de <input> especializados que proporcionan teclados optimizados en móvil y validación automática:

Texto y datos personales

<input type="text" name="nombre" placeholder="Tu nombre">
<input type="email" name="correo" placeholder="[email protected]">
<input type="password" name="clave" placeholder="Tu contrasena">
<input type="tel" name="telefono" placeholder="+591 70012345">
<input type="url" name="sitio" placeholder="https://tusitio.com">

Numeros y rangos

<input type="number" name="edad" min="18" max="120" step="1">
<input type="range" name="volumen" min="0" max="100" value="50">

Fechas y tiempo

<input type="date" name="fecha">
<input type="time" name="hora">
<input type="datetime-local" name="fechahora">
<input type="month" name="mes">
<input type="week" name="semana">

Otros tipos

<input type="color" name="color-favorito" value="#ff5500">
<input type="file" name="documento" accept=".pdf,.doc">
<input type="hidden" name="token" value="abc123">
<input type="search" name="busqueda" placeholder="Buscar...">

Elemento select (listas desplegables)

El <select> permite elegir una o varias opciones de una lista:

<!-- Selección simple -->
<label for="pais">Pais</label>
<select id="pais" name="pais">
  <option value="">Selecciona un pais</option>
  <option value="bo">Bolivia</option>
  <option value="ar">Argentina</option>
  <option value="co">Colombia</option>
  <option value="mx">Mexico</option>
</select>

Puedes agrupar opciones con <optgroup>:

<select id="lenguaje" name="lenguaje">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

Textarea (texto multilnea)

Para campos de texto extenso, usa <textarea>:

<label for="comentario">Tu comentario</label>
<textarea id="comentario" name="comentario" rows="5" cols="40"
  maxlength="500" placeholder="Escribe tu comentario aquí..."></textarea>

A diferencia de <input>, el <textarea> tiene etiqueta de cierre y su contenido predeterminado va entre las etiquetas.

Checkboxes y radio buttons

Checkboxes (selección multiple)

<fieldset>
  <legend>Intereses (elige todos los que apliquen)</legend>
  <label>
    <input type="checkbox" name="intereses" value="html"> HTML
  </label>
  <label>
    <input type="checkbox" name="intereses" value="css"> CSS
  </label>
  <label>
    <input type="checkbox" name="intereses" value="js"> JavaScript
  </label>
</fieldset>

Radio buttons (selección única)

<fieldset>
  <legend>Nivel de experiencia</legend>
  <label>
    <input type="radio" name="nivel" value="principiante"> Principiante
  </label>
  <label>
    <input type="radio" name="nivel" value="intermedio"> Intermedio
  </label>
  <label>
    <input type="radio" name="nivel" value="avanzado"> Avanzado
  </label>
</fieldset>

Todos los radio buttons del mismo grupo deben compartir el mismo atributo name. Solo uno puede estar seleccionado a la vez.

Fieldset y legend

<fieldset> agrupa campos relacionados y <legend> proporciona una etiqueta para el grupo. Esto es especialmente importante para accesibilidad:

<fieldset>
  <legend>Direccion de envio</legend>
  <label for="calle">Calle</label>
  <input type="text" id="calle" name="calle">
  <label for="ciudad">Ciudad</label>
  <input type="text" id="ciudad" name="ciudad">
  <label for="cp">Código postal</label>
  <input type="text" id="cp" name="cp">
</fieldset>

Botones de formulario

HTML ofrece tres tipos de botones dentro de formularios:

<!-- Envia el formulario -->
<button type="submit">Enviar</button>

<!-- Resetea todos los campos a sus valores iniciales -->
<button type="reset">Limpiar</button>

<!-- Boton genérico (no envia ni resetea) -->
<button type="button">Accion personalizada</button>

Siempre específica el atributo type en los botones. Si lo omites, el boton actua como submit por defecto, lo que puede enviar formularios accidentalmente.

Datalist (sugerencias de autocompletado)

El elemento <datalist> proporciona una lista de sugerencias para un <input>, combinando la flexibilidad de un campo de texto con la comodidad de una lista:

<label for="framework">Framework favorito</label>
<input type="text" id="framework" name="framework" list="frameworks">
<datalist id="frameworks">
  <option value="Angular">
  <option value="React">
  <option value="Vue">
  <option value="Svelte">
</datalist>

El usuario puede escribir libremente o elegir de las sugerencias.

Práctica

  1. Crea un formulario de registro: Construye un formulario con method="post" que incluya campos de texto, email, fecha, un <select>, un <textarea>, checkboxes y radio buttons. Agrupa los campos relacionados con <fieldset> y <legend>.
  2. Usa datalist para sugerencias: Anade un campo de texto con un <datalist> que ofrezca al menos 5 sugerencias de autocompletado.
  3. Experimenta con tipos de input: Crea un formulario de prueba con type="color", type="range", type="date", type="number" y type="file". Observa como el navegador renderiza cada uno.

En la siguiente leccion aprenderemos a validar formularios usando las capacidades nativas de HTML5.

Atributo autocomplete
Usa el atributo autocomplete con valores estandar como "name", "email", "tel", "street-address", etc. Esto permite al navegador autocompletar campos, mejorando la experiencia del usuario especialmente en dispositivos móviles.
Nunca solo con GET
No envies datos sensibles (contrasenas, datos personales) con method="get", ya que los datos quedan visibles en la URL. Usa method="post" para datos privados.
html
<form action="/api/registro" method="post">
  <h2>Crear cuenta</h2>

  <fieldset>
    <legend>Datos personales</legend>

    <div>
      <label for="nombre">Nombre completo *</label>
      <input type="text" id="nombre" name="nombre"
        required autocomplete="name"
        placeholder="Ej: Ana Garcia Lopez">
    </div>

    <div>
      <label for="email">Correo electronico *</label>
      <input type="email" id="email" name="email"
        required autocomplete="email"
        placeholder="[email protected]">
    </div>

    <div>
      <label for="fecha-nac">Fecha de nacimiento</label>
      <input type="date" id="fecha-nac" name="fechaNacimiento"
        min="1940-01-01" max="2010-12-31">
    </div>
  </fieldset>

  <fieldset>
    <legend>Preferencias</legend>

    <div>
      <label for="nivel">Nivel de experiencia</label>
      <select id="nivel" name="nivel">
        <option value="">Selecciona un nivel</option>
        <option value="principiante">Principiante</option>
        <option value="intermedio">Intermedio</option>
        <option value="avanzado">Avanzado</option>
      </select>
    </div>

    <div>
      <label for="bio">Sobre ti</label>
      <textarea id="bio" name="bio" rows="4"
        maxlength="300"
        placeholder="Cuentanos un poco sobre ti..."></textarea>
    </div>

    <div>
      <label>
        <input type="checkbox" name="newsletter" value="si">
        Quiero recibir novedades por email
      </label>
    </div>
  </fieldset>

  <button type="submit">Crear mi cuenta</button>
  <button type="reset">Limpiar formulario</button>
</form>