Formularios en HTML

Los formularios son una de las herramientas de que disponemos a la hora de hacer nuestras paginas web interactivas, en el sentido de que nos permiten recopilar informacin de la persona que ve la pagina, procesarla y responder a ella, pudiendo de esta forma responder adecuadamente a sus acciones o peticiones. El proceso comienza con la creacin en nuestra pgina de un formulario de entrada de datos, que va a contener diversos campos diferentes en su funcionalidad y que nos van a permitir recopilar toda aquella informacin que deseemos de la persona que ve la pagina. Estos datos, una vez completado el formulario, sern enviados normalmente al servidor para su procesamiento o a nosotros directamente, mediante correo electrnico. Para poder procesar la informacin recibida mediante un formulario necesitaremos un programa especial, que normalmente se aloja en el servidor web, llamado CGI (Common Gateway Interface). Una vez procesada de esta forma la informacin recibida podremos enviar una pgina de respuesta definida a nuestro visitante, con lo que podremos personalizar esta respuesta de antemano. Los formularios estn formados por una serie de controles distintos, cada uno de los cuales esta asociado a un tipo concreto de datos o una accin predeterminada: botones de envo y borrado de datos, listas de seleccin, cajas de entrada de texto, etc.

Etiquetas <FORM>...</FORM>
Estas etiquetas son las que delimitan el comienzo y el final de un formulario. Si queremos mostrar en una pagina un elemento aislado de un formulario, aunque sea con otra finalidad diferente a la del envo de los datos que contenga al servidor (por ejemplo para tratar esa informacin mediante Javascript), es necesario delimitar ese elemento de formulario mediante las etiquetas <FORM> y</FORM>. Si no lo hacemos as, I.Explorer s mostrara el elemento, pero Nestcape no. La pareja de etiquetas se introduce en el cdigo HTML dentro del BODY de la pgina, en el lugar en que queramos que nos aparezcan los elementos del formulario.

HTML & JavaScript Julio Csar Meza Ramrez Ingeniero de Sistemas y Telecomunicaciones

Sus principales atributos o parmetros son: action = "ruta_programa". Indica el programa del servidor que va a "tratar" las variables que se enven con el formulario o el envo de los datos mediante correo electrnico mediante el valor "mailto: direccion_de_correo", en cuyo caso deberemos aadir el parmetro ENCTYPE="text/plain" para que lo que recibamos resulte legible. En el caso de que definamos aqu un programa para el tratamiento de datos deberemos especificar su ruta relativa respecto al directorio de carpetas del servidor en dnde tengamos situado nuestra aplicacin web o bien una URL completa, si el programa esta en otra direccin de Internet. method = " POST / GET " . Indica el mtodo segn el que se van a transferir las variables del formulario. POST enva los datos, normalmente al programa CGI definido en action o por correo si en action hemos utilizado mailto. El mtodo GET aade los argumentos del formulario al URL recogido en action (utilizando como separador de las variables el carcter "?"). El mtodo de uso ms normal es POST, y en el caso de que estemos mandando el formulario a nuestra direccin de correo electrnico es obligado usarlo. Con GET los datos son encadenados al URL especificado en action. Este mtodo se utiliza cuando los datos no modifican la base de datos, por ejemplo, al realizar una bsqueda, y los caracteres a enviar tienen que pertenecer obligatoriamente al conjunto ASCII, por lo que para que se reconozcan los espacios en blanco debes separarlos mediante un signo mas (+),pero en su representacin hexadecimal, lo que se puede hacer antes de enviar los datos con funciones propias del mtodo de programacin utilizado o sustituyendo directamente los signos + por su equivalente hexadecimal de 16 bits (smbolo %20). Con el mtodo POST se realiza una transaccin mediante el protocolo HTTP, con lo que se envan los parmetros en un encabezado independiente http, que se recibe por separado. Se utiliza para aplicaciones que modifican la base de datos de destino. enctype =" tipo ". Especifica el tipo de encriptacin que se va a realizar con los datos que se van a enviar. El mas usado para que llegue el contenido a travs de un mail con el mtodo post sera "text/plain". Este atributo solamente se aplica si method es POST. Indica como se codificara el formulario si utiliza el mtodo POST. name=nombre. Indica el nombre del formulario.

