Apuntes html

HTML nunca falla, solo se ve raro.

Formularios

Los formularios en HTML permiten a los visitantes de una página web enviar datos al autor, como nombres, correos o comentarios, siendo una de las principales formas de interactividad en HTML tradicional. A diferencia de otros elementos, los formularios invierten el flujo de datos: el usuario envía información al servidor. En esta lección aprenderemos a crear formularios con <form>, añadir controles como <input>, <select>, y <textarea>, mejorar la usabilidad con <label>, <fieldset>, y <legend>, y personalizarlos con atributos HTML y CSS básico. Nos enfocaremos en enviar datos por correo (mailto:), aunque hoy se usan servidores backend para procesar formularios de forma más segura.

¿Qué es un formulario?

Un formulario es una sección de una página web con campos para introducir datos (por ejemplo, un nombre o un mensaje) o la elección entre opciones, que se envían al correo del autor o a un servidor. En HTML clásico, los formularios son la principal forma de interactividad, ya que permiten al visitante "hablar" con la página. Hoy, scripts (como JavaScript) y servidores backend amplían la interactividad, pero los formularios siguen siendo esenciales.

Los datos de un formulario pueden enviarse de dos formas principales:

  • Por correo electrónico: Usando mailto:, los datos llegan al correo del autor. Es simple, pero poco seguro y limitado.
  • Por CGI o backend: Un programa (como un script en PHP o Python) procesa los datos en el servidor. Requiere soporte del servidor, que no siempre está disponible en alojamientos gratuitos.

En esta lección, nos centraremos en el envío por correo (mailto:), ya que es accesible para todos los autores, aunque mencionaremos que los backends son la práctica moderna.

Estructura de un formulario: <form>

La etiqueta <form> encierra todos los elementos del formulario (campos de texto, botones, etc.) y define cómo y dónde se envían los datos. Sus atributos principales son:

  • method: Define cómo se envían los datos. Valores:
    • get: Añade los datos a la URL (por ejemplo, ?nombre=Juan). Limitado a caracteres ASCII y ~100 caracteres. Usado para búsquedas simples.
    • post: Envía los datos en el cuerpo de la petición HTTP. Más seguro y sin límites estrictos. Es el método recomendado.
  • action: Especifica el destino de los datos. Para correo, usa mailto:correo@ejemplo.com. Para backends, usa una URL (por ejemplo, /procesar.php).
  • enctype: Define el formato de los datos (solo con method="post"). Valores:
    • application/x-www-form-urlencoded: Predeterminado, codifica los datos.
    • text/plain: Sin codificación, útil para mailto: (aunque obsoleto).
    • multipart/form-data: Para subir archivos (con <input type="file">).

Ejemplo básico:

<form method="post" action="mailto:webmaster@ejemplo.com" enctype="text/plain">
</form>

Notas:

  • mailto: es obsoleto y poco seguro; los backends (PHP, Node.js) son la alternativa moderna.
  • Puedes enviar a múltiples correos separando con comas: mailto:correo1@ejemplo.com,correo2@ejemplo.com.
  • Otros atributos como accept (caracteres permitidos) o target (frame de destino) son raros y obsoletos.

Controles de formulario

Los formularios usan controles para que los usuarios introduzcan datos. Los principales son <input>, <select>, y <textarea>.

Campos de entrada de datos: <input>

La etiqueta <input> crea campos donde los usuarios introducen o seleccionan datos. Su atributo type define el tipo de control. Los más comunes son:

type="text"

Crea un campo de texto simple. Atributos:

  • name: Identifica el campo (por ejemplo, name="remitente").
  • value: Valor por defecto (opcional).
  • size: Longitud visual del campo (en caracteres, obsoleto; usa CSS).
  • maxlength: Límite de caracteres.

Ejemplo:

<form>
  <input type="text" name="remitente" value="Juan Pérez" size="35" maxlength="10">
</form>

Resultado: Un campo con "Juan Pérez" por defecto, que acepta hasta 10 caracteres.

type="password"

Similar a text, pero muestra asteriscos (****) en lugar del texto. No encripta los datos.

<form>
  <input type="password" name="contraseña" size="35" maxlength="10">
</form>

type="hidden"

Campo invisible para enviar datos predefinidos (por ejemplo, un identificador). No lo ve el usuario.

<form>
  <input type="hidden" name="id_formulario" value="123">
</form>

type="submit"

Crea un botón para enviar el formulario. El atributo value define el texto del botón. 

<form>
  <input type="submit" value="Enviar consulta">
</form>

type="reset"

Crea un botón para borrar todos los campos del formulario.

