Formula Rio

<input type='button' onclick='window.
print();' value='Imprimir' /></form>
Formularios
Los formularios interactivos permiten a los autores de pginas Web poner elementos interactivos en sus pginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de respuestas que se encuentra en algunas revistas. El lector escribe la informacin rellenando campos o haciendo clic sobre botones, y luego presiona un botn de envo para enviarla a una direccin URLque se suele dirigir a una direccin de correo electrnico o a un script dinmico Web como PHP, ASP o CGI.
La etiqueta FORM
Los formularios estn delimitados con la etiqueta <FORM> ... </FORM>, que permite reunir varios elementos de formulario, como botones y casillas de texto y que debe poseer los siguientes atributos: METHOD indica cmo se enviarn las respuestas "POST" es el valor que enva los datos al agente de procesamiento almacenndolos en el cuerpo del formulario, en tanto que "GET" enva los datos agregndolos a la direccin URL y separndolos de la direccin con un signo de interrogacin (para aprender ms sobre los mtodos POST y GET, consulte el artculo sobre protocolo HTTP) ACTION indica la direccin a la que se enviar la informacin (un script CGI o direccin de
correo electrnico (mailto:direccin_de_correo_e@equipo)) Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cmo se codifican los datos del formulario. De cualquier forma, esto no necesita especificarse, ya que el valor predeterminado (application/x-www-form-urlencoded) es el nico valor vlido. El atributo opcional ACCEPT se usa para establecer tipos MIME para los datos que el formulario puede enviar. Esta es la sintaxis para la etiqueta FORM: <FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> ... </FORM> Aqu hay algunos ejemplos de las etiquetas FORM: <FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net"> <FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgibin/script.cgi">
Dentro de la etiqueta FORM
La etiqueta FORM acta como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarn a la direccin URL indicada en el atributo ACTION de la etiqueta FORM, por el mtodo indicado en el atributo METHOD. Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero los elementos interactivos son los ms interesantes. Estos elementos interactivos son: La etiqueta INPUT: Todos los botones y casillas de texto La etiqueta TEXTAREA: una casilla de texto La etiqueta SELECT: una lista de opciones mltiples
Envo de datos
Cuando se enva un formulario (haciendo clic en el botn de envo), los datos del formulario se envan a un script CGI bajo la forma de pares nombre/valor, es decir conjuntos de datos representados por el nombre del elemento formulario, un signo igual ("=") y luego el valor asociado. Estos pares nombre/valor se separan unos de otros mediante el smbolo de unin ("&"). Por lo tanto, los datos que se envan al script se vern as: campo1=valor1&field2;=valor2&field3;=valor3 Con el mtodo GET (enviar los datos mediante una direccin URL), la URL ser una cadena como la siguiente: http://es.kioskea.net/cgi-bin/script.cgi?campo1=valor1&field2;=valor2
La etiqueta INPUT
La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear muchos elementos interactivos. La sintaxis de esta etiqueta es la siguiente: <INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre de elemento"> El atributo name es esencial, ya que permite al script CGI reconocer qu campo est asociado con un par nombre/valor, lo que significa que el nombre del campo estar seguido de un signo igual ("=") seguido de un valor que el usuario introdujo, o si el usuario no introdujo ningn valor, por el valor predeterminado de la etiqueta value. El atributo type se usa para especificar qu tipo de elemento se representa con la etiqueta INPUT. Estos son los valores posibles: checkbox: Las casillas de eleccin pueden adoptar uno de dos estados: checked (seleccionado) o unchecked (no seleccionado). Cuando la casilla es seleccionada, el par nombre/valor se enva al CGI. hidden: Este campo, que el navegador no muestra, es para definir una configuracin nica que se enviar al CGI como par nombre/valor. file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo que se enviar con el formulario. Los tipos de archivo que pueden ser enviados deben especificarse utilizando el atributo ACCEPT de la etiqueta FORM. image: Un botn de envo personalizado que aparece cuando se ubica una imagen en la ubicacin definida por el atributo SRC.
password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos para camuflar el texto de entrada. radio: Un botn que permite al usuario elegir entre varias opciones. Cada uno de estos botones debe tener el mismo atributo name. El par nombre/valor del botn radio seleccionado se enviar al CGI. Al aplicar el atributo checked para uno de estos botones se definir como seleccionado de forma predeterminada. reset: Un botn de restauracin para quitar todos los elementos en el formulario y restablecer sus valores predeterminados. submit: Un botn de envo para enviar el formulario. El texto en el botn puede definirse usando el atributo value. text: Una casilla de texto para escribir una lnea de texto. El tamao de la casilla puede definirse usando el atributo size y la extensin mxima del texto con el atributo maxlength.
La etiqueta TEXTAREA
La etiqueta TEXTAREA se usa para definir un cuadro de texto ms grande que la lnea simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los siguientes atributos: cols: representa el nmero de caracteres que puede contener un lnea rows: representa el nmero de lneas name: representa el nombre asociado con el cuadro de texto, que permite su identificacin en el par nombre/valor. readonly: impide que el usuario modifique el texto predeterminado en el campo value: representa el valor predeterminado que se enviar al script si el usuario no ha escrito nada en el cuadro de texto
La etiqueta SELECT
La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por las etiquetas OPTION dentro de ella). Los atributos de esta etiqueta son: name: name: representa el nombre asociado con la casilla de texto, que permite su identificacin en el par nombre/valor. disabled: crea un lista desactivada, que aparece atenuada size: representa el nmero de lneas de la lista (este valor puede ser ms grande que el nmero de elementos reales de la lista). multiple: Permite al usuario seleccionar varios campos de la lista
Ejemplo de formulario
Los formularios pueden ubicarse en una pgina usando tablas (algo recomendable para una presentacin profesional). Este es un ejemplo que resume los puntos precedentes, mostrndole cmo disponer un formulario en una pgina Web mediante una tabla:
<FORM method=post action="cgi-bin/script.pl"> Registro de un usuario <TABLE BORDER=0> <TR> <TD>Apellido</TD> <TD> <INPUT type=text name="apellido"> </TD> </TR> <TR> <TD>Nombre</TD> <TD> <INPUT type=text name="nombre"> </TD> </TR> <TR> <TD>Gnero</TD> <TD> Hombre: Mujer: <INPUT type=radio name="gnero" value="M"> <br>Mujer: <INPUT type=radio name="gnero" value="F"> </TD> </TR> <TR> <TD>Ocupacin</TD> <TD> <SELECT name="ocupacin"> <OPTION VALUE="profesor">Profesor</OPTION> <OPTION VALUE="estudiante">Estudiante</OPTION> <OPTION VALUE="ingeniero">Ingeniero</OPTION> <OPTION VALUE="jubilado">Jubilado</OPTION> <OPTION VALUE="otro">Otro</OPTION> </SELECT> </TD> </TR> <TR> <TD>Comentarios</TD> <TD> <TEXTAREA rows="3" name="comentarios"> Escriba aqu sus comentarios</TEXTAREA>
Enviar </TD> </TR> <TR> <TD COLSPAN=2> <INPUT type="submit" value="Enviar"> </TD> </TR> </TABLE> </FORM> Esto es lo que aparece en la pantalla: Registro de usuario
Apellido Nombre Gnero Ocupacin Hombre: Mujer: Mujer:
Comentarios
Enviar
Atributos de etiquetas FORM y tipos de entrada

Etiqueta Atributo METHOD <FORM> ... </FORM> Valor POST GET Enva a la direccin mostrada Especifica el tipo de cdigo submit realiza la ACTION de la etiqueta
Send
Resultado
Efecto visual
ACTION
ENCTYPE
<INPUT>
TYPE
<FORM> lnea simple de text texto cuya longitud se especifica por el atributo SIZE Elimina el Reset contenido del formulario Radio botn de radio
Reset
Checkbox NAME SIZE NAME <TEXTAREA> ... </TEXTAREA> ROWS COLS <SELECT> <OPTION> </OPTION> </SELECT>
casilla de seleccin Nombre Tamao del texto
Casilla de texto
Opcin 1
NAME ... Mltiples MULTIPLE selecciones posibles SELECTED VALUE Eleccin predeterminada Valor forzado
Opcin 1 Opcin 2 Opcin 3
Opcin 1
<OPTION> ... </OPTION>
Annonces Google OLX Anuncios de Laptops Portal de Anuncios de Artculos de Informtica y ms.Entra ahora! OLX.com.GT/computadoras
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">
2. Controles de Formularios.
Todos los controles que pueden usarse a la hora de crear un formulario permitirn al navegante insertar informacin. Unas veces esta informacin consistir en la insercin de un texto, que podr ser de una sola lnea o varias y que podr estar oculto o no. En otras ocasiones se ofrecer entre una serie de opciones entre las que simplemente hay que elegir una o varias. Todo ello se podr realizar de diferentes formas que ahora mismo comenzamos a estudiar. Para empezar vamos a ver una serie de controles todos los cuales se crean con la etiqueta INPUT. Para diferenciar entre unos controles y otros se har uso del atributo TYPE que puede tomar los siguientes valores: text,password, radio, checkbox, submit, image, reset, file y hidden. Adems del atributo TYPE, esta etiqueta consta de algunos ms cuya funcin variar del tipo de control estemos insertando, es decir, en funcin del valor del atributo TYPE. Uno comn a todos es NAME, ya mencionado, con el que damos un nombre al control, y que es recomendable usarlo siempre. Otro tambin comn a todos ser ALIGN, que explicaremos con las cajas de texto. Una vez hecho este comentario, podemos empezar a estudiar cada uno de los tipos de control uno a uno.
2.1. Cajas de texto.

Ya hemos introducido antes las cajas de texto. Como resumen recordaremos que para insertar este tipo de control en una pgina Web se usa la etiqueta INPUT (esta misma etiqueta ser la utilizada para insertar la mayora de controles), con TYPE="text". Es decir:
<FORM> <INPUT TYPE="text"> </FORM>
Si nuestra intencin es insertar ms de un control ser conveniente darle un nombre a la caja de texto. Para ello usaremos, tal y como hacamos con el botn de envo, el atributo NAME:
<FORM> <INPUT TYPE="text" NAME="mitexto"> </FORM>
Como podemos apreciar la etiqueta INPUT consta de una nica instruccin. Ya hemos visto los atributos TYPE y NAME que existe siempre en la etiqueta INPUT. Cuando insertamos una caja de texto, es decir, cuando ponemos TYPE="text" existen otros dos:
SIZE:
Determina la anchura de la caja de texto. El valor por defecto de este atributo es 20 caracteres, esta es la longitud de los ejemplos que veamos en las figuras 12.3 a 12.6. En ocasiones convendr decrementar o incrementar este valor por defecto, pero en todo caso siempre ser conveniente mantener un valor menor de 50 caracteres de manera que la caja de texto quepa en la mayora de pantallas. Un problema adicional que dificulta una correcta eleccin del tamao de la caja es que este tamao ser considerado de distinta forma por los distintos navegadores y ms an si estos son de distintos sistemas operativos. En la figura 12.7 podemos ver una serie de cajas de texto de diferentes tamaos y las diferencias entre Internet Explorer y Netscape Navigator al mostrar el mismo cdigo. Figura 12.7. El atributo SIZE nos permite variar la longitud de la caja de texto. Debemos tener en cuenta que en diferentes navegadores un mismo valor no se corresponde a una misma longitud.
MAXLENGTH:
Con este atributo limitamos el nmero mximo de caracteres que pueden ser escritos en una caja de texto. El valor de este atributo puede ser mayor o menor que el especificado en SIZE, y que es totalmente independiente. Si es mayor cuando lleguemos al final de la caja de texto los nuevos caracteres que insertemos irn desplazando hacia la izquierda a los primeros, que dejarn de estar a la vista (OJO, esto no quiere decir que sean borrados). Para entender el funcionamiento es mejor comprobarlo in situ con unos ejemplos. Recomendamos al lector que pruebe a visualizar los siguientes cdigos, y que intente escribir una frase algo larga en cada uno de ellos:
<INPUT TYPE="text" SIZE="20" MAXLENGTH="20"> <INPUT TYPE="text" SIZE="20" MAXLENGTH="5">
<INPUT TYPE="text" SIZE="20" MAXLENGTH="40">
Por ltimo queda decir que si no usamos el atributo MAXLENGTH el nmero de caracteres que pueden introducirse en la caja de texto no tendr lmite.
VALUE:
Sirve para especificar un texto que debe aparecer por defecto en la caja de texto, antes de que el usuario escriba nada. Este texto suele ser, en general, o bien instrucciones o bien la respuesta ms probable. Veamos un ejemplo que ilustra estos dos casos:
<FORM> <P>Nombre:<INPUT TYPE="text" VALUE="Introduzca aqu su nombre"> <P>Le gusta nuestro Web? <INPUT TYPE="text" VALUE="Si, muchsimo"> </FORM>
Invitamos al lector a que pruebe este ejemplo en su navegador y compruebe los resultados. Alineamiento de controles. Tal y como hemos indicado antes, todos los controles que insertamos con la etiqueta INPUT tienen un atributo, llamado ALIGN, que nos permitir seleccionar entre varios tipos de alineamiento. Este atributo apareci en el estndar HTML 3.2, al contrario que el resto de etiquetas y atributos que hemos visto hasta ahora en este captulo, que existen desde la versin anterior del estndar (HTML 2.0). El atributo ALIGN puede tomar los siguientes valores:
ALIGN="top":
Alinea verticalmente el control con la parte superior de la lnea en que es insertado.