HTML & JavaScript Julio Csar Meza Ramrez Ingeniero de Sistemas y Telecomunicaciones

Ejemplo: <form action="respuesta.php" method="post" enctype="text/plain" name="mi_formulario"> ... ...elementos del formulario ... </form>

Etiqueta <INPUT> La etiqueta <INPUT> va a definir la mayora de los diferentes elementos que va a contener el formulario. Sus atributos y valores son: TYPE = " tipo ", donde tipo puede ser uno cualquiera de los elementos que veremos a continuacin:

text, que sirve para introducir una caja de texto simple, y admite los parmetros:
o

name=" nombre", que asigna de forma particular un nombre identificador a la variable que se introduzca en la caja de texto. maxlenght=" n ", que fija el nmero maximo de caracteres que se pueden introducir en la caja de texto. size=" n ", que establece el tamao de la caja de texto en pantalla. value=" texto ", que establece el valor por defecto del texto que aparecer inicialmente en la caja de texto. disabled, que desactiva la caja de texto, por lo que el usuario no podr escribir nada en ella. readonly, que establece que el texto no puede ser modificado por el usuario. tabindex = " n ", que especifica el orden de tabulador que tendr el campo respecto todos los elementos que incluye el formulario.

HTML & JavaScript Julio Csar Meza Ramrez Ingeniero de Sistemas y Telecomunicaciones

Ejemplo: <form action="respuesta.php" method="post" enctype="text/plain" name="miformulario"> introduce tu nombre: <input type="text" maxlength="10" size="10" name="nombre"> </form> Con el que obtenemos: introduce tu nombre:

radio, que define un conjunto de elementos de formulario de tipo circular, en los que el usuario debe optar por uno solo de ellos, que se marca con el ratn o tabulador. Admite los parmetros:
o

name=" nombre", que asigna un nombre identificador nico a la variable definida por el elemento. Este identificador debe ser el mismo para todos los elementos radio de un grupo. value =" valor ", que define un valor posible de la variable para cada uno de los radio botones. checked, que marca por defecto uno de los radio botones del grupo. disabled, que desactiva el radio botn, por lo que el usuario no podr marcarlo. tabindex = " n ", que especifica el orden de tabulador que tendr el campo respecto todos los elementos que incluye el formulario.

Ejemplo: <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miformulario"> marca tu equipo favorito: <input type="Radio" name="equipo" value= "once" checked>O. Caldas <input type="Radio" name= "equipo" value="nacional"> A. Nacional <input type="Radio" name= "equipo" value="pereira">D. Pereira </form> Con el que obtenemos: marca tu equipo favorito: O. Caldas A. Nacional D. Pereira

HTML & JavaScript Julio Csar Meza Ramrez Ingeniero de Sistemas y Telecomunicaciones

checkbox, que define una o ms casillas de verificacin, pudiendo marcar el usuario las que desee del conjunto total. Si pinchamos una casilla con el ratn o la activamos con el tabulador y le damos a la barra espaciadora la casilla se marca; si volvemos a hacerlo, la casilla se desmarca. Sus parmetros complementarios son:
o

name=" nombre", que asigna un nombre identificador nico a la variable definida por el elemento. Este identificador debe ser el mismo para todos los elementos conjunto de casillas. value =" valor ", que define un valor posible de la variable para cada uno de casillas de verificacin. checked, que marca por defecto una o mas de las casillas del grupo. disabled, que desactiva la casilla de verificacin, por lo que el usuario no podr marcarla. tabindex = " n ", que especifica el orden de tabulador que tendr el campo respecto todos los elementos que incluye el formulario.

Ejemplo: <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miformulario"> marca tu msica favorita: <input type="checkbox" name="musica" value= "rock"checked>Rock <input type="checkbox" name="musica" value= "pop"checked>Pop <input type="checkbox" name= "musica" value="heavy">Heavy <input type="checkbox" name= "musica" value="merengue"> Merengue </form> Con el que obtenemos: marca tu msica favorita:

Rock

Pop

Heavy

Merengue

button, que define un botn estndar. Este botn puede ser usado para diferentes acciones, pero normalmente se le da utilidad mediante JavaScript, mediante el evento "OnClick". Sus parmetros son:
o

