Taller

>> Taller >> Curso de HTML by BenKo >> Cap. 9, Formularios.

Lección 9

Los Formularios (¡por fin!)

Seguro que la mayoría de vosotros ya la estábais esperando. Al fin tenéis la dichosa lección de formularios que la mayoría me llevaba pidiendo desde el inicio del curso.

Antes que nada, jóvenes jedi, he de deciros una cosa. Lo normal para hacer formularios es hacerlos con un editor WYSIWYG (FrontPage, Dreamweaver, Hot Metal...) y luego cambiar los atributos directamente en HTML. Esto es así porque hacer formularios mínimamente extensos lleva mucho tiempo y es prácticamente imposible aprenderte todos los parámetros de memoria y siempre tienes que estar consultando.

Algunas consideraciones sobre los formularios...

Seguramente alguno crea que para los formularios se necesita tener un programa CGI instalado en nuestro servidor para procesar los datos. Y estáis en lo correcto. Pero trankil@s .Hay una forma en que no se necesita este programa. Es mandar los resultados de nuestro formulario a una dirección de e-mail. Puede ser nuestra dirección de email, la de otra persona (ke a nadie se le ocurra hacer un mail-bomb...) o una lista de correo, por ejemplo.

Weno, ya empezamos...

¿Kuál es la etiqueta para hacer formularios?

Es <FORM> . Formulario en inglés se dice FORM, de ahí el nombre de la etiqueta (obvio). No os extrañéis si mirando algún que otro libro o web en inglés que lo hayan traducido al castellano denominen al formulario FORMA (!) Al igual que a los links los llaman LIGAS (!!). Creo que en hispanoamérica también los llaman de esta manera, aunke no estoy segura.

Atributos de <FORM>

<FORM METHOD="post" ACTION="mailto:direccion_mail" ENCTYPE="text/plain">

NOTA: Estos parámetros son en el caso que se ha dicho antes, el de mandar un mensaje a una dirección de mail sin pasar por un programa CGI en un servidor.

Vale, ¿pero cómo se crean los formularios?

Dentro de la etiqueta FORM van anidadas las etiquetas que definen los campos del formulario y botones.