ALIGN="bottom":
Alinea verticalmente el control con la parte inferior de la lnea.
ALIGN="middle":
Sita el control a una altura media entre el resto de elementos de la lnea.

ALIGN="left":
En este caso estamos alineando el control horizontalmente a la izquierda. Al contrario de lo que ocurra con las imgenes y con las tablas, el texto no bordear el control por su derecha, situndose ste en una lnea propia. En la figura 12.8 podemos ver un ejemplo de este tipo de alineamiento y del siguiente: Figura 12.8. El atributo ALIGN de la etiqueta INPUT nos permite alinear los controles. En este caso vemos una caja de texto alineada a la izquierda (ALIGN="left").
ALIGN="right":
Este valor es idntico al anterior en funcionamiento, slo que ahora el control se situar a la derecha de la ventana del navegador.
Todos el atributo ALIGN y todos estos valores existen para todos los controles que veamos a partir de ahora y que usen la etiqueta INPUT. Para terminar con las cajas de texto veamos un resumen de todos sus atributos y sus funciones:
<INPUT TYPE="text" NAME="nombre" VALUE="valor por defecto" SIZE="tamao" MAXLENGTH="longitud_mxima" ALIGN="alineamiento">
2.2. Cajas de texto para claves.

En ocasiones puede ser conveniente pedir al usuario algn tipo de informacin confidencial como puede ser una clave de acceso o password. Debemos tener en cuenta que algunos usuarios pueden estar en algn lugar pblico o, al menos, con gente alrededor que pueden leer lo que escriba en la pantalla y por tanto no le interesar que lo que escribe sea mostrado en sta. El lenguaje HTML permite utilizar, en estos casos, una caja de texto modificada en la que al escribir se mostrarn nicamente asteriscos. Para ello debemos usar TYPE="password" en la etiqueta INPUT. Un ejemplo tpico de uso de password es al pedir una identificacin, por ejemplo para entrar en algunas secciones de una pgina. Para crear este formulario podemos usar el siguiente cdigo:
<H2><FONT COLOR="#8080FF">Formulario de autenticacin</FONT></H2> <FORM> <P>Introduzca su nombre: <INPUT TYPE="text" NAME="nombre"> <P>Introduzca su clave: <INPUT TYPE="password" NAME="clave"> <P><INPUT TYPE="submit" VALUE="Enviar"> </FORM>
Visualizando este cdigo con Explorer obtenemos el resultado de la figura 12.9. En ella vemos como el texto que hemos escrito en el segundo campo, el de la caja de texto para passwords, no ha sido mostrado siendo sustituido por asteriscos. Figura 12.9. Las cajas de texto para claves muestran asteriscos en lugar del texto que escribimos para aumentar la confidencialidad.
La caja de texto para claves o passwords simplemente impide que el texto que se escribe sea mostrado en pantalla, sin embargo este texto no es codificado al ser mandado al servidor Web, y por tanto no es seguro mandar datos confidenciales.
Las cajas de texto para claves tambin tienen los atributos SIZE, MAXLENGTH, VALUE y ALIGN que vimos en las cajas de texto. Al igual que hicimos con estas, veamos un resumen de todos los atributos de las cajas de texto para claves:
<INPUT TYPE="password" NAME="clave" SIZE="tamao" MAXLENGTH="longitud_mxima" VALUE="clave por defecto" ALIGN="alineamiento">
2.3. Botones de eleccin.

Estos controles reciben tambin el nombre de botones de radio, como traduccin directa de su denominacin inglesa radio buttons y porque en general los navegadores suelen darles una forma circular. Para insertar un botn de eleccin usaremos de nuevo la etiqueta INPUT, pero esta vez el valor del atributo TYPE ser radio:
<FORM> <INPUT TYPE="radio">
</FORM>
Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no seleccionado (OFF), estando inicialmente todos en la posicin OFF. Tambin es posible especificar que un botn determinado est seleccionado inicialmente insertando el atributo CHECKED en la etiqueta INPUT de la siguiente manera:
<INPUT TYPE="radio" CHECKED>
Los botones de eleccin suelen ser insertados en los formularios en grupos, dando al usuario la posibilidad de elegir entre una serie de opciones. Cuando pulsamos sobre un botn de radio le pasamos a la posicin ON y permanecer en ese estado hasta que pulsemos en otra opcin del mismo grupo. Esto es as porque entre los botones de radio de un mismo grupo slo uno de ellos puede estar seleccionado, por tanto cuando seleccionamos uno, aquel que estuviese seleccionado previamente dejar de estarlo. Para indicar que una serie de botones de eleccin pertenecen a un mismo grupo debemos incluir el mismo valor en el atributo NAME en todos ellos. Adems debemos usar el atributo VALUE para dar un nombre distinto a cada uno de los botones. Veamos un ejemplo:
Indique el tipo de msica que ms le <FORM> <P><INPUT TYPE="radio" NAME="musica" <P><INPUT TYPE="radio" NAME="musica" <P><INPUT TYPE="radio" NAME="musica" <P><INPUT TYPE="radio" NAME="musica" </FORM> guste: VALUE="Jazz">Jazz VALUE="Pop">Pop VALUE="Rock">Rock VALUE="Country">Country
Con este cdigo obtenemos el resultado que apreciamos en la figura 12.10. En ella vemos que nicamente el botn de radio correspondiente a 'Pop' est seleccionado. Invitamos al lector a que pruebe este ejemplo y observe cmo al seleccionar otro de los botones de eleccin el anterior deja de estar seleccionado. Figura 12.10. Los botones de eleccin permiten elegir entre un conjunto de opciones, de las cuales podemos elegir slo una.
Por supuesto, es posible incluir varios grupos de botones de seleccin dentro de un mismo formulario. Por ejemplo al cdigo anterior podramos aadirle (antes de </FORM>) este otro:
<P><INPUT <P><INPUT <P><INPUT Ficción <P><INPUT TYPE="radio" NAME="cine" VALUE="Accion">Acción TYPE="radio" NAME="cine" VALUE="Comedia">Comedia TYPE="radio" NAME="cine" VALUE="CienciaFiccion">CienciaTYPE="radio" NAME="cine" VALUE="Drama">Drama
De esta manera tendramos el formulario de la figura 12.11 en la que vemos que se ha podido seleccionar 'Pop' como tipo de msica favorito y 'Ciencia-ficcin' como gnero cinematogrfico preferido, al pertenecer los botones a distintos grupos. Figura 12.11. En un mismo formulario podemos incluir varios grupos de botones de eleccin. Los visitantes podrn seleccionar una opcin en cada uno.
Quiz el lector haya tenido ya la siguiente duda. Si en las cajas de texto se manda al servidor el texto que introduzca el usuario, qu se enva cuando usamos botones de eleccin? La respuesta es simple. Por un lado es necesario enviar el nombre del grupo (el valor del atributo NAME) y por otro la opcin elegida (el valor del atributo VALUE). En el ejemplo anterior en el que se han seleccionado 'Pop' y 'Ciencia- Ficcin' se enviar el siguiente mensaje:
musica=Pop cine=CienciaFiccion
En realidad, el mensaje que se enva no es exactamente el anterior, ya que ste es codificado. An as las diferencias no son muchas, y en este caso el mensaje, ya codificado, que se enviara constara de una nica lnea: musica=Pop&cine=CienciaFiccion.
Veamos un resumen de los atributos de este control:
<INPUT TYPE="radio" NAME="Nombre_del_grupo" VALUE="Nombre_de_esta_opcin" ALIGN="alineamiento">
2.4. Cajas de seleccin.

Las cajas de seleccin guardan ciertos parecidos con los botones de radio, pero adems permitirn seleccionar varias opciones en una lista. Al igual que dichos botones tienen dos posiciones, seleccionados o no seleccionados, estando en esta ltima posicin inicialmente, a no ser que hayamos usado el atributo CHECKED. Cada caja de seleccin es independiente del resto, y por tanto el valor del atributo NAME debe ser diferente en cada una. Para insertar una caja de seleccin debemos usar de nuevo la etiqueta INPUT, pero esta vez con TYPE="checkbox". Veamos un ejemplo de uso de este tipo de controles:
Indique su profesin (escoja todas las que procedan): <FORM> <P><INPUT TYPE="checkbox" NAME="medico">Mdico <P><INPUT TYPE="checkbox" NAME="programador" CHECKED>Programador <P><INPUT TYPE="checkbox" NAME="abogado">Abogado <P><INPUT TYPE="checkbox" NAME="ingeniero">Ingeniero <CENTER><INPUT TYPE="submit" VALUE="Enviar"></CENTER> </FORM>
Pulsando sobre cada caja de seleccin se cambia de seleccionado a no seleccionado, independientemente de la posicin del resto. En el cdigo podemos apreciar que es posible indicar que una caja de seleccin est seleccionada por defecto. En la figura 12.12 vemos este ejemplo, y podemos apreciar como es posible seleccionar varias opciones simultneamente. Figura 12.12. Las cajas de seleccin son independientes unas de otras, por los que es posible tener varias seleccionadas.
Con las cajas de seleccin tambin podemos usar el atributo VALUE, en este caso no ser imprescindible, ya que el nombre dado con NAME es diferente en cada caso, pero a veces puede ser conveniente. En el caso de la figura se mandara al servidor el siguiente mensaje:
programador=ON&ingeniero=ON
Si hubisemos usado el atributo VALUE se sustituira la palabra ON (que es la que se pone por defecto) por la que nosotros hubisemos indicado en las cajas de seleccin con las opciones 'programador' e 'ingeniero'. Por ejemplo si en el cdigo anterior hubisemos escrito lo siguiente en el cdigo de la caja del ingeniero, dejando el resto igual:
<P><INPUT TYPE="checkbox" NAME="ingeniero" VALUE="SI">Ingeniero
El navegador hubiera enviado el mensaje:

programador=SI&ingeniero=ON
Todos los atributos de este control quedan resumidos en el siguiente cdigo:

<INPUT TYPE="checkbox" NAME="Nombre" ALIGN="alineamiento" VALUE="valor_que_debe_enviarse">
2.5. Imgenes.
El lenguaje HTML permite una manera alternativa para insertar un botn de envo personalizado, al poder usar en lugar del botn normal que hemos visto anteriormente una imagen creada por nosotros mismos. Para insertar este tipo de control debemos usar TYPE="image", mientras que la direccin de la imagen se indica con el atributo SRC al igual que hacamos con la etiqueta IMG. Aprovecharemos el ejemplo de este tipo de control para realizar un formulario que englobe lo visto hasta ahora. Ejemplo 12.1. Hemos elegido como motivo del formulario un sistema de reserva de habitaciones de un hotel. El usuario deber introducir ciertos datos y enviar posteriormente la reserva. Comenzamos el formulario creando un archivo nuevo y escribiendo la estructura bsica de la pgina:
<HTML> <HEAD> <TITLE>Botn de envo personalizado</TITLE> </HEAD> <BODY BGCOLOR="#B6D6B6"> </BODY> </HTML>
A continuacin insertamos un encabezado y la etiqueta FORM, donde iremos insertando los distintos controles de los que consta el formulario (todo el cdigo que mostremos de ahora en adelante en este ejemplo debe introducirse entre las instrucciones <BODY ...> y </BODY>):
<CENTER><H2><FONT COLOR="#8080FF">Hoteles El Paraso</FONT></H2></CENTER> <H3>Sistema de reserva de habitaciones:</H3> <FORM> </FORM>
Los colores que hemos elegido ahora para el encabezado como antes para el color de fondo pueden ser cambiados por el lector a su gusto. Es hora de insertar los controles. En primer lugar debemos introducir un campo para preguntar el nombre. Para ello lo ms indicado es usar una caja de texto, elegimos un tamao de 30 caracteres con el atributo SIZE y no usamos MAXLENGTH para no limitar la longitud del nombre que se pueda insertar. Adems introducimos un segundo campo donde debe insertar una clave secreta, que debe elegir el mismo usuario, y que le servir para identificarse cuando llegue al hotel junto con su nombre. En este caso usaremos una caja de texto para claves. Dado que la clave slo puede constar de 4 caracteres limitamos el tamao de la caja (SIZE) y la longitud del texto que se puede escribir (MAXLENGTH) a este valor:
<FORM> <P>Introduzca su nombre: <INPUT TYPE="text" NAME="nombre" SIZE="30"></P> <P>Introduzca una clave para su identificacin (4 letras): <INPUT TYPE="password" NAME="clave" SIZE="4" MAXLENGTH="4"></P>  </FORM>
Veamos lo que llevamos. Visualizando el cdigo que hemos escrito hasta ahora obtenemos el resultado de la figura 12.13. Figura 12.13. Este es el aspecto que tiene el cdigo que hemos escrito hasta ahora. En el formulario de la clave slo se podrn insertar 4 caracteres.
El siguiente paso ser preguntar al usuario qu tipo de habitacin desea reservar. Existen dos opciones, una habitacin individual o una habitacin doble. Para ofrecer estas dos respuestas posibles resultan idneos los botones de radio, ya que slo una de las dos pueden ser seleccionadas simultneamente. Los dos botones que necesitamos deben estar en el mismo grupo, para lo cual usamos NAME="habitacin", para diferenciarlas ponemos diferentes valores en el atributo VALUE:
<FORM>  <P>Tipo de habitacin</P> <INPUT TYPE="radio" NAME="tipoHabitacion" VALUE="individual">Individual <INPUT TYPE="radio" NAME="tipoHabitacion" VALUE="doble" CHECKED>Doble </FORM>
Los espacios &nbsp han sido usados para separar ambas opciones, ya que estn en la misma lnea. La cadena "" simplemente hace referencia a que en ese lugar va el cdigo que hemos escrito antes para preguntar el nombre y la clave, aunque no lo repitamos de nuevo. De ahora en adelante lo usaremos para indicar 'aqu va el cdigo escrito anteriormente'.
A continuacin los dueos del hotel desean ofertar una serie de extras especiales junto con la habitacin, de las cuales pueden elegirse (de manera independiente) las que se deseen. Las cajas de seleccin sern los controles que debemos usar en este caso.
<FORM>  <P>Opciones extra:</P> <INPUT TYPE="checkbox" NAME="desayuno" CHECKED>Desayuno en cama <INPUT TYPE="checkbox" NAME="jakuzzi">Jakuzzi <INPUT TYPE="checkbox" NAME="climatizador">Climatizador </FORM>
Por peticin de los dueos, que quieren promocionar este servicio, hemos preseleccionado el desayuno en cama inicialmente usando el atributo CHECKED. El ltimo paso ser insertar el botn de envo. Podramos simplemente usar:
<INPUT TYPE="submit" VALUE="Enveme">
Pero en este caso seremos algo ms originales y nos crearemos nuestro propio botn. Para ello nicamente necesitaremos un programa de dibujo y algo de creatividad. Una vez dibujado el botn debemos guardarlo en formato GIF o JPG, y lo ponemos en el mismo directorio donde est la pgina que estamos creando. En nuestro caso hemos llamado a la imagen envio.gif. El cdigo para insertar esta imagen de manera que sirva como botn de envo ser:
<FORM>  <CENTER> <INPUT TYPE="image" NAME="envio" SRC="envio.gif"> </CENTER> </FORM>
Con esto que podemos dar por concluido el formulario. En la figura 12.14 podemos apreciar el resultado de visualizar este formulario con el navegador Internet Explorer 4.0. Este es el aspecto inicial, con las opciones 'Doble' y 'Desayuno en cama' preseleccionados al usar el atributo CHECKED.
Figura 12.14. Este es el resultado final del formulario del ejercicio 12.1 en el que destaca el uso de una imagen personalizada como botn de envo.
El navegador Explorer permite el uso de los atributos WIDTH y HEIGHT para indicar el tamao de las imgenes de formularios. Tambin permite usar otros atributos de la etiqueta IMG como VSPACE y HSPACE para controlar los mrgenes verticales y horizontales alrededor de la imagen y BORDER para controlar el grosor del borde.
En este ejemplo hemos usado una imagen creada por nosotros mismos como sustituto del botn de envo estndar. Sin embargo las imgenes de formulario tienen una funcin extra, ya que el navegador enva, cuando el usuario pulsa una imagen, las coordenadas 'x' e 'y' sobre las que se ha pulsado, en relacin a la esquina superior izquierda, como si fueran parte de la informacin del formulario. De esta forma el servidor Web puede realizar diferentes acciones en funcin del lugar de la imagen donde se ha pulsado. De hecho este es un mtodo
alternativo para crear una imagen mapa. Para ello no tenemos ms que usar el cdigo:
<FORM> <INPUT TYPE="image" SRC="imagenmapa.gif"> </FORM>
Posteriormente debemos crear un programa en el servidor que sea capaz de leer los datos (es decir, las coordenadas donde se ha pulsado) de este formulario y devolver la respuesta oportuna. Ms sobre esto en la seccin 'Como usar los datos de un formulario' que veremos ms adelante. En el captulo 6 vimos la diferencia entre las imgenes mapa en el servidor y las imgenes mapa en el cliente (las que podamos crear con el lenguaje HTML). Este nuevo tipo se corresponde con las procesadas con el servidor, y por tanto tiene el inconveniente de necesitar un programa externo que se ejecute en el servidor, por lo que no nos basta con el lenguaje HTML. Para terminar con las imgenes de formulario veremos, como hemos venido haciendo hasta ahora, un resumen con sus atributos:
<INPUT TYPE="image" SRC="URL" NAME="Nombre">
2.6. Botn de borrado

La mayora de los controles anteriores permitan al usuario introducir una serie de datos o elegir entre una serie de opciones. Inicialmente las cajas de texto aparecan vacas, a no ser que hubisemos usado el atributo VALUE para asignarles por defecto. Igualmente los botones de eleccin y cajas de seleccin aparecan en posicin de no seleccionados a no ser que hubisemos indicado lo contrario usando el atributo CHECKED. Una vez a cargado la pgina con el formulario en blanco o con unas opciones por defecto el navegante puede actuar sobre los controles y modificar sus valores (en esto se basa la interactividad). Pero quizs en algn momento decida que quiere dar marcha atrs y recuperar los datos que aparecieron al principio. Con este fin existe en el lenguaje HTML un control que permite borrar los datos actuales de todos los campos del formulario y restablecer los valores por defecto, si es que los haba. Este control recibe el nombre de botn de borrado o botn de reseteado ( reset button ). La creacin de
este control es muy sencilla. De nuevo usaremos la etiquetaINPUT, esta vez con TYPE="reset":
<INPUT TYPE="reset">
Este cdigo provocar la aparicin de un botn como el botn de envo con un texto por defecto que indica su funcin. Por ejemplo Internet Explorer 4.0 muestra el mensaje 'Restablecer'. Este texto depender del navegador que usen los visitantes de nuestra pgina, y dado que esto no siempre es deseable podemos usar el atributo VALUE, al igual que hacamos con el botn de envo, para especificar el texto que prefiramos. Veamos un ejemplo algo ms completo:
<H2> <FONT COLOR="#8080FF"> Formulario de identificacin </FONT> </H2> <FORM> <P>Introduzca su nombre: <INPUT TYPE="text" NAME="nombre" VALUE="Introduzca su Nombre" SIZE="30"> <P>Sexo: <INPUT TYPE="RADIO" NAME="sexo" VALUE="hombre" CHECKED>Hombre <INPUT TYPE="RADIO" NAME="sexo" VALUE="mujer">Mujer <P>Comentarios: <INPUT TYPE="text" NAME="comentarios" SIZE="40"> <P> <INPUT TYPE="submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Restablecer"> </FORM>
En la figura 12.15 podemos ver este formulario con unos datos introducidos por un usuario (arriba) y tras pulsar el botn de borrado (abajo). Si no hubisemos puesto unos valores por defecto en nuestro cdigo HTML los datos campos simplemente se hubieran quedado vacos. Figura 12.15. El botn de borrado (<INPUT TYPE="reset" >) permite al usuario borrar los datos introducidos y recuperar los iniciales.
Al igual que hemos hecho con los controles anteriores concluiremos con un resumen del cdigo del botn de borrado. En ste hemos incluido el atributo NAME, que, como comentamos al principio, est presente en todos los controles:
<INPUT TYPE="reset" NAME="nombre" VALUE="Texto del botn">
2.7. Botn genrico

Para completar la coleccin de botones de los formularios, nos encontramos con la posibilidad de insertar un botn genrico, es decir, que no tiene ninguna funcin definida, sino la que nosotros queramos darle. Para insertar un botn genrico usaremos la etiqueta INPUT con TYPE="button":
<INPUT TYPE="button" VALUE="Pulseme">
Las acciones que debe llevar a cabo este botn al ser pulsado slo pueden indicarse con lenguajes de script como JavaScript o VBScript y no con HTML estndar. Para insertar el cdigo de estos lenguajes se usa el atributo ONCLICK:
<INPUT TYPE="button" VALUE="Texto del botn" ONCLICK="cdigo de script">
No todos los navegadores soportan los lenguajes de script, y por tanto el botn genrico debe ser considerado como una extensin. Si lo usamos debemos ser conscientes que nicamente los navegadores que soporten el script usado podrn hacer uso suyo. Por ahora no nos adentraremos en ningn lenguaje de script, ya que ms adelante en esta obra, stos sern tratados ms en detalle, pero mostraremos dos ejemplos sencillos que ilustran el funcionamiento de este tipo de botones. Estos ejemplos
han sido probados con los navegadores Internet Explorer y Netscape Navigator en sus versiones 3.0 y posteriores, pero pueden no funcionar con otros navegadores. El primero consistir en un botn cuya funcin ser cerrar una ventana del navegador. El cdigo necesario ser:
<FORM> <INPUT TYPE="button" VALUE="Cerrar ventana" onClick="window.close();"> </FORM>
Es probable que al pulsar el botn nos aparezca un mensaje de aviso del navegador pidindonos confirmacin para cerrar la ventana (ver figura 12.16). Figura 12.16. Los botones genricos tienen multitud de usos, entre los ms usados nos encontramos con el botn enlace y el botn para cerrar una ventana, que, como todos, requieren hacer uso de un lenguaje de script.
El segundo ejemplo es ms usado an y consiste en usar el botn con la misma funcin que un enlace hipertexto. El resultado es ms atractivo, pero debemos usarlo con moderacin, ya que no todos los visitantes tendrn navegadores que entiendan este cdigo:
<FORM> <INPUT TYPE="button" VALUE="Cargar otra ventana" onClick="window.location.replace ('button2.html');"> </FORM>
En el directorio botones podemos encontrar un archivo con ambos cdigos para que el lector pueda probarlos. En la figura 12.16 vemos una muestra de este
documento junto con el cuadro de dilogo con el que Internet Explorer 4.0 pide confirmacin para cerrar la ventana tras pulsar el botn del primer ejemplo.
El nuevo estndar HTML 4.0 introduce una nueva etiqueta para insertar botones en nuestra pgina: BUTTON. Esta etiqueta tiene un atributo, llamado TYPE, que nos permitir elegir entre los tres tipos de botones disponibles: envo (TYPE=submit), borrado (TYPE=reset) o genrico (TYPE=button). La gran innovacin de esta etiqueta es que podemos insertar en el botn imgenes o texto formateado con cdigo HTML. Veamos un ejemplo de cmo funcionar BUTTON:
<BUTTON name="reset" type="restablecer"> Restablecer<IMG src="pics/imagen.gif" alt=""> </BUTTON>
El texto e imagen entre la instruccin de inicio y la de fin se insertarn en el botn.
2.8. Campos ocultos