name=" nombre", que asigna un nombre al botn, que nos puede servir para acciones con lenguaje de script. value=" valor ", que define el texto que va a figurar en el botn. disabled, que desactiva el botn, de tal forma que no se produce ninguna accin cuando se pulsa, pues permanece inactivo.

o o

HTML & JavaScript Julio Csar Meza Ramrez Ingeniero de Sistemas y Telecomunicaciones

tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario.

Ejemplo: <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miformulario"> <input type="button" name="boton" value="pulsame"> </form> Con el que obtenemos:

password, que define una caja de texto para contener una clave o password, por lo que el texto que introduzca el usuario aparecer como asteriscos, por motivos de seguridad. Sus parmetros opcionales son los mismos que los del tipo text. Ejemplo: <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miformulario"> introduce la clave de acceso: <input type="password" name=clave size="15" maxlength="10"> </form> Con el que obtenemos: introduce la clave de acceso:

submit, que incorpora al formulario un botn de envo de datos. Cuando el usuario pulsa este botn los datos que ha introducido en los diferentes campos del formulario son enviados al programa del servidor o a la direccin de correo indicada en action. Sus atributos son:
o

value=" valor ", que define el texto que va a aparecer en el botn de envo. disabled, que desactiva el botn, de tal forma que no se produce ninguna accin cuando se pulsa, pues permanece inactivo. tabindex = " n ", que especifica el orden de tabulador que tendr el campo respecto todos los elementos que incluye el formulario.

HTML & JavaScript Julio Csar Meza Ramrez Ingeniero de Sistemas y Telecomunicaciones

reset, que define un botn que al ser pulsado por el usuario borra todos los datos que hubiera introducido en cualquiera de los campos del formulario. Sus atributos son los mismos que los de SUBMIT.

Etiquetas <SELECT>...</SELECT> Mediante esta etiqueta podemos definir una entrada de datos en forma de lista desplegable, que presenta varias opciones de eleccin, de tal forma que el usuario puede elegir una o varias de ellas, si as se especifica. Sus atributos y valores son: name=" nombre", que asigna un nombre identificador al campo, de tal forma que al enviar los datos del formulario la opcin elegida ser asociada a este nombre. size= " n ", con n = n entero, que define el nmero de opciones visibles. Si n=1 el campo de seleccin se presenta como una lista desplegable, mientras que si se indica otro valor se presenta como una caja de lista con barra de desplazamiento. multiple, que permite elegir varias de las opciones a la vez. Si no se especifica este atributo solamente se podr escoger una de las opciones. Para ello hay que mantener pulsada la tecla CONTROL mientras se seleccionan y/o deseleccionan las diversas opciones. disabled, que desactiva la lista, de tal forma que no se produce ninguna accin cuando se pulsa una opcin, pues permanece inactiva. tabindex = " n ", que especifica el orden de tabulador que tendr el campo respecto todos los elementos que incluye el formulario. Para introducir cada una de las diferentes opciones de la lista se utilizan las etiquetas <OPTION></OPTION>, que admiten como parmetros: value, que fija el valor que ser asociado al parmetro name de <SELECT> cuando se enve el formulario. Este valor debe ser nico para cada opcin. selected, que establece la opcin por defecto. Si no se especifica este parmetro en ninguna opcin se tomara la primera de ellas por defecto. La anchura de la lista desplegable vendr determinada por el nmero de caracteres de la opcin que mas tenga.

HTML & JavaScript Julio Csar Meza Ramrez Ingeniero de Sistemas y Telecomunicaciones

Ejemplos: <form action="respuesta.php" method="post" enctype="text/plain" name="miformulario"> selecciona una de los siguientes valores: <select name=ejemplouno> <option value="uno">uno</option> <option value="dos">dos</option> <option value="tres">tres</option> </select> </form> Con el que obtenemos: selecciona un de los siguientes valores:
uno

<form action="respuesta.exe" method="post" enctype="text/plain" name="miformulario"> selecciona una de los siguientes valores: <select size="3" name=ejemplodos> <option value="uno">uno</option> <option value="dos">dos</option> <option value="tres">tres</option> </select> </form> Con el que obtenemos:
uno dos tres

selecciona un de los siguientes valores:

<form action="respuesta.php" method="post" enctype="text/plain" name="miformulario"> selecciona una de los siguientes valores: <select size="3" multiple name=ejemplotres > <option value="uno">uno</option> <option value="dos">dos</option> <option value="tres">tres</option> </select> </form> Con el que obtenemos:
uno dos tres