Estas etiquetas tienen la siguiente sintaxis en común (luego cada una puede tener más parámetros:

<INPUT TYPE="tipo" NAME="nombre" VALUE="valor">

TYPE: Se usa para definir el tipo de campo.
NAME: Se usa para dar un nombre al campo. Por ejemplo, si hubiésemos creado un campo con el nombre "Nick" y el usuario hubiese introducido "BenKo" recibiríamos un e-mail con lo siguiente: Nick=BenKo.
VALUE: El valor que toma ese campo. Se usa, por ejemplo, para poner un texto por defecto en los campos de texto.

Campos de texto (TYPE="TEXT"):

Parámetros (a parte de los vistos anteriormente) y notas sobre los parámetros anteriores:

SIZE: Se usa para definir la longitud del campo de texto (el tamaño).
MAXLENGTH: Para indicar el nº máximo de caracteres que pueden entrar. Por defecto son muchísimos (lo siento, no he contado los que caben ni sé el tipo de variable que es), pero lo más recomendable si se quieren escribir textos grandes, es usar las TEXT AREA.
VALUE: Aquí se usa para poner un texto por defecto, aunque el usuario lo puede cambiar. Es muy útil para dar más información sobre lo que hay que introducir en ese campo.

Nick: <INPUT TYPE="TEXT" NAME="Nick" VALUE="Escribe aquí tu NICK" SIZE="10" MAXLENGTH="30">

Nick:

Observa que si pones el cursor dentro del campo y con el teclado lo desplazas, avanzas en el texto. Por lo tanto, el tamaño del campo (size) y el tamaño máximo de la cadena de caracteres (maxlength) no tienen nada que ver.

Campos de password (TYPE="PASSWORD"):

Es igual que el anterior, sólo que en vez de poner TEXT en el parámetro TYPE, ponemos el valor PASSWORD. Los caracteres introducidos aparecen con asteriscos, pero nosotros los recibiremos legibles.

Mail: <INPUT TYPE="PASSWORD" NAME="mail">

Mail:

Botones radiales (TYPE="RADIO"):

Se utilizan para elegir una opción entre varias, o sea, una variable admitiendo varios valores.

Parámetros extra y observaciones:

NAME: Se usa para dar nombre a esa variable. Es como si fuera el nombre de grupo.
VALUE: El valor de esa opción.
CHECKED: Pondremos este valor en la opción que queramos que esté seleccionada por defecto.

A ver si con este ejemplo lo pilláis mejor:

¿Cuál consola crees que triunfará más en el mercado?<BR>

<INPUT TYPE="RADIO" NAME="Consola" VALUE="Dreamcast"> Dreamcast<BR>

<INPUT TYPE="RADIO" NAME="Consola" VALUE="Dolphin">Nintendo Dolphin

¿Cuál consola crees que triunfará más en el mercado?
Dreamcast
Sony PSX 2
Nintendo Dolphin

Casillas activables (TYPE="CHECKBOX")

Las checkbox permiten activar una opción. Pueden tomar dos valores: Activadas (on) y desactivadas (off).

Parámetros:

NAME: El nombre de la variable que queremos activar/desactivar.
CHECKED: Por si queremos que por defecto esté activada.

¡Ya está! Ningún parámetro más...uffff. Per si acas, un exemple:

¿Quieres ser incluido en mi lista particular de idiotas? <INPUT TYPE="CHECKBOX" NAME="Idiota" CHECKED>

¿Quieres ser incluido en mi lista particular de idiotas?

Botones de envío y reinicialización (TYPE="SUBMIT" o TYPE="RESET")

Sirven para enviar el formulario (submit) o volverlo a dejar como estaba al principio antes de que empezáramos a trastear con él.

Parámetros:

VALUE: El texto que mostrará el botón.

Ejemplox:

NICK: <INPUT TYPE="TEXT"><BR>

NICK:

Listas desplegables (SELECT)

Las listas no utilizan la etiqueta INPUT, al igual que las Áreas de Texto. Las listas desplegables nos muestran un menú donde podemos elegir una opción. Su etiqueta es <SELECT>

Parámetros:

NAME: El nombre de la variable de la lista desplegable.
SIZE: Para cambiar el nº de líneas que se muestran. Por defecto vale 0. Recomiendo dejarlo como está, ya que es más estético.
MULTIPLE: Escribiremos esto si queremos que se pueda seleccionar más de una opción, usando para ello las teclas SHIFT y CONTROL.

Pero no os creáis que ya se ha terminado. Para indicar las opciones que podemos seleccionar, debemos anidar etiquetas <OPTION>, que también tienen sus parámetros:

VALUE: Por defecto, en el e-mail que recibimos con la respuesta recibiremos como valor que toma la variable el texto que va después de la etiqueta OPTION. Si queremos otro valor independientemente del texto que escribamos, lo indicaremos akí.
SELECTED: Pondremos esta palabra si queremos que esa opción esté marcada por defecto.

Pa que se os kite esa cara de asustados, otro ejemplo:

<OPTION SELECTED VALUE="Güindoz">Windows

<OPTION>Linux

<OPTION>Otro SO.

</SELECT>

Áreas de texto (TEXTAREA)

Tampoco utilizan la etiqueta INPUT. Su etiqueta es <TEXTAREA>. Sirven para escribir textos bastante extensos. Se suelen usar para que el visitante deje sus comentarios, sugerencias, etc.

Parámetros:

ROWS: El nº de líneas que queramos.
COLS: El nº de caracteres que hay en cada línea.
NAME: El nombre de la TEXT AREA

Aunque nosotros limitemos el espacio que okupa la TEXTAREA, aparece una barra de desplazamiento para poder escribir más texto. Si queremos que aparezca un texto por defecto, lo escribimos dentro de la etiqueta TEXTAREA.

Ejemplo:

Sugerencias:

Deja akí tus sugerencias.

</TEXTAREA>

Deja akí tus sugerencias.

P' atrás | Principio | P' alante