Los campos ocultos son un tipo de control que nicamente sirve para incluir informacin adicional entre los datos del formulario. Este tipo de control es invisible, y por tanto el navegador no muestra ningn tipo de grfico para advertir de su existencia. Para qu sirve entonces un control oculto?. Si no aparece en la pgina y el navegante no puede hacer nada con l Cul es su funcin?. En general, los campos ocultos se usan para enviar informacin especfica al programa del servidor Web que procesar los datos enviados, por ejemplo si este programa es capaz de realizar varias funciones distintas con estos datos, podemos usar un campo oculto para pasarle la informacin de que debe hacer con los datos de este formulario concreto (debemos tener en cuenta que este mismo programa puede procesar la informacin de otros formularios tambin). An as esta problemtica queda fuerae de lo que pretendemos abarcar en esta seccin dedicada al lenguaje HTML. Los campos ocultos se crean usando la etiqueta INPUT con TYPE="hidden". Adems debemos usar los atributos VALUE y NAME, para indicar los datos y su nombre:
<INPUT TYPE="hidden" NAME="nombre" VALUE="datos">
Por ejemplo:
<INPUT TYPE="hidden" NAME="funcion" VALUE="enviar_mail">
2.9. Los formularios vistos desde Lynx

Hasta ahora nos hemos limitado a mostrar como se vean los controles con navegadores grficos, usando como ejemplo a Microsoft Internet Explorer 4.0. Pero los formularios pertenecen al estndar HTML 2.0 y por tanto funcionan con todo tipo de navegadores, incluidos los que trabajan en modo texto como Lynx. Es interesante para los programadores de pginas Web conocer como son mostrados cada uno de los controles que hemos visto desde este navegador, para hacerse una idea de cmo se vern los formularios que de sus pginas. Dado que no siempre es fcil encontrar un ordenador donde comprobar los resultados con Lynx, mostraremos una serie de capturas en las que hemos usado este navegador y las comentaremos brevemente. Lo primero que debemos tener en cuenta es que el botn de envo no ser grfico, sino que ser similar a un enlace hipertexto, como ya comentamos en su momento. Las cajas de texto y las cajas de texto para claves se muestran con una lnea horizontal, y en estas ltimas lo escrito es sustituido por asteriscos. En la figura 12.17 vemos un ejemplo, un cursor parpadeante (que no puede apreciarse en una imagen) indica el lugar donde podemos empezar a escribir: Figura 12.17. Los navegadores en modo texto como Lynx tambin son capaces de mostrar formularios, que aunque no sean grficos tienen la misma funcionalidad.
El cdigo usado es el mismo que el de la figura 12.9, en aquel caso el navegador usado para mostrar el resultado fue Internet Explorer, las diferencias son apreciables. Pero ms interesante an puede ser ver con este navegador nuestro ejemplo 1 de este captulo (figura 12.14) con Lynx. El resultado que obtenemos puede ser apreciado en la figura 12.18 donde vemos que este navegador tambin puede mostrar botones de radio y cajas de seleccin. Figura 12.18. En esta figura podemos apreciar cajas de texto y de clave, botones de eleccin y cajas de seleccin tal y como son mostradas por Lynx.
En este caso es tambin interesante ver que la imagen que usbamos como botn de envo ha sido sustituido por el texto ' [IMAGE]-Submit', pero sigue funcionando.
2.10. Innovaciones de Microsoft

La compaa Microsoft en sus navegadores Internet Explorer 3.0 y posteriores ha incorporado una serie de extensiones a la etiqueta INPUT para incrementar las posibilidades de los programadores de HTML. Estas extensiones afectan a todos los controles que hemos visto que hacen uso de esta etiqueta. La primera extensin resultar conocida a los lectores, se trata del atributo TITLE, y su funcin ser mostrar un bocadillo explicativo cuando el usuario pase el cursor por encima del control. Veamos un ejemplo:
<FORM> <P>Introduzca su nombre: <INPUT TYPE="text" NAME="nombre" TITLE="Introduzca aqu su Nombre" SIZE="30"> </FORM>
Como podemos ver en la figura 12.19, cuando se mantiene el cursor un tiempo aparece un bocadillo con fondo amarillo (estndar de Windows) con el texto 'Introduzca aqu su nombre ': Figura 12.19. El atributo TITLE es una extensin de Microsoft que permite dar una descripcin a los controles que ser mostrada en un bocadillo.
Este atributo puede usarse con entera libertad, a pesar de tratarse de una extensin, porque los usuarios de Internet Explorer podrn beneficiarse de ella y los usuarios de navegadores que no lo entiendan no saldrn perjudicados, simplemente se quedarn igual que si no lo hubisemos usado. La segunda extensin est formada por dos atributos: TABINDEX y NOTAB. Cuando nos encontramos ante un formulario formado por varios controles, como el del ejemplo 1 (figura 12.14), se puede usar la tecla tabulador o TAB para pasar de uno a otro. Por defecto al pulsar esta tecla se pasa al siguiente control en el orden en que fueron insertados en el cdigo HTML. El atributo TABINDEX nos permitir cambiar el orden. La forma de usarlo consiste en incluirlo en todos y cada uno de los controles asignndole un nmero, este nmero representar la posicin de ese control. El atributo NOTAB, por su parte indicar que este control est fuera de la lista, y por lo general ser situado el ltimo de todos. Para entender ambos atributos mejor es necesario verlo con un ejemplo, para ello usaremos parte del cdigo del ejemplo 1:
<FORM> <P>1) Introduzca su nombre: <INPUT TYPE="text" NAME="nombre" TABINDEX="1"> <P>3) Introduzca una clave para su identificacin (4 letras): <INPUT TYPE="password" NAME="clave" TABINDEX="3"> <P>4) Direccin <INPUT TYPE="text" NAME="direccion" NOTAB> <P> 2) Tipo de habitacin </P> <INPUT TYPE="Radio" NAME="tipoHabitacion" VALUE="individual" TABINDEX="2"> Individual <INPUT TYPE="Radio" NAME="tipoHabitacion" VALUE="doble" CHECKED TABINDEX="2"> Doble </FORM>
Tras introducir el nombre, cuando el usuario pulse el tabulador pasar a elegir el tipo de habitacin, despus introducir la clave y por ltimo la direccin. En el directorio ejem2 hemos incluido este ejemplo para que el lector pueda probarlo y compruebe el funcionamiento de los atributos TABINDEX y NOTAB. Debemos recordar que nicamente funcionarn con Internet Explorer 3.0 o posterior. La ltima innovacin que ha introducido Microsoft son los atributos READONLY y DISABLED. Estos atributos funcionan exclusivamente con Internet Explorer 4.0 (y posteriores), por lo que debemos tener cuidado al usarlos. Cuando usamos el atributo DISABLED en un control lo deshabitamos. En general este atributo nicamente es usado con cajas de texto. Cuando una caja de texto usa este atributo podr seguir mostrando texto (si usamos el atributo VALUE para poner un texto inicial), pero el usuario no podr cambiarlo. Este control tampoco podr ser seleccionado, prcticamente acta como si no estuviera. La funcin del atributo READONLY es muy similar, con la nica diferencia de que el control acta como tal, por ejemplo en una caja de texto podemos seleccionar con el ratn el texto que hay en ella, pero tampoco podr modificarse el contenido.
Aunque en la documentacin ofrecida por Microsoft no aparece as, el atributo READONLY slo funciona correctamente en las cajas de texto, pero no en los botones de eleccin o en las cajas de seleccin. Quiz sea un fallo que se solucione en prximas versiones, pero hoy por hoy, para deshabilitar estos dos ltimos controles, debemos usar el atributo DISABLED.
Veamos unos ejemplos con cajas de texto y botones de seleccin:

<H2> Cajas de texto </H2> Normal: <INPUT TYPE="text" NAME="texto1" VALUE="Texto inicial"> <BR> DISABLED: <INPUT TYPE="text" NAME="texto2" VALUE="Texto inicial" DISABLED> <BR>
READONLY: <INPUT TYPE="text" NAME="texto2" VALUE="Texto inicial" READONLY> <BR> <H2> Botones de eleccin </H2> Normal: <INPUT TYPE="radio" NAME="boton" CHECKED> <BR> DISABLED: <INPUT TYPE="radio" NAME="boton" DISABLED> <BR> READONLY: <INPUT TYPE="radio" NAME="boton" READONLY> <BR>
En la figura 12.20 podemos ver el resultado de visualizar este cdigo con Internet Explorer 4.0. Figura 12.20. Los atributos DISABLED y READONLY permiten deshabilitar un control de manera que slo sirva para mostrar datos.
En los casos de la caja de texto y el botn de eleccin se observa claramente que el navegador le da una apariencia distinta para resaltar que est deshabilitado. En el directorio disabled se ha incluido este ejemplo aadiendo tambin las cajas de seleccin para que el lector pueda probarlos.
3. OTROS CONTROLES
En esta seccin hemos incluido dos controles ligeramente diferentes a los que hemos visto hasta ahora, las cajas de texto multilnea y los cuadros de seleccin. Ambos tienen sus propias etiquetas de HTML, y por tanto no usarn INPUT.
3.1. Cajas de texto multilnea: TEXTAREA

