Comunidad de diseño web y desarrollo en internet online

Formularios

Mi fortaleza reside únicamente en mi tenacidad.
Louis Pasteur, microbiólogo y químico

Los formularios nos permiten recoger información introducida por el visitante de nuestra web. Esta información podemos enviarla por correo electrónico o procesarla con un script.

Si se manda por correo electrónico, es muy importante tener en cuenta de que se trata de información no cifrada y que podría ser interceptada, así que no debe contener datos importantes. Un uso aceptable sería un formulario con comentarios sobre nuestra página o para pedir un intercambio de links.

Si nuestro servidor dispone de tecnología como PHP o CGI (por ejemplo), podemos hacer más cosas con esa información, como guardarla en una base de datos o generar una página dinámicamente.

La etiqueta FORM

Todos los formularios están encerrados por <form> y </form>. Dentro de esta etiqueta, van los campos del formulario, y podemos usar párrafos y saltos de línea para organizarlos. Vamos a ver un ejemplo de etiqueta <form>, suponiendo que va a ser un formulario que se enviará por correo electrónico:

<form action="mailto:[email protected]" method="post" enctype="text/plain">

El atributo action recoge qué se va a hacer una vez que se pulse el botón de enviar (Submit). En ese ejemplo, el formulario se envía a la dirección [email protected]1. Si tuviésemos un script para procesar el formulario, hubiésemos puesto algo como action="enviar_info.php".

