Você está na página 1de 16

Anterior

Curso completo de HTML Formularios.

Siguiente

1. Formularios en HTML.
No es necesario navegar mucho tiempo por Internet para encontrar pginas Web en las que se piden datos a los navegantes. Quiz las primeras pginas que hicieron uso de esta posibilidad fueron las de los sistemas de bsqueda. Los formularios usados en estos sistemas son, en general, bastantes sencillos, nicamente es necesario un elemento, conocido como caja de texto, donde sea posible introducir la palabra o frase que deseamos buscar. En la figura 12.1 vemos un buen ejemplo de este tipo de uso. En ella vemos la pgina principal de Tower Communications se ofrece una caja de texto donde el usuario debe introducir una cadena de texto que desea buscar. Despus debe pulsar sobre el botn ENVIAR, tras lo cual se mandar la informacin al servidor Web que la procesar y responder enviando la informacin encontrada. Ms adelante en la seccin 'Como usar los datos de un formulario' veremos como es posible recoger y procesar esta informacin, pero por ahora nos centraremos en la creacin y en el diseo de los formularios. Figura 12.1. En la pgina principal de Tower Communications vemos un formulario que es usado para permitir a los visitantes introducir una cadena de texto que deseen buscar.

Un caso ms complejo de formularios es usado en las pginas en las que se ofrece a los navegantes la posibilidad de realizar sugerencias, ofrecer comentarios o mandar cualquier otro tipo de informacin. En general estos formularios ocupan una pgina entera, y estn formados por diversos elementos. En la pgina de Tower podemos encontrar una pgina de sugerencias que ilustra la utilidad de esta forma de usar los formularios. En la figura 12.2 podemos apreciar esta pgina, que como vemos permite introducir datos en varios campos, tras rellenarlos deberemos pulsar sobre el botn 'Enviar formulario' para mandar la informacin. Figura 12.2. En otra seccin de la pgina de Tower Communications vemos un formulario ms complicado formado por numerosas cajas de texto y otros elementos.

Estos dos ejemplos son probablemente los ms comunes entre las pginas del WWW, pero no los nicos. Los formularios son muy verstiles, como enseguida veremos, y la posibilidad de interactuar con los usuarios de las pginas ser til en multitud de ocasiones. El nico lmite ser nuestra creatividad. Si queremos preguntar a los visitantes de nuestras pginas su nombre, su direccin de correo electrnico, crear un sistema de bsqueda, hacer un libro de visitas o simplemente pedir sugerencias necesitaremos crear formularios. Un formulario no es ms que un conjunto de elementos que permiten introducir datos a los visitantes de nuestras pginas de una manera sencilla. Estos datos son en general texto o una serie de opciones entre las que se debe elegir una o varias. En este captulo aprenderemos todas las posibilidades que tenemos y como usarlas adecuadamente.

El lenguaje HTML consta de una serie de etiquetas que permitirn crear de forma rpida y sencilla numerosos elementos de entrada de datos. Estos elementos, que reciben el nombre de controles, sern grficos en la mayora de navegadores, pero tambin existen mtodos para que los navegadores que slo pueden mostrar texto, como Lynx, puedan mostrarlos. Un formulario no es ms que un conjunto de estos controles cuya informacin ser enviada conjuntamente cuando el usuario pulse sobre el botn de envo. Para crear un formulario el lenguaje HTML proporciona la etiqueta FORM. Al contrario que la mayora de etiquetas que hemos visto en los ltimos captulos sta existe desde la especificacin HTML 2.0 y por tanto es entendida prcticamente por cualquier navegador existente actualmente, por lo que puede ser usada con total libertad. Esta etiqueta consta de una instruccin de inicio, <FORM>, y una instruccin de fin, </FORM>, entre las cuales podremos insertar todos los controles que deseemos. Dicho esto podemos crear nuestra primera pgina con un formulario. En ella adelantaremos uno de los controles ms usados y sobre el que ya hemos hablado antes: la caja de texto. Un poco ms adelante la trataremos ms en detalle, pero la usaremos en este ejemplo para hacernos una idea de cmo se crea un formulario en una pgina Web. Para empezar, como siempre que creamos una pgina nueva, creamos un archivo nuevo en nuestro editor de texto o nuestro editor HTML. En l debemos insertar el siguiente cdigo:
<HTML> <HEAD> <TITLE>Formulario de ejemplo</TITLE> </HEAD> <BODY> <H1>FORMULARIO DE EJEMPLO</H1> <FORM> Introduzca su nombre: <INPUT TYPE="Text"> </FORM> </BODY> </HTML>