Las cajas de texto multilnea o reas de texto son unos campos que funcionan de manera similar a un editor de texto muy sencillo en el que el usuario puede escribir. Al contrario de lo que suceda con las cajas de texto convencionales (<INPUT TYPE="text">), en esta ocasin ser posible escribir varias lneas de
texto, lo que es muy til para campos en los que se requiere una respuesta extensa. Por ejemplo, si deseamos que el usuario pueda escribir el texto de un mail , o escribir una serie de comentarios largos, las reas de texto sern tremendamente tiles. La etiqueta usada para insertar este nuevo control es TEXTAREA, que consta de cuatro atributos:
NAME: El nombre que queremos asignarle al control. Como siempre, este nombre ser enviado junto con los datos del rea de texto al mandar el formulario. ROWS: El nmero de lneas de la caja de texto. COLS: El nmero de caracteres visibles de cada lnea. Este atributo es similar al atributo SIZE que vimos en las cajas de texto convencionales.
La etiqueta TEXTAREA est compuesta por una instruccin de inicio y una instruccin de fin, siendo obligatorio el uso de ambas. Entre ellas nicamente podr insertarse texto llano (sin ninguna etiqueta HTML) y ste ser mostrado como contenido inicial del rea de texto. Veamos un ejemplo:
Por favor haga sus comentarios sobre esta pgina. <FORM> <TEXTAREA NAME="texto" ROWS="10" COLS="50"> Es la mejor que he visto nunca. </TEXTAREA> </FORM>
En la figura 12.21 podemos ver este cdigo tal y como es mostrado por Internet Explorer 4.0: Figura 12.21. Las reas de texto (<TEXTAREA> </TEXTAREA>) permiten al usuario introducir texto de varias lneas como si de un sencillo editor de texto se tratara.
Y en la figura 12.22 el mismo visto con Lynx: Figura 12.22. Lynx muestra las reas de texto como un conjunto de lneas (tantas como hemos indicado con el atributo COLS) sobre las que el usuario podr escribir.
Pulsando sobre el rea de texto podremos empezar a escribir, al igual que hacamos en las cajas de texto, pero con la diferencia de que ahora podremos pulsar ENTER cuando queramos para cambiar de lnea. Si no pulsamos ENTER y llegamos al final de la lnea el navegador debe decidir que hacer. Esta decisin variar, por lo general, del navegador que estemos usando. Algunos, como Internet Explorer 4.0, cambian automticamente a la siguiente lnea (text wrapping), otros simplemente desplazarn el texto como ocurra con las cajas de texto y no cambiar de lnea hasta que pulsemos ENTER y una minora simplemente ignorar lo que pulsemos hasta que cambiemos de lnea pulsando esta misma tecla. El navegador Netscape introdujo una extensin al lenguaje HTML estndar, que actualmente es soportada tambin por Internet Explorer , y que nos permitir tener un mayor control sobre la forma de actuar del navegador cuando se llegue al final de la lnea. Esta extensin se basa en un nuevo atributo, WRAP , que puede tomar los siguientes valores:
WRAP=OFF: Es el valor por defecto en Netscape Navigator y provocar que el texto sea mostrado en una sola lnea, desplazndose hacia la izquierda si es necesario, hasta que el usuario pulse ENTER. WRAP=SOFT: Este es el valor por defecto en Internet Explorer y provoca que el navegador pase automticamente a la siguiente lnea cuando se llega al final del rea reservada. Sin embargo cuando se pulsa el botn de envo, antes de mandar el contenido, el propio navegador vuelve a juntar todo el texto que fue escrito seguido en una sola lnea. WRAP=HARD: Al igual que el valor anterior, ste provoca que el navegador pase automticamente a la siguiente lnea, pero ahora la informacin se mandar al servidor Web con los saltos de lnea, de la misma manera que si hubisemos pulsado ENTER nosotros mismos al llegar al final de cada lnea.
En la figura 12.23 vemos una pgina con los tres tipos de rea de texto que hemos incluido en el directorio textarea para que el lector pueda probarlos. La diferencia entre los dos ltimos tipos no es apreciable por el usuario, pero si existen diferencias en el mensaje que se enva al servidor.
La etiqueta TEXTAREA tambin admite el atributo ALIGN y las extensiones introducidas por Microsoft que hemos visto anteriormente. Nos referimos a los atributos DISABLED, READONLY, TABINDEX, NOTAB y TITLE.
Concluiremos las reas de texto con un resumen de la etiqueta TEXTAREA y sus atributos:
<TEXTAREA NAME="nombre" ROWS="filas" COLS="columnas" ALIGN="alineamiento" WRAP="off | soft | hard"> Texto inicial </TEXTAREA>
3.2. Cuadros de seleccin

ste es el ltimo control para crear formularios que nos ofrece el lenguaje HTML. Su funcin ser dar a elegir entre una serie de opciones de manera que el usuario pueda elegir una o varias de ellas. Existen dos formas de mostrar estas opciones, como una lista con desplazamiento, o mediante una persiana desplegable. Enseguida veremos cmo es cada una y cmo crearlas. Para insertar un cuadro de seleccin usaremos la etiqueta SELECT, que consta de una instruccin de inicio y de una instruccin de fin, entre las cuales introduciremos las diferentes opciones para el usuario. Para insertar estas opciones usaremos una nueva etiqueta, OPTION, que consta de una nica instruccin. Veamos un ejemplo que ilustra el uso de uso de este tipo de control:
<FORM> Elija un color:<BR> <CENTER> <SELECT NAME="color"> <OPTION>Verde <OPTION>Negro <OPTION>Rojo <OPTION>Azul </SELECT> </CENTER> <INPUT TYPE="submit" VALUE="Enviar eleccin"> </FORM>
Cuando se pulse el botn 'Enviar eleccin' se mandar al servidor el texto que sigue a la etiqueta OPTION, que se haya escogido (Por ejemplo 'color=Rojo'). Como podemos ver en la figura 12.24, este control suele ser mostrado, en los navegadores grficos, como una persiana desplegable, es decir, nicamente la opcin actualmente seleccionada es visible, y pulsando sobre una flecha se muestran el resto de opciones. Figura 12.24. Los cuadros de seleccin permiten mostrar varias opciones para que el usuario pueda elegir. En esta ocasin vemos su forma de persiana desplegable.
Existe un atributo, SELECTED, que nos permitir elegir la opcin que debe estar seleccionada por defecto. Por ejemplo, si en el cdigo anterior queremos que el color negro aparezca seleccionado inicialmente tendremos que escribir:
<SELECT NAME="color"> <OPTION>Verde <OPTION SELECTED>Negro <OPTION>Rojo <OPTION>Azul </SELECT>
Al principio hemos comentado que los cuadros de seleccin pueden mostrarse como persianas desplegables, o bien como listas con desplazamiento. Hasta ahora slo hemos visto el primer caso en el que nicamente la opcin seleccionada es visible. En ocasiones puede ser conveniente que todas, o al menos algunas de las posibilidades sean mostradas directamente, sin tener que pulsar un botn. Para conseguir esto el lenguaje HTML ofrece el atributo SIZE, que determina el nmero de opciones que pueden ser vistas simultneamente. Si este valor es 1 (o no se usa el atributo SIZE), se mostrar una persiana desplegable, como hemos visto hasta ahora. Si es mayor, se mostrar una lista, que podr tener barras de desplazamiento si no caben todas las opciones disponibles. Veamos un ejemplo:
<FORM> Lista de la compra:<BR> <CENTER> <SELECT NAME="compra" SIZE="6"> <OPTION VALUE="Fruta"> Fruta <OPTION VALUE="Verdura"> Verdura <OPTION VALUE="Ternera"> Ternera <OPTION VALUE="Mantequilla"> Mantequilla <OPTION VALUE="Salchichas"> Salchichas <OPTION VALUE="Pasta"> Pasta </SELECT> </CENTER> <P> <INPUT TYPE="submit" VALUE="Enviar lista de la compra"> </FORM>
En la figura 12.25 vemos este ejemplo:
Figura 12.25. Usando el atributo SIZE con un valor mayor que uno conseguimos que el cuadro de seleccin se muestre como una lista.
En este caso el nmero de opciones es igual al tamao que le hemos dado al control, por lo que no han sido necesarias barras de desplazamiento. Si no indicamos lo contrario, los cuadros de seleccin actan como los botones de radio, es decir, sola una opcin puede ser elegida simultneamente. Afortunadamente, es posible cambiar este comportamiento, y permitir la seleccin de varias opciones, usando el atributo MULTIPLE en el interior de la etiqueta SELECT. En el ejemplo de la lista de la compra esta posibilidad es de gran utilidad, aadiendo este atributo al cdigo anterior queda:
<FORM> Lista de la compra:<BR> <CENTER> <SELECT NAME="compra" SIZE="6" MULTIPLE> <OPTION VALUE="Fruta"> Fruta <OPTION VALUE="Verdura">
Verdura <OPTION VALUE="Ternera"> Ternera <OPTION VALUE="Mantequilla"> Mantequilla <OPTION VALUE="Salchichas"> Salchichas <OPTION VALUE="Pasta"> Pasta </SELECT> </CENTER> NOTA (usuarios de Windows): Para seleccionar varias opciones mantengan pulsada la tecla <CODE>Control </CODE> y seleccinenlas con el ratn. <P> <INPUT TYPE="submit" VALUE="Enviar lista de la compra"> </FORM>
La forma de seleccionar varias opciones simultneamente depender del navegador que usemos. En general consistir en mantener apretada una tecla mientras se seleccionan las diferentes opciones con el ratn. Para facilitar la tarea de los navegantes puede ser conveniente aadir a la pgina una nota explicativa sobre la manera de elegir varias opciones, tal y como hemos hecho en este ejemplo. En la figura 12.26 podemos ver como es mostrado Internet Explorer 4.0: Figura 12.26. Usando el atributo MULTIPLE el usuario podr seleccionar varias de las opciones que se ofrecen en la lista.
Y en la figura 12.27 el mismo cdigo, esta vez visto desde Lynx: Figura 12.27. El navegador Lynx tambin es capaz de mostrar cuadros de seleccin, por lo que podremos usarlo con libertad.
La etiqueta SELECT tambin consta del atributo ALIGN para elegir su alineamiento. En lo que a extensiones se refiere, tambin podemos usar el atributo DISABLED en la etiqueta SELECT para desabilitarla, aunque solo funcionar con Internet Explorer 4.0. Igualmente podemos usar el atributo TITLE tanto en SELECT como en OPTION para incluir una descripcin que ser mostrada en un bocadillo cuando el usuario site el
ratn sobre el control, en el primer caso, o sobre la opcin especfica, en el segundo.
Para concluir con los cuadros de seleccin slo nos resta hacer un breve resumen de las etiquetas SELECT y OPTION, y de sus atributos:
<SELECT NAME="nombre" SIZE="n_elementos_visibles" MULTIPLE ALIGN="alineamiento" TITLE="texto_bocadillo" TABINDEX="n" DISABLED> <OPTION SELECTED VALUE="nombre de esta opcin" TITLE="texto_bocadillo"> ... </SELECT>
4. PRCTICA 6-FORMULARIO PARA "Los Alpes"

