Formularios básicos en HTML

Práctica

En esta práctica construiremos un formulario de contacto básico para el sitio que hemos venido desarrollando a través de los tutoriales. Antes de comenzar, necesitarás crear un nuevo archivo en el directorio raíz del sitio (como se ha visto en el tutorial "Organizando un sitio web") y rellenarlo con la estructura básica de un documento HTML (como se ha visto en el tutorial "La estructura del documento"). Puedes llamar a este nuevo archivo "contacto.html".

Ten en cuenta que, dado el alcance de este sitio, la práctica no incluirá los mecanismos del lado servidor para procesar los datos del formulario. Esto debería consistir de un programa escrito en un lenguaje del lado servidor sportado por el servidor con el que trabajarás. Puedes encontrar más información acerca de este tema en la sección Más allá de HTML.

Entonces, una vez que tu archivo esté listo, comenzaremos por agregar un título y un pequeño párrafo para presentar este formulario al visitante. Recuerda que sólo trabajaremos con todo aquello que vaya dentro del cuerpo (body) aquí, pero lo demás (como el encabezado head) debería estar presente en tu archivo.

<h1>Tienes algo para decir?</h1>
<p>A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!</p>

Tienes algo para decir?

A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!

Ahora que tenemos un marco, pongamos en marcha ese formulario. En primer lugar, crearemos el contenedor form y especificaremos, en su atributo action, el URL del programa que se supone procesará la información del formulario. Aquí yo pondré la dirección de mi agente procesador pero, una vez que estés listo para pasar al siguiente nivel, deberías intentar crear tu propio agente procesador y actualizar el valor del atributo action. También agregaré el atributo target para evitar redirecciones molestas en las pruebas.

<h1>Tienes algo para decir?</h1>
<p>A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!</p>
<form action="../../form-result.php" target="_blank">
 
</form>

Lo próximo es decidir qué campos agregaremos a nuestro formulario. Veamos: necesitamos que la gente se contacte con nosotros y nos deje un mensaje. Podemos recolectar esta información con un control de texto multilínea. Pero también quisiéramos saber quién está escribiendo, de modo que necesitamos obtener su nombre. Y este es un trabajo para el control de texto de una sola línea. Por último, si planeamos responder el mensaje, también necesitaremos una dirección de correo electrónico. Para este propósito usaremos un campo de texto de una sola línea pero, si te sientes osado, podrías intentar con el control de entrada de correo electrónico.

Como en el tutorial, usaremos párrafos para presentar cada uno de estos controles y el texto asociado a ellos. Recuerda que un control de texto de una sola línea se inserta con el elemento input, teniendo el valor "text" en su atributo type, y el control de texto multilínea con el elemento textarea. Veamos como queda.

<h1>Tienes algo para decir?</h1>
<p>A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!</p>
<form action="../../form-result.php" target="_blank">
  <p>Tu nombre: <input type="text" name="nombre"></p>
  <p>Tu dirección de correo: <input type="text" name="correo"></p>
  <p>
    Tu mensaje:<br>
    <textarea name="mensaje"></textarea>
  </p>
</form>

Tienes algo para decir?

A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!

Tu nombre:

Tu dirección de correo:

Tu mensaje:

Esto comienza a verse bien. Pero los usuarios no podrán enviar este formulario hasta que les proveamos un botón de envío. esto lo hacemos con el elemento input teniendo el valor "submit" en el atributo type. Adicionalmente, crearemos un botón de reinicio, en caso que el usuario necesite limpiar todos los campos y empezar de nuevo.

<h1>Tienes algo para decir?</h1>
<p>A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!</p>
<form action="../../form-result.php" target="_blank">
  <p>Tu nombre: <input type="text" name="nombre"></p>
  <p>Tu dirección de correo: <input type="text" name="correo"></p>
  <p>
    Tu mensaje:<br>
    <textarea name="mensaje"></textarea>
  </p>
  <p>
    <input type="submit" value="Enviar mensaje">
    <input type="reset" value="Comenzar de nuevo">
  </p>
</form>

Tienes algo para decir?

A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!

Tu nombre:

Tu dirección de correo:

Tu mensaje:

Es tiempo de asociar controles y etiquetas. En este paso definiremos apropiadamente una etiqueta para cada control en el formulario. Este proceso es bastante simple y consite en envolver al control y a su etiqueta con el elemento label.