Guardamos el archivo con un nombre de nuestra eleccin y lo abrimos con el navegador. El resultado ser muy similar, si no igual, al que apreciamos en la figura 12.3. La caja de texto es el elemento que sigue al texto 'Introduzca su nombre:'. En este caso estamos usando para visualizarla el navegador Internet Explorer para Windows 95, por lo que la caja de texto tiene el aspecto habitual en este sistema operativo. Si visualizamos este mismo cdigo desde un navegador de UNIX o Macintosh la caja de texto sera mostrada con la apariencia habitual en estos entornos. Figura 12.3. Nuestro primer formulario est compuesto por una caja de texto. Para introducirla hemos usado la etiqueta INPUT con TYPE="text".

La gran novedad de la caja de texto respecto a todos los elementos de las pgina Web que hemos visto hasta ahora es que permite a los usuarios introducir texto en ella. Para ello no tenemos ms que pulsar con el ratn sobre ella (o seleccionarla en el caso de navegadores de texto) y escribir como si estuvisemos en un editor de texto. El texto aparecer segn lo vamos escribiendo. Una vez hemos escrito nuestro nombre (ver figura 12.4) enviaremos los datos pulsando la tecla ENTER. Figura 12.4. Pulsando sobre la caja de texto nos aparecer un cursor parpadeante que nos indica que podemos empezar a escribir texto.

En este ejemplo todava no hemos indicado al navegador dnde debe enviar los datos. Esto se hace con el atributo ACTION de la etiqueta FORM, que ser visto un poco ms adelante. Al no indicar la direccin de destino el navegador no mandar los datos al pulsar la tecla ENTER (o pulsar el botn de envo), aunque por ahora nos

olvidaremos de este detalle. Pero no exista un botn de envo? Si, en los ejemplos de la figura 12.1 y 12.2 veamos que ambos formularios constaban de un botn de envo sobre el que haba que pulsar para mandar los datos. En los casos en los que el formulario conste de ms de un control, es decir, de ms de un campo de entrada de datos, ser necesario incluir el botn. Si el formulario simplemente tiene uno, como ocurre en este primer ejemplo que hemos realizado nosotros, el navegador es capaz de entender que al pulsar la tecla ENTER el usuario quiere mandar los datos de ese formulario, y por tanto el uso de botn de envo es opcional. Los botones de envo son mostrados como enlaces normales en los navegadores de slo texto, y por tanto sera ms correcto usar tambin el termino 'enlace para enviar el formulario' . Sin embargo, por simplicidad, seguiremos usando nicamente el trmino botn. Bien, pero cmo se crea un botn de envo? El lenguaje HTML consta de una etiqueta, INPUT, que permite insertar varios tipos de controles, entre los que se encuentra el botn de envo. Para indicar el tipo de control que queremos insertar se usa el atributo TYPE. Para crear el botn de envo debemos usar TYPE="submit". Por tanto si en el ejemplo anterior queremos insertar uno, debemos aadir esta etiqueta (de ahora en adelante omitiremos las etiquetas HTML, HEAD y BODY, pero por supuesto debe seguir usndose):
<H1>FORMULARIO DE EJEMPLO</H1> <FORM> <P>Introduzca su nombre: <INPUT TYPE="Text"> <P><INPUT TYPE="Submit"> </FORM>