Ahora que ya conocemos todos los controles existentes para crear formularios es hora de hacer uno con apariencia profesional. Esto no quiere decir que use todos los controles existentes, sino que los use de una manera adecuada, cuidando la presentacin y facilitando al usuario la introduccin de datos. Como motivo hemos elegido crear una pgina ms del sitio Web de la agencia de viajes Los Alpes, que permita a los visitantes pedir que les enven por correo un catlogo con todos los viajes disponibles. En primer lugar procederemos a escribir el cdigo HTML necesario para crear los formularios y posteriormente nos dedicaremos a darle una apariencia profesional, tarea en la que podremos demostrar nuestra capacidad para usar tablas para controlar la disposicin de los elementos en una pgina Web.
PASO 1: Para comenzar partiremos de las pginas que creamos en la prctica 5. Podemos realizar los cambios sobre estas mismas pginas o crear una copia en otro directorio (en el directorio pract5 se encuentran de nuevo las pginas de esta prctica). Usando nuestro editor de texto/HTMLhabitual abrimos el archivo plantilla.htm donde creamos la
plantilla de la pgina Web de Los Alpes. El aspecto de esta pgina es muy simple, como podemos ver en la figura 12.28: Figura 12.28. Este es el aspecto inicial de la plantilla del sitio Web de Los Alpes.
En primer lugar, antes de realizar ningn cambio, guardamos este documento con el nombre form.htm . Sobre este nuevo archivo realizaremos los cambios. Lo primero que haremos ser adaptar el cdigo de la plantilla a nuestros objetivos, cambiando la fecha y el ttulo de la pgina, y escribiendo un texto introductorio del formulario (ver figura 12.29): Figura 12.29. El primer paso ser modificar la plantilla, cambiando el ttulo y la fecha y escribiendo un texto introductorio.
PASO 2: El siguiente paso consistir en insertar los controles del formulario. Dado que nuestro objetivo ser recoger el nombre, direccin, telfono, etc. del usuario, usaremos en su mayora cajas de texto, con la nica excepcin de un cuadro de seleccin para elegir el tipo de catlogo. El cdigo necesario para insertar estos controles es:
<FORM> <P>Nombre completo: <INPUT TYPE="text" NAME="nombre" SIZE="30"> <P>Direccin: <INPUT TYPE="text" NAME="direccion" SIZE="50"> <P>Ciudad: <INPUT TYPE="text" NAME="ciudad" SIZE="20"> Cdigo Postal: <INPUT TYPE="text" NAME="c.p." SIZE="6" MAXLENGTH="5"> <P>Telfono: <INPUT TYPE="text" NAME="telefono" SIZE="10" MAXLENGTH="9">
<P>Fax: <INPUT TYPE="text" NAME="FAX" SIZE="10" MAXLENGTH="9"> <P>Email: <INPUT TYPE="text" NAME="email" SIZE="30"> <P>Catlogo: <SELECT> <OPTION VALUE="nacional"> Nacional <OPTION VALUE="internacional" SELECTED> Internacional <OPTION VALUE="completo"> Completo </SELECT> <P> <INPUT TYPE="image" BORDER="0" SRC="img/enviar.jpg" VALUE="Enviar"> </FORM>
Y deberemos insertarlo a continuacin del texto introductorio. Este cdigo no tiene demasiada complejidad, pudiendo destacarse la limitacin a cinco caracteres para el cdigo postal y a nueve el del nmero de telfono y fax, con lo que evitamos posibles equivocaciones de los usuarios. En ambos casos hemos usado el atributo MAXLENGTH para imponer esta limitacin. En esta pgina hemos decidido, adems, usar un botn de envo personalizado, acorde con la apariencia del Web. Este y otro material necesario para la prctica puede encontrarse en el directorio pract6/material. Una vez realizados estos cambios y escrito el cdigo anterior obtenemos el resultado que vemos en la figura 12.30. Figura 12.30. Usando los conocimientos adquiridos en este captulo utilizamos las etiquetas INPUT y SELECT para crear los controles del formulario.
PASO 3: Podramos dejar el formulario as, y publicarlo en Internet; de hecho gran parte de los formularios que encontramos tienen una apariencia similar a esta. Sin embargo en captulos anteriores hemos aprendido a usar tablas para controlar la disposicin de los elementos y es hora de usar estos conocimientos para dar a nuestro formulario una apariencia mucho ms profesional. En un Web real un buen diseo incita a un mayor nmero de navegantes a rellenar el formulario.
Para empezar cambiamos el titular por una imagen ( pract6/material/catalogo.gif) en la que hemos escrito el mismo texto con un tipo de letra que simula escritura manual. El resto de cambios hacen uso de tablas. Para realizar el diseo suele ser conveniente hacer un boceto sobre el papel o con un programa de dibujo, donde no existen las limitaciones del lenguaje HTML. Una vez hecho el boceto es hora de usar este lenguaje para plasmarlo sobre una pgina Web. Tras hacer esto en nuestro formulario concluimos que sera adecuado usar una tabla de nueve filas y tres columnas. De las filas la primera es para el ttulo y para el texto introductorio, mientras que el resto son para cada campo del formulario. La primera columna contendr el texto indicativo del formulario alineado a la derecha (<TD ALIGN=" right">), la segunda contendr el control en s y la tercera servir nicamente como margen derecho. En la figura 12.31 mostramos el formulario con su nueva apariencia mostrando los bordes de la tabla, para que el lector pueda apreciar la estructura de la tabla: Figura 12.31. Usando una tabla de nueve filas y tres columnas controlamos la disposicin de todos los elementos de la tabla para conseguir un diseo profesional.
Otro aspecto que podemos comentar es que el ancho total de la tabla ser de 600 pixeles, con lo que conseguimos que se visualice correctamente en todo tipo de monitores. Para que tambin quede bien en monitores grandes la centramos usando la etiqueta CENTER. Por otro lado, para crear cierta separacin entre los diferentes campos podemos usar el atributo CELLSPACING, con el que controlamos la distancia en pixeles entre las diferentes celdas.
La realizacin de este cdigo es un ejercicio muy importante, ya que este tipo de retoques es muy comn en las pginas Web reales. Por esta razn dejamos al lector que intente mejorar el diseo de la pgina usando las pistas que le hemos dado. En cualquier caso, en el directorio pract6 se ofrece una posible solucin. En la figura 12.32 podemos ver la pgina completa una vez introducida en la estructura de frames: Figura 12.32. Este es el aspecto final del formulario una vez introducido en la estructura con frames del sitio Web creado en la prctica 5.
La mejora en apariencia respecto a la que veamos en la figura 12.30 es apreciable.
5. COMO USAR LOS DATOS DE UN FORMULARIO

Una vez dominamos la creacin, y diseo, de formularios en las pginas Web probablemente nos estamos preguntando cmo puedo hacer que me lleguen los datos?. La respuesta a esta pregunta va mas all del lenguaje HTML. Requiere la puesta en accin de unos programillas llamados CGIs, que se ejecutan en el servidor y que pueden estar escritos en prcticamente cualquier lenguaje de programacin. Estos programas deben encontrarse en algn lugar del servidor Web. Al enviar un formulario a uno, ste procesar la informacin y contestar con la respuesta oportuna. Esta respuesta ser en general o bien la direccin de una pgina o bien una pgina creada por el propio CGI. Cmo se enva informacin a un CGI?. Hasta ahora habamos omitido este detalle, pero la etiqueta FORM consta de un atributo llamado ACTION donde debemos especificar la direccin URL del programa CGI donde deben enviarse los datos. Adems debe usarse otro atributo, METHOD , para indicarle cmo se mandarn estos datos. Este atributo puede tomar dos valores GET y POST, omitiendo todos los detalles, podemos decir que el primero se usa con formularios pequeos, mientras que el segundo ser el escogido para formularios donde la cantidad de informacin es grande. Una vez hemos visto estos atributos hemos de decir que para que los ejemplos que hemos visto funcionen cuando los publicamos en Internet habr que aadrselos a la etiqueta <FORM>. Veamos un ejemplo:
<FORM METHOD="post" ACTION="http://www.miservidor.es/cgi-bin/ programaCGI">  </FORM>
En este caso hemos supuesto la existencia de un CGI llamado programa CGI situado en el directorio cgi-bin (este es el nombre habitual del directorio donde suelen estar los CGIs) de nuestro servidor. El navegador mandar a este programa los datos del formulario codificado con un cdigo especial, cuyo tipo MIME es application/x-www-form- urlencoded. En algunos de los ejemplos de
este captulo hemos visto ejemplos de como funciona esta codificacin. La etiqueta FORM, tiene un atributo, ENCTYPE, que nos permitir cambiar el tipo de codificacin. Si no queremos usar ninguna podemos escribir:
<FORM ENCTYPE="text/plain" METHOD="post"...> </FORM>
No usar codificacin podr ocasionar problemas al enviar caracteres especiales como son las letras acentuadas, pero puede ser til en ocasiones, al no ser necesario decodificar el mensaje. La creacin de los programas CGI excede los lmites de esta seccin dedicada al lenguaje HTML, pero ser cubierta en detalle ms adelante debido a la gran importancia que tienen estos programas en la programacin de Internet y en concreto de pginas Web. Hasta entonces veremos algunos mtodos alternativos que nos permitirn hacer uso de los formularios que hemos creado sin necesidad de CGIs.
5.1. Formularios sin CGIs

Sin duda los programas CGIs permiten realizar muchas ms cosas que cualquier otro mtodo, pero la necesidad de conocer un lenguaje de programacin nos lleva a buscar mtodos alternativos que sern suficientemente buenos si no tenemos demasiados requerimientos. Una alternativa a los CGIs son los lenguajes de script, que nos permitirn interactuar con el navegante sin hacer uso del servidor. Pero la alternativa en la que nos centraremos aqu ser otra, que se basa en la posibilidad de mandar todos los datos de un formulario a una direccin de correo electrnico . Esto es suficiente para el ejemplo de la prctica 6, ya que simplemente necesitamos conocer los datos del usuario para mandar el catlogo, no necesitamos interactuar con l en manera alguna. Para conseguir que los datos de un formulario sean enviados por e-mail debemos usar las etiquetas ACTION, METHOD y ENCTYPE de la siguiente manera:
<FORM ACTION="mailto:milogin@midireccion.es" ENCTYPE="text/plain" METHOD="post"> 
</FORM>
Donde hemos usado como ejemplo la direccin de correo electrnico milogin@midireccion.es, que debe ser sustituida por aquella a la que queramos enviar los datos, que en general ser la nuestra como creadores del Web.
La funcin del atributo ENCTYPE="text/plain" es enviar los datos sin ninguna codificacin. Esto es conveniente para facilitar la lectura de los mismos, pero no necesaria. De hecho, en algunos casos aislados puede ser preferible no usar este atributo y usar la codificacin por defecto.
Al pulsar sobre el botn de envo el navegador advertir al usuario (ver figura 12.33) que la pgina quiere enviar un e-mail , si el usuario acepta enviar los datos del formulario. Figura 12.33. Como mtodo alternativo a los CGIs pueden mandarse los datos del formulario por correo electrnico. En ese caso el navegador pedir al usuario confirmacin de la accin.
Al contrari que los CGIs, el mtodo alternativo que enva por correo electrnico los datos del formulario puede no funcionar con algunos navegadores. Sin embargo actualmente un gran nmero de ellos, incluyendo Netscape Navigator , Internet Explorer y Opera, soporta esta caracterstica, por lo que podemos usarlo con suficientes garantas.
Con este mtodo alternativo podemos empezar a usar todos los formularios que hemos visto hasta ahora, y practicar con ellos. Cuando, ms adelante, estudiemos a fondo los CGIs veremos como nuestras posibilidades se incrementan enormemente.
6. ENVO DE FICHEROS USANDO FORMULARIOS

Como apndice a los formularios incluimos un mtodo introducido por Netscape y aceptado por el estndar HTML 3.2 que permite a los visitantes de una pgina mandar un archivo presente en su ordenador a la pgina Web. Con los controles que hemos visto hasta ahora se poda enviar un archivo de texto copindolo a un rea de texto, pero no exista ninguna manera de mandar, por ejemplo, una imagen o un programa. Con este nuevo sistema ser posible enviar ficheros de todo tipo. Los cambios respecto a los controles anteriores no son muchos. En primer lugar debemos hacer uso del atributo ENCTYPE especificando que los datos que se van a enviar desde este formulario al servidor sern de tipomultipart/form-data, despus debemos usar ACTION para especificar la direccin de un programa del servidor Web que sea capaz de recoger este archivo y realizar las acciones oportunas con l, por ejemplo:
<FORM ENCTYPE="multipart/form-data" ACTION="http://www.miservidor.es/cgi-bin/ cogefichero"<  </script> <form><center><input type="button" value="Click aqu para observar el URL de esta pgina" onclick="ver( )"></p> </center> </form>
alerta ( MyVar1 +
''
+ MyVar2 ) ;
Hola, bien la manera de hacerlo es por ejemplo si tienes una variable nombre: nombre = "Juan Jos"; alert ("Bienvenido a la web "+nombre); Y saldra Bienvenido a la web Juan Jos, si slo quieres poner la variable sera simplemente frase ="Bienvenido Juan Jos"; alert(frase); Espero haberte ayudado. Un saludo.
Cmo se escribe el JavaScript?