<h1>Tienes algo para decir?</h1>
<p>A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!</p>
<form action="../../form-result.php" target="_blank">
  <p><label>Tu nombre: <input type="text" name="nombre"></label></p>
  <p><label>Tu dirección de correo: <input type="text" name="correo"></label></p>
  <p>
    <label>
      Tu mensaje:<br>
      <textarea name="mensaje"></textarea>
    </label>
  </p>
  <p>
    <input type="submit" value="Enviar mensaje">
    <input type="reset" value="Comenzar de nuevo">
  </p>
</form>

Tienes algo para decir?

A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!

En la etapa final agruparemos los controles por su temática. Haremos esto en dos pasos: primero crearemos un conjunto de controles con lo que tenemos hasta ahora; y segundo, agregaremos un nuevo grupo de controles con algunas casillas de verificación.

Como primera medida, encerraremos los controles que ya están presentes en nuestro formulario (ambos campos de texto de una sola línea y el campo de texto multilínea) con un elemento fieldset. Adicionalmente, agregaremos un título para el grupo, insertando un elemento legend al comienzo del grupo, justo después de la etiqueta de apertura de fieldset.

<h1>Tienes algo para decir?</h1>
<p>A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!</p>
<form action="../../form-result.php" target="_blank">
  <fieldset>
    <legend>Mensaje</legend>
    <p><label>Tu nombre: <input type="text" name="nombre"></label></p>
    <p><label>Tu dirección de correo: <input type="text" name="correo"></label></p>
    <p>
      <label>
        Tu mensaje:<br>
        <textarea name="mensaje"></textarea>
      </label>
    </p>
  </fieldset>
  <p>
    <input type="submit" value="Enviar mensaje">
    <input type="reset" value="Comenzar de nuevo">
  </p>
</form>

Tienes algo para decir?

A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!

Mensaje

Y ahora, para terminar, agregaremos un nuevo fieldset y un título apropiado para el mismo (legend). Y dentro de este grupo, proveeremos al visitante una lista de tópicos que estás dispuesto a tratar en el futuro. Esto permitirá a los usuarios que se contacten contigo, votar por los temas sobre los que les gustaría ver más publicaciones en tu sitio. Entonces, ¿estás listo? Hagámoslo.

<h1>Tienes algo para decir?</h1>
<p>A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!</p>
<form action="../../form-result.php" target="_blank">
  <fieldset>
    <legend>Mensaje</legend>
    <p><label>Tu nombre: <input type="text" name="nombre"></label></p>
    <p><label>Tu dirección de correo: <input type="text" name="correo"></label></p>
    <p>
      <label>
        Tu mensaje:<br>
        <textarea name="mensaje"></textarea>
      </label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Nuevos temas</legend>
    <p>
      ¿Qué temas te gustaría que trate más en mi sitio?<br>
      <label><input type="checkbox" name="html"> HTML</label>
      <label><input type="checkbox" name="graficos"> Gráficos</label>
      <label><input type="checkbox" name="videojuegos"> Videojuegos</label>
      <label><input type="checkbox" name="arte"> Arte</label>
      <label><input type="checkbox" name="musica"> Música</label>
    </p>
  </fieldset>
  <p>
    <input type="submit" value="Enviar mensaje">
    <input type="reset" value="Comenzar de nuevo">
  </p>
</form>

Tienes algo para decir?

A través de este formulario puedes enviarme un mensaje para ayudarme a corregir errores, a mejorar mi blog, o simplemente para decir hola. Cualquier cosa que tengas para decir es bienvenida, así que no lo dudes y déjame un mensaje. Estaré feliz de contestarte!

Mensaje

Nuevos temas

¿Qué temas te gustaría que trate más en mi sitio?

Y eso es todo. Los formularios son una característica de HTML no muy sencilla, particularmente debido a que, si quieres que tengan sentido, necesitas ayudarlos con algún tipo de programa, ya sea del lado servidor o del cliente. Pero a la vez son muy poderosos, especialmente en el desarrollo de aplicaciones complejas.

Los temas tratados en este tutorial están limitados únicamente al lado de los formularios que tiene que ver con HTML, con apenas algunos atisbos de lo que son las operaciones llevadas a cabo del lado servidor. Pero esto debería ser suficiente para darte una idea de cómo funcionan los formularios en HTML. Cuando pases al área de la programación del lado servidor, tendrás las bases para comprender mejor el tratemiento de la información enviada por los formularios.

Próximo tutorial ›

Prev1234