<form>
  <input type="text" name="remitente" value="Escribe aquí">
  <input type="reset" value="Borrar">
</form>

type="image"

Similar a submit, pero usa una imagen en lugar de un botón. Requiere src para la URL de la imagen.

<form>
  <input type="image" src="enviar.png" alt="Enviar">
</form>

type="file"

Permite subir archivos. Requiere enctype="multipart/form-data" en <form>. 

<form method="post" enctype="multipart/form-data" action="mailto:webmaster@ejemplo.com">
  <input type="file" name="archivo">
</form>

type="radio"

Crea botones de opción donde solo se puede elegir una. Todos deben compartir el mismo name, y value distingue la opción. Usa checked para una selección por defecto.

<form>
  <b>Editor favorito:</b><br>
  <input type="radio" name="editor" value="html-kit" checked> HTML-Kit<br>
  <input type="radio" name="editor" value="front-page"> Front-Page
</form>

type="checkbox"

Permite seleccionar múltiples opciones. Cada uno tiene un name distinto, y value indica el dato enviado. 

<form>
  <b>Helados favoritos:</b><br>
  <input type="checkbox" name="chocolate" value="yes" checked> Chocolate<br>
  <input type="checkbox" name="limon" value="yes"> Limón
</form>

<select>: Menús desplegables

La etiqueta <select> crea un menú desplegable con opciones definidas por <option>. Atributos:

  • name: Identifica el menú.
  • size: Número de opciones visibles (si es >1, crea un cuadro de lista).
  • multiple: Permite seleccionar varias opciones (con Ctrl o Shift).
  • <option> usa value (dato enviado) yselected (opción por defecto).

Ejemplo:

<form>
  <select name="helados">
    <option value="">Selecciona un helado</option>
    <option value="chocolate">Chocolate</option>
    <option value="limon" selected>Limón</option>
    <option value="fresa">Fresa</option>
  </select>
</form>

Con size y multiple:

<form>
  <select name="helados" size="4" multiple>
    <option value="chocolate">Chocolate</option>
    <option value="limon">Limón</option>
    <option value="fresa">Fresa</option>
    <option value="nata">Nata</option>
  </select>
</form>

<textarea>: Áreas de texto

La etiqueta <textarea> crea un cuadro para texto libre. Atributos:

  • name: Identifica el campo.
  • rows: Altura (en líneas).
  • cols: Anchura (en caracteres, obsoleto; usa CSS).
  • wrap: Controla el ajuste de líneas (soft, hard, off; obsoleto).
  • readonly: Impide editar el texto, pero se envía.
  • disabled: Desactiva el campo; no se envía.

Ejemplo:

<form>
  <textarea name="comentarios" rows="5" cols="45">Escribe tu comentario aquí</textarea>
</form>

Etiquetas para controles con <label>

La etiqueta <label> asocia un texto descriptivo a un control, mejorando la accesibilidad (por ejemplo, al hacer clic en el texto se activa el control). Hay dos formas:

  • Explícita: Usa for en <label> y id en el control. 
<form>
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre">
</form>
  • Implícita: Envuelve el control y el texto en<label>. 
<form>
  <label><input type="radio" name="editor" value="html-kit"> HTML-Kit</label>
</form>

Nota: La asociación implícita es compatible con navegadores modernos, pero puede fallar en versiones antiguas de Internet Explorer. Usa id para máxima compatibilidad.

<fieldset> y <legend>: Agrupar controles

  • <fieldset>: Agrupa controles visualmente, dibujando un borde alrededor.
  • <legend>: Añade un título al grupo.

Ejemplo:

<form>
  <fieldset>
    <legend>Datos personales</legend>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre"><br>
    <label for="email">Correo:</label>
    <input type="text" id="email" name="email">
  </fieldset>
</form>

Ejemplo completo con atributos HTML