Si visualizamos este cdigo con un navegador, veremos que la caja de texto est acompaada ahora de un botn con un texto que invita a pulsarlo para mandar los datos. En la figura 12.5 vemos que al visualizar este ejemplo con Internet Explorer 4.0 aparece el texto 'Enviar consulta' en el botn, este texto ha sido puesto por defecto por este navegador, pero si visualizamos este cdigo con otro puede cambiar. Si el navegador usado es una versin inglesa, el texto del botn estar en ingls. Esta situacin es poco deseable en la mayora de las ocasiones, por los que se cre un atributo, VALUE, que nos permitir especificar nosotros mismos el texto que queremos que sea mostrado en el botn. As en podemos reescribir el cdigo para insertar el botn como: Figura 12.5. Usando el cdigo <INPUT TYPE="submit"> podemos insertar un botn de envo de manera que al pulsar sobre l se envan los datos del formulario.

<P><INPUT TYPE="Submit" VALUE="Enveme">

Con lo que el resultado obtenido sera el que apreciamos en la figura 12.6. En este caso en el botn el mensaje es 'Enveme' y ser ste siempre, independientemente del navegador que usemos para visualizar la pgina. En esta misma figura podemos apreciar que el tamao del botn se adapta a la longitud del texto que pongamos en l. Figura 12.6. Con el atributo VALUE podemos cambiar el texto por defecto del botn de envo por uno de nuestra eleccin. El ancho del botn se adaptar a la longitud del texto.

Aunque lo habitual es incluir un nico botn de envo el lenguaje HTML permite la posibilidad de incluir varios. En este caso debemos usar un nuevo atributo, NAME, para dar un nombre a cada uno que permita al servidor diferenciar cual se ha pulsado. Este nombre

ser enviado junto con los datos cuando se pulse sobre el botn. De esta forma es posible realizar acciones diferentes dependiendo de s se pulsa uno u otro. Por ejemplo podan incluirse botones que simulasen distintas direcciones a las que acceder tras introducir los datos:
<INPUT <INPUT <INPUT <INPUT TYPE="Submit" TYPE="Submit" TYPE="Submit" TYPE="Submit" VALUE="Arriba" NAME="arriba"> VALUE="Izquierda" NAME="izquierda"> VALUE="Derecha" NAME="derecha"> VALUE="Abajo" NAME="abajo">

Es importante indicar que el atributo NAME no debe usarse nicamente para el botn de envo. A continuacin aprenderemos a insertar los distintos tipos de controles existentes y crearemos formularios ms complejos que hasta ahora, por esta razn deberemos usar NAME en cada uno de los controles. Cuando se pulse el botn de envo se enviar los datos de cada control junto con el nombre especificado con este atributo. De esta forma el servidor podr saber el control en que se ha insertado cada dato. Recordemos brevemente todos los atributos de la etiqueta INPUT cuando la usamos para insertar el botn de envo:
<INPUT TYPE="Submit" NAME="Nombre" VALUE="Texto del botn">

Pasemos, sin esperar ms tiempo, a estudiar cada uno de los controles existentes en el lenguaje HTML.

Cmo hacer un formulario slo con CSS

Copia el siguiente cdigo HTML dentro del tag <body> de tu pgina web: <div id=stylized class=myform> < form id=form name=form method=post action=index.html> < h1>Sign-up form</h1> < p>This is the basic look of my form without table</p> <label>Name < span class=small>Add your name</span> < /label> < input type=text name=name id=name /> <label>Email

< span class=small>Add a valid address</span> < /label> < input type=text name=email id=email /> <label>Password < span class=small>Min. size 6 chars</span> < /label> < input type=text name=password id=password /> <button type=submit>Sign-up</button> < div class=spacer></div> </form> < /div> Para que se entienda a qu responde cada elemento, veamos la siguiente imagen:

Ahora copia el cdigo CSS que ves a continuacin, dentro del <head> de la pgina: body{ font-family:Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif; font-size:12px; }