El elemento <SCRIPT>
Los scripts de JavaScript se escriben de forma similar a los de VBScript, pero su sintaxis es mucho ms estricta, y esta es una de las causas ms habituales de
error. En JavaScript, a diferencia de VBScript, no se pueden escribir maysculas alegremente. No es lo mismo MiFuncion() que mifuncion(), y si escribimos, por ejemplo, Document.Write() no funcionar. Todo el cdigo deber ir escrito entre <SCRIPT> y </SCRIPT>. Puesto que este elemento HTML es el mismo que se emplea con otros lenguajes, como VBScript, es preciso indicar al navegador el lenguaje que se va a utilizar al definir el script. Sea por ejemplo:
<SCRIPT LANGUAGE=JavaScript> <!-document.write("Esto ha sido escrito por JavaScript") // --> </SCRIPT>
Fjate en que dentro de la etiqueta HTML <SCRIPT> y antes del cdigo JavaScript propiamente dicho, aparece el smbolo del comentario HTML . Estas barras son el indicativo de que lo que viene a continuacin es un comentario tambin, pero del propio JavaScript en este caso, y hay que ponerlas para evitar que el intrprete JavaScript tome el cierre del comentario html como una instruccin y produzca un error de sintaxis. Esto es vlido siempre que el comentario vaya a tener una sola lnea. Si va a tener ms se utilizarn /* ... */. As: /* Comentario 1 Comentario 2 */ JavaScript entiende que una instruccin ha terminado cuando encuentra un retorno de lnea, pero si se desea escribir ms de una instruccin en la misma lnea hay que separarlas con ; al final de cada instruccin, excepto la ltima que no lo necesita, aunque no ocurre nada si se escribe. Los scripts pueden escribirse tanto en la <HEAD> como en el <BODY> de la pgina. Por claridad a la hora de revisar el cdigo, es preferible escribir todas las declaraciones y sentencias al principio de la pgina, en la<HEAD>, aunque esto depender de las necesidades del programa, claro. Tambin, si ello es necesario, puede escribirse el cdigo en los dos sitios a la vez. Por ejemplo, si escribimos
<HTML> <HEAD><TITLE>Prueba de JavaScript</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-document.write("Esto ha sido escrito por JavaScript desde HEAD <BR>") // --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE=JavaScript> <!-document.write("Esto ha sido escrito por JavaScript desde BODY") // --> </SCRIPT> <P> Esto ha sido escrito por HTML. </BODY> </HTML>
Se obtiene:
Esto ha sido escrito por JavaScript desde HEAD Esto ha sido escrito por JavaScript desde BODY Esto ha sido escrito por HTML.
Otra particularidad de la sintaxis de JavaScript son las llaves: { }. Estas llaves hay que utilizarlas siempre que el bloque de declaraciones vaya a tener ms de una lnea, y son obligatorias al definir funciones. Pueden anidarse si el programa va a tener varios bloques, y siempre deben ser pares. Por ejemplo, en la siguiente funcin:
<HTML> <HEAD> <TITLE>Capturar evento de boton</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-function mensaje() {
alert("Esto es un mensaje de JavaScript") } // --> </SCRIPT> </HEAD> <BODY> <FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="mensaje()"> </FORM> </BODY> </HTML>
Fjate en que la funcin es invocada al pulsar el botn del formulario, capturando un evento: onClick, pero tambin es posible escribir directamente la instruccin en el punto de captura en lugar de utilizar el elemento <SCRIPT>. Por ejemplo:
<HTML> <HEAD><TITLE>Capturar evento de boton</TITLE></HEAD> <BODY> <FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick=javascript:alert("Mi mensaje")> </FORM> </BODY> </HTML>
Esta forma es aceptable si, como en el ejemplo, la funcin es muy simple. Al igual que se puede hacer con las hojas de estilo en cascada (CSS), JavaScript permite que todo el cdigo (o parte de l) est en un fichero independiente de la pgina html, lo que permite modificar y mantener ms rpidamente la programacin, sin necesidad de editar muchos ficheros diferentes. El fichero que contiene el cdigo JavaScript, normalmente tiene la extensin .js Sea el ejemplo anterior:
<HTML> <HEAD>
<TITLE>Capturar evento de boton</TITLE> <SCRIPT LANGUAGE=JavaScript src="fichero.js"></SCRIPT> </HEAD> <BODY> <FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="mensaje()"> </FORM> </BODY> </HTML>
Donde el contenido de fichero.js es:

function mensaje() { alert("Esto es un mensaje de JavaScript") }
Como puedes ver, en este fichero no hay que incluir el elemento <SCRIPT>, sino solamente instrucciones JavaScript. Para mayor claridad de los ejemplos, se emplear este sistema siempre que sea posible. Los programas JavaScript, como todos los programas, se comienzan definiendo las variables, despus las funciones, y a continuacin la estructura del programa propiamente dicha, si la hay. Recuerda que este es un lenguaje interpretado, es decir, que las instrucciones se van cargando en memoria a medida que se leen, y por tanto es necesario tener cuidado con el orden en que se escriben las variable y las funciones que sern invocadas desde el ncleo del programa. Por ejemplo, si una instruccin que llama a una funcin se escribe antes que la funcin llamada, se producir un error, ya que en ese momento la funcin todava no existe.
Variables
Las variables son espacios de memoria que contienen algun tipo de dato, al que se accede mediante el nombre que se le asigne a la variable. En JavaScript no hay constantes como en VBScript. Los nombres de las variables tienen que comenzar siempre por una letra o el signo del subrayado ( _ ) y no pueden contener espacios en blanco ni caracteres que no sean letras o nmeros, lo que excluye letras acentuadas, ees, cedillas, etc. Al escribirlos, si se utilizan maysculas, recordar que no es lo mismo MiVariable que mivariable. Por
supuesto, no puedes crear una variable con ninguna palabra reservada del lenguaje, como return, if, case, etc. Para crear una variable, simplemente se escribe su nombre, y si se desea, en ese mismo momento, se le asigna un valor. Dependiendo del mbito de actuacin de la variable, habr que utilizar, o no, la instruccin var en el momento de crearla. Por ejemplo: var MiVariable = 2004 Tambin es posible definir varias variables en una misma lnea: var Variable1, Variable2, Variable3 Como puedes ver, la instruccin var es similar a la instruccin Dim de VBScript. Cuando una variable es definida con la instruccin var en un bloque acotado por llaves { } (mbito), solamente estar disponible en ese bloque, y se la denomina variable de mbito local. Si se declara sin la instruccin var, es una variable de mbito global, no importando dnde ha sido declarada, y estar disponible en cualquier lugar de la pgina (a partir de donde ha sido declarada, pero no antes). Si se declaran dos variables con el mismo nombre, pero una global y la otra local, la global ser accesible desde toda la pgina, excepto en el rea donde "reina" la local, que impondr su valor all. No es buena idea declarar variables duplicadas, salvo que sea estrictamente necesario, claro. Las variables pueden contener cualquier tipo de dato, como cadenas, nmeros, valores booleanos, o incluso objetos. Se pueden cambiar los tipos de datos que contienen en cualquier momento sin necesidad de redefinir la variable. A los valores contenidos en las variables se les denomina literales. El literal es un concepto a veces confuso. Si, por ejemplo, decimos que variable1 = "A" y variable2 = "B" podemos acceder a "A" o a "B" bien invocando el nombre de las variables correspondientes, o invocando sus literales, es decir, directamente sus valores. La suma (o concatenado en este caso) de variable1 + variable2 es lo mismo que la suma de sus literales: "A" + "B" = "AB"
Variables de cadena
Construir una variable conteniendo un string o cadena no tiene ninguna dificultad. Como ya sabrs, un string o cadena es cualquier contenido acotado por comillas, simples ' o dobles ".
mivariable = "Hola" Tambin es posible concatenar dos o ms cadenas usando el signo + : mivariable = "Prueba de " + "concatenado" Y este sera el resultado: Prueba de concatenado Si dentro de una cadena acotada por comillas, tanto simples como dobles, se incluye otra subcadena acotada por las otras comillas, no se considera un concatenado. Por ejemplo, son vlidas las cadenas: "Comillas dobles con 'simples' en el interior" 'Comillas simples con "dobles" en el interior' Puesto que las cadenas se pueden definir tanto con comillas simples como dobles, puede ocurrir que dentro de la cadena haya que poner uno de estos signos, o los dos, lo que provocara un error de sintaxis. Para resolver este problema se utilizan los "escapes", es decir, el mismo caracter que se quiere escribir precedido de \ Esto evita que sea interpretado, no como el cierre de las comillas, sino como un carcter normal. As: mivariable = "Prueba de " + "\"concatenado\" " + '\'doble\'' Y este sera el resultado: Prueba de "concatenado" 'doble' Esto mismo tambin es posible hacerlo usando el cdigo hexadecimal del carcter deseado. Normalmente se utiliza la codificacin hexadecimal slo con los caracteres que no admiten el "escapado" (que son casi todos). Aplicndolo a las comillas sera as: mivariable = "Prueba de " + "\x34concatenado\x34 " + '\x27doble\x27 ' Adems de las comillas y el cdigo hexadecimal ya vistos, se puede "escapar" la misma barra inclinada: \\, la \t para insertar un tabulador horizontal, y la \n para forzar una nueva lnea. Fjate que en el caso de estos dos ltimos, el escape funciona al revs que en las comillas o la barra inclinada: En efecto,
mientras que con las comillas el escape pretende que no se interprete su cualidad para abrir o cerrar cadenas, con t o n lo que se hace es darles las cualidades que no tienen para producir un tabulador o un salto de lnea. Recuerda tambin que tanto el tabulador como la nueva lnea no tienen efectos visibles en los navegadores, por lo que su utilidad se limita al formateo de texto dentro del entorno JavaScript exclusivamente. Al ser la barra inclinada \ el controlador de escapes, si en una cadena hay que escribirla, deber hacerse escpndose a s misma. Por ejemplo, si se escribe la tpica ruta del directorio temp en el disco C: document.write("C:\temp") se obtiene C: emp Como puedes ver, en este caso el error es doble, ya que la barra no puede aparecer sin escape como tal carcter, y adems, al estar junto a la t, se ha interpretado como indicador de tabulacin. La sintaxis correcta es: document.write("C:\\temp") para obtener C:\temp No hay que confundir los caracteres con escape con una de las pocas funciones intrnsecas de JavaScript: escape() y su inversa: unescape(). La funcin escape() devuelve el cdigo ASCII decimal de los caracteres especiales, es decir cualquier caracter que no sea una letra (maysculas o minsculas), un nmero, o el punto, el guin, el subrayado o la arroba (Az 1-9 _ . @). Todos los dems sern codificados. Por ejemplo, si se escribe: document.write(escape("$ % & @")) Se obtiene: %24%20%26%20%25%20@ Como puedes ver, se codifica incluso el espacio en blanco (%20). Y con su inversa: document.write(unescape("%24%20%26%20%25%20@")) Se obtiene: $ % & @
Imprimir
Para imprimir la pagina sin que aparezca el boton imprimir, no es necesario abrir otra ventana, puede estar el boton en la misma ventana, pero yo hago lo siguiente: mando a llamar una funcion en JavaScript y en esa funcion esta el truco: <input name="btnImprimir" id="btnImprimir" type="button" class="button" value="Imprimir" onClick="imprime()"> Y el codigo de la funcion imprime() es: function imprime(){ //desaparece el boton document.getElementById("btnImprimir").style.display='none' //se imprime la pagina window.print() //reaparece el boton document.getElementById("btnImprimir").style.display='inline' }
<a href="javascript:window.print()">Imprimir</a>
PARA MOSTRA LA HORA EN UN ALERT <script> function quehoraes(){ var quehora=new Date(); var hora=quehora.getHours(); var minutos=quehora.getMinutes(); var segundos=quehora.getSeconds(); alert(" } </script> </head> <body onload="quehoraes()"> son las : "+ hora + " : " +minutos + " : " + segundos);
PARA MOSTRAR LA FECHA 4.- CODIGO COMPLETO

<script language="javascript">
var fecha=new Date(); var diames=fecha.getDate(); var diasemana=fecha.getDay(); var mes=fecha.getMonth() +1 ;
var ano=fecha.getFullYear();
var textosemana = new Array (7); textosemana[0]="Domingo"; textosemana[1]="Lunes"; textosemana[2]="Martes"; textosemana[3]="Mircoles"; textosemana[4]="Jueves"; textosemana[5]="Viernes"; textosemana[6]="Sbado";
var textomes = new Array (12); textomes[1]="Enero"; textomes[2]="Febrero"; textomes[3]="Marzo"; textomes[4]="Abril"; textomes[5]="Mayo"; textomes[6]="Junio"; textomes[7]="Julio"; textomes[7]="Agosto"; textomes[9]="Septiembre"; textomes[10]="Octubre"; textomes[11]="Noviembre"; textomes[12]="Diciembre";
document.write("Fecha completa: " + fecha + "<br>"); document.write("Dia mes: " + diames + "<br>"); document.write("Dia semana: " + diasemana + "<br>"); document.write("Mes: " + mes + "<br>"); document.write("Ao: " + ano + "<br>"); document.write("Fecha: " + diames + "/" + mes + "/" + ano + "<br>"); document.write("Fecha: " + textosemana[diasemana] + " " + diames + "/" + mes + "/" + ano + "<br>"); document.write("Fecha: " + textosemana[diasemana] + ", " + diames + " de " + textomes[mes] + " de " + ano + "<br>");
</script> En este interesante tutorial, Benjamin nos ensea como mostrar la fecha actual en nuestras webs por medio de JavaScript, utilizando diferentes formas.
Vamos en este pequeo manual a ver varias formas de mostrar en pantalla la fecha actual.
Como sabis todo script en javascript debe de empezar con <script lenguaje=javascript> para luego cerrarlo al final con </script> y entre estas dos funciones escribiremos todo el script.
<script language="javascript">
Aqu escribiremos nuestro script
</script>
Hay dos partes bien diferenciadas dentro de nuestro script
1.- la creacin de variables 2.- la impresin en pantalla
Para la creacin de las variables trabajaremos con varios mtodos del objeto Date, ya que la fecha que nos ofrecer el ordenador ser siempre de tipo
Sat Dec 9 11:37:51 UTC+0100 2006
Y esto, obviamente, no es lo que queremos que aparezca en nuestra pgina.
1.- CREACION DE VARIABLES
A cada parte de la fecha, tenemos que asignarle una variable distinta.
Vamos a crear una fecha del tipo: Sbado, 9 de Diciembre de 2006 por lo que necesitamos cuatro variables a las que llamaremos:
textosemana que en este ejemplo sera = sbado
diames que en este ejemplo sera = 9 textomes que en este ejemplo sera = diciembre ano que en este ejemplo sera = 2006
para la creacin de esta fecha (o para otro tipo de impresin tipo 9/12/2006) necesitaremos otras variables, completndose la lista anterior con la siguiente:
diasemana que en este ejemplo sera = 6 (el da de la semana en nmero, el 0 para el domingo, el 6 para el sbado) mes que en este ejemplo sera = 12
Y por supuesto, la ms importante:
fecha
Empezamos con la creacin de las variables:
var fecha=new Date(); a la variable fecha le asignamos el valor de la fecha actual
var diames=fecha.getDate(); a la variable diames le asignamos el da del mes (del 1 al 31)
var diasemana=fecha.getDay();
a la variable diasemana le asignamos el da de la semana en nmero, siendo 0 el domingo, 1 el lunes, , 6 el sbado)
var mes=fecha.getMonth() +1 ; a la variable mes le asignamos el da del mes en nmero (de 0 a 11) y le sumamos 1 para tener el mes tal y como lo utilizamos nosotros (de 1 a 12)
var ano=fecha.getFullYear(); a la variable ano le asignamos el ao con cuatro cifras. Si quisiramos tener el ao con dos cifras, el formato sera: var ano=fecha getYear();
Con esto ya tenemos toda la fecha desglosada. Lo nico que nos queda es saber (en texto) el da de la semana y el da del mes. Para esto usaremos una matriz.
La sintaxis de la matriz es la siguiente:
var nombredelamatriz = new Array(numerodeceldas);
Aplicamos la teora. Crearemos primero la matriz para el da de la semana. Como la semana tiene siete das, y a la variable que vamos a utilizar la llamamos textosemana, quedar de la siguiente forma:
var textosemana = new Array(7);
ahora le asignamos valores a los siete posibles textosemana:
textosemana[0]="Domingo"; textosemana[1]="Lunes"; textosemana[2]="Martes"; textosemana[3]="Mircoles"; textosemana[4]="Jueves"; textosemana[5]="Viernes"; textosemana[6]="Sbado";
recordar que lo que el ordenador nos dar originalmente es diasemana que tendr valores entre 0 y 6.
Lo que hacemos con esto es muy simple:
Cuando diasemana sea igual a 0, textosemana ser igual a Domingo Cuando diasemana sea igual a 6, textosemana ser igual a Sbado.
Hacemos exactamente lo mismo con el nombre del mes:
var textomes = new Array (12); textomes[1]="Enero"; textomes[2]="Febrero"; textomes[3]="Marzo"; textomes[4]="Abril"; textomes[5]="Mayo";
textomes[6]="Junio"; textomes[7]="Julio"; textomes[7]="Agosto"; textomes[9]="Septiembre"; textomes[10]="Octubre"; textomes[11]="Noviembre"; textomes[12]="Diciembre";
recordar que aunquegetMonth(); nos devuelve el mes de 0 a 11, a la variable mes le hemos sumado 1.
2.- IMPRESIN EN PANTALLA
Para escribir la fecha en la pantalla utilizaremos el document.write(); donde entre los parntesis tendremos que decirle qu es lo que ha de imprimir en pantalla, siempre utilizando comillas para el texto que queremos que escriba y sin comillas cuando queramos que aparezca la variable.
Os doy la forma para varios tipos de impresin de fecha:
9/12/2006 document.write("Fecha: " + diames + "/" + mes + "/" + ano + "<br>");
Sbado 9/12/2006
document.write("Fecha: " + textosemana[diasemana] + " " + diames + "/" + mes + "/" + ano + "<br>");
Sbado, 9 de Diciembre de 2006 document.write("Fecha: " + textosemana[diasemana] + ", " + diames + " de " + textomes[mes] + " de " + ano + "<br>");
3.- Y PARA TERMINAR
Hasta aqu, muy bien (ms o menos). La verdad es que lo nico que hay que hacer es copiar y pegar (al final teneis el script completo). Pero, cmo utilizo esto en mi pgina que estoy haciendo con Dreamweaver.
Cuando tengis vuestra pgina hecha, habris dejado una celda donde queris poner la fecha. Es tan fcil como lo siguiente:
Seleccionas el script y lo copias en el portapapeles (botn derecho del ratn > copiar) Recuerda que el script que tienes al final te imprimir la fecha de varias formas; selecciona la que te interesa y borra las dems
En vista diseo, colocas el cursor donde quieres que aparezca la fecha Pasas a vista cdigo Edicin > Pegar Vuelves a vista diseo
Recuerda que no vers en vista diseo la fecha, pero s al verla en el navegador
Salto de lnea en un mensaje de alert
<html> <head> <script language="JavaScript"> function mostrar(){ alert("Este es un mensaje de alerta\n con mas de una lnea"); } </script> </head> <body> <form name="frm"> <input type="button" value="Alert multilnea" onclick="mostrar()"> </form> </body> </html>
Back slash
\\n solucin si da problema
Hacer que los enlaces de una entrada se abran en otra ventana Cuando escribimos una entrada y queremos poner un enlace en el texto, pinchamos en la bola encadenada para insertar el link, se abre una ventanita y ponemos en ella la direccin del sitio al que hacemos referencia. Pero al pinchar en dicho enlace, el sitio en cuestin se abre en la misma ventana, (salvo que pinchemos el enlace con el botn derecho y le digamos que abra en otra ventana o pestaa) y, a menos que el enlace sea a alguna de tus entradas, lo que consigues con ello es echar de tu blog a quien ha entrado a visitarte. Quizs esta persona regrese a seguir leyndote, pero tambin puede ser que no lo haga. A menudo un enlace te lleva a otro y a otro y as acabas perdindote en la red. Puedes hacer que tus enlaces se abran directamente en otra ventana. Para ello, una vez insertado el link pincha en la pestaa Edicin de HTML. Vers que la direccin est entrecomillada.
Por ejemplo, este enlace a mi otro blog de tutoriales, se ve as:

<a href="http://laeulalia-blogdeprobes.blogspot.com">mi otro blog de tutoriales</a>
Detrs de las comillas de cierre de la direccin y antes del signo > he escrito, sin dejar espacios, target="_blank" para que se vea as:
<a href="http://laeulalia-blogdeprobes.blogspot.com/"target="_blank">mi otro blog de tutoriales</a> de esta manera si pinchas en el
enlace, vers mi otro blog en otra ventana.
Pincha en Redactar para seguir escribiendo la entrada, si an no has terminado. Cuando la publiques, el enlace se abrir en otra ventana al pincharlo normalmente. Puedes probar que lo has hecho bien. Antes de darle a Publicar entrada, pincha en Vista previa y pincha en el enlace desde all, (no funcionan en la ventana de redaccin), pero antes de hacer la prueba asegrate de que el botn Guardar ahora est de color gris, pues si no estuviera bien puesto y se abriera en la misma ventana, perderas lo escrito desde la ltima vez que el programa lo ha guardado. En caso de que el enlace no funcionara, puedes recuperar la entrada, que estar guardada como borrador y seguir escribiendo.
Si funciona bien, pinchando en Ocultar vista preliminar regresars a la ventana de escritura.

Formula Rio

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Formula Rio

Încărcat de

Drepturi de autor:

Formate disponibile

<input type='button' onclick='window.

print();' value='Imprimir' /></form>

Dentro de la etiqueta FORM

Apellido Nombre Gnero Ocupacin Hombre: Mujer: Mujer:

Atributos de etiquetas FORM y tipos de entrada

casilla de seleccin Nombre Tamao del texto

<OPTION> ... </OPTION>

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

2.1. Cajas de texto.

<INPUT TYPE="text" SIZE="20" MAXLENGTH="40">

Alinea verticalmente el control con la parte superior de la lnea en que es insertado.

Alinea verticalmente el control con la parte inferior de la lnea.

Sita el control a una altura media entre el resto de elementos de la lnea.

2.2. Cajas de texto para claves.

2.3. Botones de eleccin.

Veamos un resumen de los atributos de este control:

<INPUT TYPE="radio" NAME="Nombre_del_grupo" VALUE="Nombre_de_esta_opcin" ALIGN="alineamiento">

2.4. Cajas de seleccin.

El navegador hubiera enviado el mensaje:

Todos los atributos de este control quedan resumidos en el siguiente cdigo:

2.6. Botn de borrado

<INPUT TYPE="reset" NAME="nombre" VALUE="Texto del botn">

2.7. Botn genrico

<INPUT TYPE="button" VALUE="Texto del botn" ONCLICK="cdigo de script">

El texto e imagen entre la instruccin de inicio y la de fin se insertarn en el botn.

2.8. Campos ocultos

<INPUT TYPE="hidden" NAME="nombre" VALUE="datos">

2.9. Los formularios vistos desde Lynx

2.10. Innovaciones de Microsoft

Veamos unos ejemplos con cajas de texto y botones de seleccin:

3.1. Cajas de texto multilnea: TEXTAREA

3.2. Cuadros de seleccin

En la figura 12.25 vemos este ejemplo:

ratn sobre el control, en el primer caso, o sobre la opcin especfica, en el segundo.

4. PRCTICA 6-FORMULARIO PARA "Los Alpes"

La mejora en apariencia respecto a la que veamos en la figura 12.30 es apreciable.

5. COMO USAR LOS DATOS DE UN FORMULARIO

5.1. Formularios sin CGIs

6. ENVO DE FICHEROS USANDO FORMULARIOS

<script type="text/javascript"> var d = new Date(); document.write(d.getDate()); </script>

Para escribir la hora utiliza getHours():

Trucos para convertir el resultado de funciones

dia[5]="Viernes"; dia[6]="Sabado"; document.write("Hoy es: " + dia[d.getDay()]); </script>

Si deseas que se muestre el nombre del mes entonces utiliza:

mesok[11]="Diciembre"; document.write("Este mes es: " + mesok[mm.getMonth()]); </script>

Ejemplos prcticos de cdigos para insertar en las paginas web

Para mostrar otra pagina en html

Utilizacin de la etiqueta <BUTTON>

CON JAVASCRIPT SE PUEDE CREAR UNA FUNCION Y LUEGO LLAMARLA

Cmo se escribe el JavaScript?

Donde el contenido de fichero.js es:

PARA MOSTRAR LA FECHA 4.- CODIGO COMPLETO

var fecha=new Date(); var diames=fecha.getDate(); var diasemana=fecha.getDay(); var mes=fecha.getMonth() +1 ;

Aqu escribiremos nuestro script

Hay dos partes bien diferenciadas dentro de nuestro script

1.- la creacin de variables 2.- la impresin en pantalla

Sat Dec 9 11:37:51 UTC+0100 2006

Y esto, obviamente, no es lo que queremos que aparezca en nuestra pgina.

1.- CREACION DE VARIABLES

A cada parte de la fecha, tenemos que asignarle una variable distinta.

textosemana que en este ejemplo sera = sbado

Y por supuesto, la ms importante:

Empezamos con la creacin de las variables:

var fecha=new Date(); a la variable fecha le asignamos el valor de la fecha actual