Aquí tienes un formulario completo con varios controles, usando atributos HTML tradicionales:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Formulario de contacto</title>
</head>
<body>
  <h1>Formulario de contacto</h1>
  <form method="post" action="mailto:webmaster@ejemplo.com" enctype="text/plain">
    <fieldset>
      <legend>Datos personales</legend>
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre" name="nombre" size="35" maxlength="50" value="Juan Pérez"><br>
      <label for="email">Correo:</label>
      <input type="text" id="email" name="email" size="35" maxlength="100"><br>
      <label for="contraseña">Contraseña:</label>
      <input type="password" id="contraseña" name="contraseña" size="35" maxlength="20">
    </fieldset>
    <fieldset>
      <legend>Preferencias</legend>
      <label>Editor favorito:</label><br>
      <input type="radio" id="htmlkit" name="editor" value="html-kit" checked>
      <label for="htmlkit">HTML-Kit</label><br>
      <input type="radio" id="frontpage" name="editor" value="front-page">
      <label for="frontpage">Front-Page</label><br>
      <label>Helados favoritos:</label><br>
      <input type="checkbox" id="chocolate" name="chocolate" value="yes">
      <label for="chocolate">Chocolate</label><br>
      <input type="checkbox" id="limon" name="limon" value="yes" checked>
      <label for="limon">Limón</label>
    </fieldset>
    <fieldset>
      <legend>Comentarios</legend>
      <label for="comentarios">Escribe tu mensaje:</label><br>
      <textarea id="comentarios" name="comentarios" rows="5" cols="45">Escribe aquí</textarea>
    </fieldset>
    <input type="hidden" name="id_formulario" value="contacto_001">
    <input type="submit" value="Enviar formulario">
    <input type="reset" value="Borrar datos">
  </form>
</body>
</html>

Instrucciones:

  • Guarda como formulario.html en UTF-8 (en VS Code: "Archivo" → "Guardar como" → selecciona UTF-8).
  • Abre en un navegador para verificar que los campos, botones, se vean bien.
  • Sube al servidor en modo binario (ver lección de rutas).
  • Nota: mailto: es solo para aprendizaje; en producción, usa un backend.

Mismo ejemplo usando CSS

Muchos atributos HTML (size, cols, rows) están en desuso. La alternativa moderna es CSS con la propiedad style. Aquí tienes el mismo formulario, pero usando CSS para reemplazar atributos obsoletos: 

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Formulario de contacto</title>
</head>
<body>
  <h1>Formulario de contacto</h1>
  <form method="post" action="mailto:webmaster@ejemplo.com" enctype="text/plain">
    <fieldset>
      <legend>Datos personales</legend>
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre" name="nombre" style="width: 300px; max-width: 400px;" value="Juan Pérez"><br>
      <label for="email">Correo:</label>
      <input type="text" id="email" name="email" style="width: 300px; max-width: 600px;"><br>
      <label for="contraseña">Contraseña:</label>
      <input type="password" id="contraseña" name="contraseña" style="width: 300px; max-width: 200px;">
    </fieldset>
    <fieldset>
      <legend>Preferencias</legend>
      <label>Editor favorito:</label><br>
      <input type="radio" id="htmlkit" name="editor" value="html-kit" checked>
      <label for="htmlkit">HTML-Kit</label><br>
      <input type="radio" id="frontpage" name="editor" value="front-page">
      <label for="frontpage">Front-Page</label><br>
      <label>Helados favoritos:</label><br>
      <input type="checkbox" id="chocolate" name="chocolate" value="yes">
      <label for="chocolate">Chocolate</label><br>
      <input type="checkbox" id="limon" name="limon" value="yes" checked>
      <label for="limon">Limón</label>
    </fieldset>
    <fieldset>
      <legend>Comentarios</legend>
      <label for="comentarios">Escribe tu mensaje:</label><br>
      <textarea id="comentarios" name="comentarios" style="width: 400px; height: 100px;">Escribe aquí</textarea>
    </fieldset>
    <input type="hidden" name="id_formulario" value="contacto_001">
    <input type="submit" value="Enviar formulario">
    <input type="reset" value="Borrar datos">
  </form>
</body>
</html>

Notas sobre el ejemplo con CSS:

  • size="35" → style="width: 300px; max-width: 400px".
  • cols="45" rows="5" → style="width: 400px; height: 100px".
  • Los valores de width y height son aproximados para replicar el aspecto visual.
  • <label>, <fieldset>, <legend>, y los tipos de <input> no cambian, ya que no dependen de atributos obsoletos.

Instrucciones:

  • Guarda como formulario_css.html in UTF-8.
  • Abre en un navegador para comparar con el ejemplo HTML. El resultado visual es similar, pero usa CSS moderno.
  • Sube al servidor en modo binario.

Consejos para evitar problemas

  1. Usa UTF-8: Declara <meta charset="UTF-8"> y guarda archivos en UTF-8 para caracteres como é o ó.
  2. Prueba el formulario: Abre el HTML en navegadores para verificar campos, botones, y etiquetas.
  3. Evita mailto: en producción: Usa un backend (PHP, Python) para procesar datos de forma segura.
  4. IDs únicos: Asegúrate de que cada id (en <label> y controles) sea único en la página.
  5. **Cuidado con method="get": Evítalo para datos largos o no ASCII, usa post.
TOP