selecciona un de los siguientes valores: HTML & JavaScript Julio Csar Meza Ramrez Ingeniero de Sistemas y Telecomunicaciones

Etiquetas <TEXTAREA>...</TEXTAREA> Esta pareja de etiquetas inserta una caja de texto de mltiples lneas, que normalmente se utiliza para introducir comentarios o datos largos en un formulario. Si no se introduce ningn texto entre ambas etiquetas la caja de texto aparecer vaca, para que el usuario lo introduzca, pero si introducimos algn texto entre ambas este aparecer inicialmente en la caja. Si el texto que contiene supera el espacio disponible en la caja aparecer una barra de desplazamiento vertical. Sus atributos y valores son: name=" nombre", que asigna un nombre identificador al campo, que ser asociado en el envo del formulario al texto introducido en la caja de texto. cols=" x ", que define el nmero de columnas visibles de la caja de texto. rows= " y ", que define el nmero de filas visibles de la caja de texto. disabled, que desactiva la caja de texto. Su utilidad es escasa. readonly, que impide que el contenido de la caja sea modificado por el usuario. tabindex = " n ", que especifica el orden de tabulador que tendr el campo respecto todos los elementos que incluye el formulario. Ejemplo: <form action="respuesta.php" method="post" enctype="text/plain" name="miformulario"> introduce un comentario: <textarea name="comentario" cols="20" rows="10"> </textarea> </form> Con el que obtenemos: introduce un comentario:

HTML & JavaScript Julio Csar Meza Ramrez Ingeniero de Sistemas y Telecomunicaciones

Ejemplo: <form action="respuesta.php" method="post" enctype="text/plain" name="miformulario"> <textarea name="comentario" cols="20" rows="10"> introduce un comentario: </textarea> </form> Con el que obtenemos:
introduce un comentario:

Ejemplo: <form action="respuesta.php" method="post" enctype="text/plain" name="miformulario"> <textarea name="comentario" cols="20" rows="10" readonly> ahora no puedes escribir nada. </textarea> </form> Con el que obtenemos:
ahora no puedes escribir nadar

HTML & JavaScript Julio Csar Meza Ramrez Ingeniero de Sistemas y Telecomunicaciones

Etiquetas <BUTTON>...</BUTTON> A partir de la implementacin de los estndares HTML 4.0 contamos con varias etiquetas nuevas para construir formularios, siendo BUTTON una de ellas, bastante til por cierto. Lo malo es que la versin 4 de Nestcape se lanzo antes de estas implementaciones, por lo que estas nuevas etiquetas slo se pueden visualizar correctamente con Internet Explorer 4 y superiores. Esta etiqueta proporciona un mtodo nico para la implementacin de cualquier tipo de botn de formulario. Sus principales atributos son: type= " tipo ", que puede tomar los ya conocidos valores submit (por defecto), reset y button. name= " nombre ", que asigna un nombre identificador nico al botn. value= " texto ", que define el texto que va a aparecer en el botn. alt=texto, permite definir una pequea descripcin, esta aparecer cuando se coloque el cursor del mouse sobre el botn. La principal ventaja que aporta estas etiquetas es que ahora vamos a poder introducir dentro de ellas cualquier elemento de HTML, como imgenes y tablas. Ejemplo: <form action="#" method="post" enctype="text/plain" name="miformulario"> <button name="boton_1" type="button"> <table width="10" border="1"> <tr> <td>uno</td> <td>dos</td> </tr> <tr> <td>tres</td> <td>cuatro</td> </tr> </table> </button> </form> Con el que obtenemos: (en Nestcape slo se vera la tabla, no el botn)

HTML & JavaScript Julio Csar Meza Ramrez Ingeniero de Sistemas y Telecomunicaciones

Ejemplo: <form action="#" method="post" enctype="text/plain" name="miformulario"> <button name="boton_1" type="button"> <img src="pajaro.gif" width="75" height="30" border="0" alt="enviar"> </button> </form> Con el que obtenemos: (en Nestcape slo se vera la imagen, no el botn)

HTML & JavaScript Julio Csar Meza Ramrez Ingeniero de Sistemas y Telecomunicaciones