1 Lo siento chicos, pero la princesa Leia no me ha autorizado a publicar aquí su verdadera dirección de e-mail :(

Con method especificamos cómo va a ser enviada la información. Si utilizamos correo electrónico, le damos el valor de post. Para scripts se suele utilizar get, que pone el valor de las variables en la query string (URL) 2.

2 Si esto te suena a chino, no te preocupes. Sólo es necesario saberlo en el caso de que vayas a usar un script. . .Y en ese caso, ya lo aprenderás cuando te enseñen a programarlos.

Por último, con enctype="text/plain" conseguimos que llegue a nuestra bandeja de entrada el formulario en forma de texto plano sin caracteres extraños.

Campos de texto

La mayoría de los campos de un formulario se crea con una sola etiqueta, <input>, y mediante su parámetro type especificamos el tipo de campo que queremos. Un campo de texto básico quedaría así:

<input type="text" id="nombre" name="nombre" size="20" />

Vamos a pegarle un vistazo a los atributos. Con type="text" indicamos que se trata de un campo de texto. El atributo size recoge el ancho del campo, medido en caracteres. Ahora bien, ¿qué hacen id y name?

Pues id es un identificador. Esto implica que nada en todo el documento puede llamarse igual que este elemento. Este parámetro sirve para CSS3 y para más cosillas, como usarlo con la etiqueta <label> (que veremos ahora).

3 Estableciendo un aspecto exclusivo para ese elemento, por ejemplo.

Con name damos nombre a la variable de ese campo. Por ejemplo, si el visitante escribe "Morpheo” en el formulario que hemos puesto de ejemplo, recibiríamos un e-mail que contendría algo así:

nombre = Morpheo 

De todos modos, para ahorrarnos problemas, siempre que podamos es mejor escribir el mismo valor para id y name. Hay que complicarse la vida lo menos posible.

Hay otros atributos adicionales para nuestros campos de texto. Podemos indicar el número máximo de caracteres que puede introducir el usuario con maxsize Y si queremos que aparezca un valor por defecto, podemos usar value="algo". Por ejemplo, para pedir la dirección de la página web del visitante:

<input type="text" name="url" id="url" size="30" maxsize="255" value="http ://" />

Y, por supuesto, no debemos olvidarnos de nuestro socorrido title, que funciona igual que con la etiqueta <a>.

Campos de contraseña

Los campos de contraseña son exactamente iguales que los de texto, sólo que el visitante en lugar de ver los caracteres que ha introducido, ve asteriscos. Lo de "exactamente iguales" quiere decir eso: es un campo de texto, la información no va cifrada de ninguna manera. La diferencia entre un campo de texto y uno de contraseña es meramente estética.

Los atributos son los mismos que los de los campos de texto, lo único que cambia es qe debemos introducir type="password". Ejemplillo:

<input type="password" name="pass" id="pass" />

Etiquetar campos

Ya hemos aprendido a crear campos de texto para nuestro formulario, ¿pero cómo le decimos al visitante qué es lo que tiene que introducir en cada campo? Podríamos hacer algo así:

<p>Nombre :
    <br />
    <input type="text" name="nombre" id="nombre" />
</p>

Mal. Podemos tener problemas con navegadores no visuales. Entonces, ¿cómo sabemos que la palabra "Nombre" hace referencia al campo con el atributo id="nombre"? Para eso disponemos de una etiqueta nueva: <label>.

Esta etiqueta se encarga de asociar texto con su campo correspondiente. Sólo tiene un atributo, for, y en él tenemos que indicar la id del campo al que queremos hacer referencia. El ejemplo anterior sería correcto de esta manera:

<p>

    <label for="nombre">
        Nombre :
    </label>
    <br />
    <input type="text" name="nombre" id="nombre" />

</p>

Áreas de texto

Con las áreas de texto damos a nuestros visitantes la posibilidad de introducir texto con varias líneas. La etiqueta a usar es <textarea>, y su funcionamiento es un poco diferente al de <input>.

La etiqueta <textarea> dispone de los atributos id, name y title, que funcionan como en el resto de campos de formulario. Además, disponemos de otros dos para indicar las dimensiones del área de texto: cols se encarga de establecer el ancho (medido en caracteres) y rows el alto, medido en líneas.

Como ejemplo, imaginemos que en una parte del formulario queremos poner un campo para que el visitante deje un comentario. Como probablemente sea largo, utilizamos un textarea:

<p>
    <label for="comentario">
        ¿Algún comentario?
    </label>

    <br />
    <textarea name="comentario" id="comentario" cols="30" rows="5">
        Bla bla bla
    </textarea>

</p>

Fíjate en que <textarea> tiene etiqueta de cierre. El texto que hay entre la etiqueta de apertura y la de cierre es el valor por defecto que contendrá el campo; en este caso "Bla bla bla”.

Casillas de verificación

Una casilla de verificación (más conocida como checkbox) es un cuadradito que el usuario puede activar y desactivar pulsando en él. Se crean con la etiqueta <input> y type="checkbox". Los atributos id, name y title funcionan con normalidad, pero value funciona de manera algo distinta. Lo que escribamos en value es lo que nos saldrá en el e-mail que recibamos como el valor de la variable (indicada en name) si la casilla está activada. Es decir, que si ponemos esto. . .

<p>
    Has jugado a ... 
    <br />

    <input type="checkbox" name="monkey1" id="monkey1" value="si" />
    <label for="monkey1">

        Monkey Island I
    </label>
</p>

...y el usuario activa la casilla, recibiremos un mail como este:

monkey1 = si

También podemos hacer que una casilla esté activada por defecto, si añadimos el atributo checked="checked". Así:

<p>

    
    Has jugado a ...
    <br />

    <input type="checkbox" name="monkey1" id="monkey1" value="si" checked="checked" />

    <label for="monkey1">
        Monkey Island I
    </label>
    
    <input type="checkbox" name="xwing" id="xwing" value="si" />

    <label for="xwing">
        X- Wing Alliance
    </label>
    
</p>

Nos quedaría entonces la casilla etiquetada como "Monkey Island” 4, mientras que la de "X-Wing Alliance” sin activar.

4 Yo soy cola, tú pegamento.

Botones de selección

No sé si el término "botones de selección” es en realidad el más adecuado como traducción, así que mejor pondré una explicación de lo que hacen. El nombre en inglés es radio buttons, y son casillas circulares agrupadas, en las que sólo una puede estar activada a la vez. Sirven para cuando queremos que el visitante sólo seleccione una opción de las múltiples que se le dan.

Aunque se crean con la etiqueta <input> indicando el parámetro type="radio", los radio buttons son algo "especiales”, así que los veremos un poco más despacio.

Pongamos el caso de que queremos que el visitante de nuestra web nos indique cuál película de la trilogía de Star Wars 5 es su favorita. Evidentemente, sólo puede coger una, así que nos toca emplear radio buttons en lugar de casillas de verificación. Necesitamos entonces un botón por cada película (tres en total). ¿Cómo los agrupamos? Pues dando el mismo nombre de variable a cada botón. Es decir, el atributo name es el mismo para todo el grupo. ¿Y qué hacemos con id? Bien, no puede haber dos valores de id repetidos, así que la id en cada botón ha de ser distinta. En otras palabras, los radio buttons son los únicos campos en los que la id y name deben ser diferentes. Disponemos además del atributo checked por si queremos marcar alguna opción por defecto. El código para este ejemplo sería así:

5 De la trilogía original, por supuesto. No queremos ofender a nadie.

<p>

    Peli preferida :
    <br />

    
    <input type="radio" name="peli" id="sw_hope" value="hope" checked="checked" />

    <label for="sw_hope">
        A New Hope
    </label>
    
    <input type="radio" name="peli" id="sw_empire" value="empire" />

    <label for="sw_empire">
        The Empire Strikes Back
    </label>
    
    <input type="radio" name="peli" id="sw_jedi" value="jedi" />

    <label for="sw_jedi">
        The Return of the Jedi
    </label>
    
</p>

Como ves, usamos como nombre de variable (name) la palabra "peli”. Según la película que sea, cada botón tiene asignada una id diferente. Por ejemplo, A New Hope tiene asignada la id "peli_ hope”. El atributo value contiene el texto que tendrá la variable en caso de que se seleccione ese botón. Por ejemplo, si el visitante selecciona la película de The Return of the Jedi, recibiremos un e-mail con esta línea:

peli = jedi

Quizás parezca un poco lioso, pero una vez hayas hecho un par de formularios, todo irá bien.

Listas de selección

Las listas de selección tienen una función parecida a los radio buttons, en tanto que se nos presentan múltiples opciones agrupadas en las que escogemos una 6. La diferencia es que la lista aparece replegada y no ocupa apenas espacio en la web, así que son muy útiles cuando tenemos muchas opciones a elegir.

La etiqueta que las crea es <select> y tiene etiqueta de cierre. Entre ellas, insertamos las opciones que tenemos con la etiqueta <option>. Pongamos el mismo ejemplo de antes, el de elegir la película preferida de Star Wars.

6 Mentira, hay un atributo que permite que seleccionemos varias opciones de la lista, pulsando la tecla Ctrl. No seas un pequeño bastardo y lo pongas, que es muy incómodo.

<p>
    <label for="peli">
        Película preferida :
    </label>
    <br />
    <select name="peli" id="peli">

        <option value="hope">
            A New Hope
        </option>
        <option value="empire">
            The Empire Strikes Back
        </option>
        <option value="jedi" selected="selected">

            The Return of the Jedi
        </option>
    </select>
</p>

Con selected="selected" indicamos cuál es la opción por defecto, en este caso The Return of the Jedi. Como ves, aquí no tenemos el lío aquel con id name.

Botones de enviar y reestablecer

Ya hemos visto todos los campos de formulario que podemos crear, ahora sólo nos falta comentar dos botones especiales: el de enviar (submit) y el de reestablecer (reset).

Ambos se crean con <input>. El atributo id no tiene mucho sentido, a menos que usemos CSS para cambiar su aspecto de un modo concreto y exclusivo. Asímismo, name tampoco nos será útil si no empleamos algún tipo de script para tratar la información. Como nosotros enviamos el formulario por correo, no debemos preocuparnos.

En value indicaremos el texto que aparecerá en el botón. El botón de enviar se encarga de mandar la información del formulario, según lo que hayamos especificado en <form>. Para crear el botón, simplemente indicamos type="submit":

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

El botón de reestablecer borra el formulario y vuelve a poner los valores por defecto. Útil para formularios largos. Lo conseguimos con type="reset":

<input type="reset" value="Borrar" />

Ni que decir tiene que hay que diferenciar bien cuál botón es cuál y no poner textos extraños como título de los botones. Si te sientes creativo, vete a jugar al Lego. Fastidia mucho que se te borre todo el formulario por error, creyendo haberle dado al botón de enviar.

 

Información adicional

Contenido publicado bajo licencia Creative Commons. Belén Albeza (BenKo)

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.