p, h1, form, button{border:0; margin:0; padding:0;} .spacer{clear:both; height:1px;} /* My Form */ .myform{ margin:0 auto; width:400px; padding:14px; } /* stylized */ #stylized{ border:solid 2px #b7ddf2; background:#ebf4fb; } #stylized h1 { font-size:14px; font-weight:bold; margin-bottom:8px; } #stylized p{ font-size:11px; color:#666666; margin-bottom:20px; border-bottom:solid 1px #b7ddf2; padding-bottom:10px; } #stylized label{ display:block; font-weight:bold; text-align:right; width:140px; float:left; } #stylized .small{ color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right;

width:140px; } #stylized input{ float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:200px; margin:2px 0 20px 10px; } #stylized button{ clear:both; margin-left:150px; width:125px; height:31px; background:#666666 url(img/button.png) no-repeat; text-align:center; line-height:31px; color:#FFFFFF; font-size:11px; font-weight:bold; }

En HTML, un formulario es una seccin del documento destinada a que el usuario introduzca datos que van a ser enviados a algn lado. En HTML un formulario puede contener cosas muy variadas: texto normal, elementos especiales llamados controles (checkboxs, radiobuttons, comboboxs, etc.), y otros elementos especiales denominados etiquetas (labels). Explicaremos el significado de estos elementos especiales y cmo generar formularios en HTML.

Los usuarios normalmente "completan" un formulario modificando sus controles, ya sea introduciendo texto, seleccionando objetos de un men, etc., antes de enviar el formulario y que ste sea procesado. Escribe el siguiente cdigo en un editor y gurdalo como ejemplo.html para que puedas visualizarlo en tu navegador. No te preocupes ahora si no entiendes algunos de los elementos que aparecen, porque los iremos explicando poco a poco.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ejemplo del uso de formularios - aprenderaprogramar.com</title> </head> <body> <form action="http://www.aprenderaprogramar.com" method="get"> <p> <label for="nombre">Nombre: </label> <input type="text" name="nombre" id="nombre"> <br/> <br/> <label for="apellido">Apellido: </label> <input type="text" name="apellido" id="apellido"> <br/> <br/> <label for="email">Email: </label> <input type="text" name="email" id="email"> <br/> <br/> <input type="radio" name="sexo" id="varon" value="Varn">

<label for="varon">Varn: </label> <br/> <br/> <input type="radio" name="sexo" id="mujer" value="Mujer"> <label for="mujer">Mujer: </label> <br/> <br/> <input type="submit" value="Enviar"> <input type="reset"> </p> </form> </body> </html>

La visualizacin que debes obtener es algo parecido a la siguiente imagen.

Supn que hemos rellenado los datos de este formulario. Cuando pulsamos en Enviar, la informacin se enva al servidor y se utiliza para algo. Qu utilidad se le puede dar a esta informacin? En general, un formulario html nos sirve para acceder a otra URL (direccin web) que recibe la informacin. Cuando la nueva URL recibe la informacin pueden ocurrir varias cosas: que se muestre en pantalla, que se escriba en una base de datos, que nos muestre una imagen distinta segn la informacin que hayamos enviado Algunas de las cosas que hemos citado no se pueden hacer usando HTML. Por ejemplo, no podemos escribir en una base de datos usando HTML. Sin embargo, s podemos recoger la informacin en un formulario o pgina web HTML y luego acceder a una direccin web de tipo php, asp, jsp que son tipos de pginas web que permiten realizar otro tipo de funciones ms avanzadas relacionadas con la programacin, como es la escritura en bases de datos para almacenar la informacin.

feliz cumple!!! Dios te Bendiga y cumpla todos los deseos de tu corazon...bendiciones!!

Feliz muy Feliz Cumple!!! Los deseos de tu corazon los conoce perfectamente uno a uno y en gran manera te bendice...que sea un nuevo ao de mucho mas aprendizaje y hartos desafios...Dios guarde tu vida y todos tus

Saly, espero que hayas pasado un gran da con toda la gente que te quiere, un abrazote gigante y un feliz cumpleaos!!! Que sea un nuevo ao de mucho mas aprendizaje y hartos desafios... !!! cudate