Está en la página 1de 97

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

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

Formularios
Los formularios interactivos permiten a los autores de páginas Web poner elementos interactivos en sus páginas, 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 información rellenando campos o haciendo clic sobre botones, y luego presiona un botón de envío para enviarla a una dirección URLque se suele dirigir a una dirección de correo electrónico o a un script dinámico Web como PHP, ASP o CGI.

La etiqueta FORM
Los formularios están 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 cómo se enviarán las respuestas "POST" es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que "GET" envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación (para aprender más sobre los  métodos POST y GET, consulte el artículo sobre protocolo HTTP) ACTION indica la dirección a la que se enviará la información (un script CGI o dirección de

correo electrónico (mailto:dirección_de_correo_e@equipo)) Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cómo 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 válido. 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 actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método 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 más 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 múltiples

Envío de datos
Cuando se envía un formulario (haciendo clic en el botón de envío), los datos del formulario se envían 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 símbolo de unión ("&"). Por lo tanto, los datos que se envían al script se verán así: campo1=valor1&field2;=valor2&field3;=valor3 Con el método GET (enviar los datos mediante una dirección 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 ningún 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 elección pueden adoptar uno de dos estados: checked (seleccionado) o unchecked (no seleccionado). Cuando la casilla es seleccionada, el par   nombre/valor se envía al CGI. hidden: Este campo, que el navegador no muestra, es para definir una configuración ú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 botón de envío personalizado que aparece cuando se ubica una imagen en la ubicación 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 botón que permite al usuario elegir entre varias opciones. Cada uno de estos botones debe tener el mismo atributo name. El par nombre/valor del botón 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 botón de restauración para quitar todos los elementos en el formulario y restablecer sus valores predeterminados. submit: Un botón de envío para enviar el formulario. El texto en el botón puede definirse usando el atributo value. text: Una casilla de texto para escribir una línea de texto. El tamaño de la casilla puede definirse usando el atributo size y la extensión máxima del texto con el atributo maxlength.

  

La etiqueta TEXTAREA
La etiqueta TEXTAREA se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los siguientes atributos:      cols: representa el número de caracteres que puede contener un línea rows: representa el número de líneas name: representa el nombre asociado con el cuadro de texto, que permite su identificación 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 identificación en el par nombre/valor. disabled: crea un lista desactivada, que aparece atenuada size: representa el número de líneas de la lista (este valor puede ser más grande que el número 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 página usando tablas (algo recomendable para una presentación profesional). Este es un ejemplo que resume los puntos precedentes, mostrándole cómo disponer un formulario en una página 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>Género</TD> <TD> Hombre: Mujer: <INPUT type=radio name="género" value="M"> <br>Mujer: <INPUT type=radio name="género" value="F"> </TD> </TR> <TR> <TD>Ocupación</TD> <TD> <SELECT name="ocupación"> <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> .

</FORM> Valor POST GET Envía a la dirección mostrada Especifica el tipo de código submit realiza la ACTION de la etiqueta Send Resultado Efecto visual ACTION ENCTYPE <INPUT> TYPE ...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 Género Ocupación Hombre: Mujer: Mujer: Comentarios Enviar Atributos de etiquetas FORM y tipos de entrada Etiqueta Atributo METHOD <FORM> .

com.<FORM> línea simple de text texto cuya longitud se especifica por el atributo SIZE Elimina el Reset contenido del formulario Radio botón de radio Reset Checkbox NAME SIZE NAME <TEXTAREA> ...GT/computadoras .¡Entra ahora! OLX. </TEXTAREA> ROWS COLS <SELECT> <OPTION> </OPTION> </SELECT> casilla de selección Nombre Tamaño del texto Casilla de texto Opción 1 NAME .... </OPTION> Annonces Google OLX Anuncios de Laptops Portal de Anuncios de Artículos de Informática y más. Múltiples MULTIPLE selecciones posibles SELECTED VALUE Elección predeterminada Valor forzado Opción 1 Opción 2 Opción 3 Opción 1 <OPTION> ..

Después debe pulsar sobre el botón ENVIAR. en general. Más adelante en la sección 'Como usar los datos de un formulario' veremos como es posible recoger y procesar esta información. bastantes sencillos.1. Los formularios usados en estos sistemas son. Quizá las primeras páginas que hicieron uso de esta posibilidad fueron las de los sistemas de búsqueda. conocido como caja de texto. En la figura 12.1. únicamente es necesario un elemento.1 vemos un buen ejemplo de este tipo de uso. Figura 12. Formularios en HTML. . En ella vemos la página principal de Tower Communications se ofrece una caja de texto donde el usuario debe introducir una cadena de texto que desea buscar. donde sea posible introducir la palabra o frase que deseamos buscar. No es necesario navegar mucho tiempo por Internet para encontrar páginas Web en las que se piden datos a los navegantes. tras lo cual se mandará la información al servidor Web que la procesará y responderá enviando la información encontrada. En la página principal de Tower Communications vemos un formulario que es usado para permitir a los visitantes introducir una cadena de texto que deseen buscar. pero por ahora nos centraremos en la creación y en el diseño de los formularios.

Un caso más complejo de formularios es usado en las páginas en las que se ofrece a los navegantes la posibilidad de realizar sugerencias. tras rellenarlos deberemos pulsar sobre el botón 'Enviar formulario' para mandar la información.2 podemos apreciar esta página. que como vemos permite introducir datos en varios campos. En la página de Tower podemos encontrar una página de sugerencias que ilustra la utilidad de esta forma de usar los formularios. En general estos formularios ocupan una página entera. ofrecer comentarios o mandar cualquier otro tipo de información. En otra sección de la página de Tower Communications vemos un formulario más complicado formado por numerosas cajas de texto y otros elementos.2. Figura 12. y están formados por diversos elementos. En la figura 12. .

crear un sistema de búsqueda. como enseguida veremos. . Un formulario no es más que un conjunto de elementos que permiten introducir datos a los visitantes de nuestras páginas de una manera sencilla.Estos dos ejemplos son probablemente los más comunes entre las páginas del WWW. El único límite será nuestra creatividad. En este capítulo aprenderemos todas las posibilidades que tenemos y como usarlas adecuadamente. Los formularios son muy versátiles. pero no los únicos. Si queremos preguntar a los visitantes de nuestras páginas su nombre. Estos datos son en general texto o una serie de opciones entre las que se debe elegir una o varias. su dirección de correo electrónico. y la posibilidad de interactuar con los usuarios de las páginas será útil en multitud de ocasiones. hacer un libro de visitas o simplemente pedir sugerencias necesitaremos crear formularios.

Al contrario que la mayoría de etiquetas que hemos visto en los últimos capítulos ésta existe desde la especificación HTML 2. <FORM>. creamos un archivo nuevo en nuestro editor de texto o nuestro editor HTML. Para empezar. Esta etiqueta consta de una instrucción de inicio. como Lynx. puedan mostrarlos. El resultado será muy similar. Estos elementos. Dicho esto podemos crear nuestra primera página con un formulario. pero la usaremos en este ejemplo para hacernos una idea de cómo se crea un formulario en una página Web. pero también existen métodos para que los navegadores que sólo pueden mostrar texto.El lenguaje HTML consta de una serie de etiquetas que permitirán crear de forma rápida y sencilla numerosos elementos de entrada de datos. La caja de texto es el elemento que sigue al texto'Introduzca su nombre:'. entre las cuales podremos insertar todos los controles que deseemos. En este caso estamos usando para visualizarla el navegador Internet Explorer para Windows 95. por lo que puede ser usada con total libertad. serán gráficos en la mayoría de navegadores. En ella adelantaremos uno de los controles más usados y sobre el que ya hemos hablado antes: la caja de texto. al que apreciamos en la figura 12. En él debemos insertar el siguiente código: <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 elección y lo abrimos con el navegador. Si visualizamos este mismo código desde un .0 y por tanto es entendida prácticamente por cualquier navegador existente actualmente. y una instrucción de fin. como siempre que creamos una página nueva. Un poco más adelante la trataremos más en detalle.3. </FORM>. que reciben el nombre de controles. Un formulario no es más que un conjunto de estos controles cuya información será enviada conjuntamente cuando el usuario pulse sobre el botón de envío. por lo que la caja de texto tiene el aspecto habitual en este sistema operativo. Para crear un formulario el lenguaje HTML proporciona la etiqueta FORM. si no igual.

Para ello no tenemos más que pulsar con el ratón sobre ella (o seleccionarla en el caso de navegadores de texto) y escribir como si estuviésemos en un editor de texto. Figura 12. .4) enviaremos los datos pulsando la tecla ENTER. Una vez hemos escrito nuestro nombre (ver figura 12.navegador de UNIX o Macintosh la caja de texto sería mostrada con la apariencia habitual en estos entornos. La gran novedad de la caja de texto respecto a todos los elementos de las página Web que hemos visto hasta ahora es que permite a los usuarios introducir texto en ella.3. Figura 12. Nuestro primer formulario está compuesto por una caja de texto.4. El texto aparecerá según lo vamos escribiendo. Pulsando sobre la caja de texto nos aparecerá un cursor parpadeante que nos indica que podemos empezar a escribir texto. Para introducirla hemos usado la etiqueta INPUT con TYPE="text".

Para indicar el tipo de control que queremos insertar se usa el atributo TYPE. Si el formulario simplemente tiene uno. en los ejemplos de la figura 12.2 veíamos que ambos formularios constaban de un botón de envío sobre el que había que pulsar para mandar los datos. pero por supuesto debe seguir usándose): . será necesario incluir el botón. que permite insertar varios tipos de controles. que será visto un poco más adelante. pero ¿cómo se crea un botón de envío? El lenguaje HTML consta de una etiqueta. Esto se hace con el atributo ACTION de la etiqueta FORM.1 y 12. INPUT. es decir. En los casos en los que el formulario conste de más de un control. 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. de más de un campo de entrada de datos. HEAD y BODY. Sin embargo. entre los que se encuentra el botón de envío. Por tanto si en el ejemplo anterior queremos insertar uno. Bien. y por tanto sería más correcto usar también el termino 'enlace para enviar el formulario' . seguiremos usando únicamente el término botón. y por tanto el uso de botón de envío es opcional.En este ejemplo todavía no hemos indicado al navegador dónde debe enviar los datos. debemos añadir esta etiqueta (de ahora en adelante omitiremos las etiquetas HTML. Pero ¿no existía un botón de envío? Si. Los botones de envío son mostrados como enlaces normales en los navegadores de sólo texto. Para crear el botón de envío debemos usar TYPE="submit". por simplicidad. aunque por ahora nos olvidaremos de este detalle. Al no indicar la dirección de destino el navegador no mandará los datos al pulsar la tecla ENTER (o pulsar el botón de envío).

Usando el código <INPUT TYPE="submit"> podemos insertar un botón de envío de manera que al pulsar sobre él se envían los datos del formulario. VALUE. Esta situación es poco deseable en la mayoría de las ocasiones. pero si visualizamos este código con otro puede cambiar.5 vemos que al visualizar este ejemplo con Internet Explorer 4. que nos permitirá especificar nosotros mismos el texto que queremos que sea mostrado en el botón.0 aparece el texto 'Enviar consulta' en el botón. Si el navegador usado es una versión inglesa. En esta . por los que se creó un atributo. En la figura 12. el texto del botón estará en inglés.5. este texto ha sido puesto por defecto por este navegador. En este caso en el botón el mensaje es 'Envíeme' y será éste siempre. veremos que la caja de texto está acompañada ahora de un botón con un texto que invita a pulsarlo para mandar los datos.6.<H1>FORMULARIO DE EJEMPLO</H1> <FORM> <P>Introduzca su nombre: <INPUT TYPE="Text"> <P><INPUT TYPE="Submit"> </FORM> Si visualizamos este código con un navegador. independientemente del navegador que usemos para visualizar la página. Así en podemos reescribir el código para insertar el botón como: Figura 12. <P><INPUT TYPE="Submit" VALUE="Envíeme"> Con lo que el resultado obtenido sería el que apreciamos en la figura 12.

Figura 12. Aunque lo habitual es incluir un único botón de envío el lenguaje HTML permite la posibilidad de incluir varios. El ancho del botón se adaptará a la longitud del texto. por esta razón deberemos usar NAME en cada uno de los controles. De esta forma el servidor podrá saber el control en . Este nombre será enviado junto con los datos cuando se pulse sobre el botón. A continuación aprenderemos a insertar los distintos tipos de controles existentes y crearemos formularios más complejos que hasta ahora.6.misma figura podemos apreciar que el tamaño del botón se adapta a la longitud del texto que pongamos en él. Cuando se pulse el botón de envío se enviará los datos de cada control junto con el nombre especificado con este atributo. Por ejemplo podían 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 botón de envío. Con el atributo VALUE podemos cambiar el texto por defecto del botón de envío por uno de nuestra elección. NAME. De esta forma es posible realizar acciones diferentes dependiendo de sí se pulsa uno u otro. para dar un nombre a cada uno que permita al servidor diferenciar cual se ha pulsado. En este caso debemos usar un nuevo atributo.

Todos los controles que pueden usarse a la hora de crear un formulario permitirán al navegante insertar información.password. Una vez hecho este comentario. es decir. Uno común a todos es NAME. En otras ocasiones se ofrecerá entre una serie de opciones entre las que simplemente hay que elegir una o varias. Para diferenciar entre unos controles y otros se hará uso del atributo TYPE que puede tomar los siguientes valores: text. ya mencionado. Todo ello se podrá realizar de diferentes formas que ahora mismo comenzamos a estudiar. con el que damos un nombre al control. Otro también común a todos será ALIGN. que podrá ser de una sola línea o varias y que podrá estar oculto o no. Unas veces esta información consistirá en la inserción de un texto.que se ha insertado cada dato. Además del atributo TYPE. reset. Para empezar vamos a ver una serie de controles todos los cuales se crean con la etiqueta INPUT. Controles de Formularios. file y hidden. podemos empezar a estudiar cada uno de los tipos de control uno a uno. radio. que explicaremos con las cajas de texto. en función del valor del atributo TYPE. Ya hemos introducido antes las cajas de texto. Como resumen recordaremos que para insertar este tipo de control en una página Web se usa la etiqueta INPUT (esta misma etiqueta será la utilizada para insertar la mayoría de controles). esta etiqueta consta de algunos más cuya función variará del tipo de control estemos insertando. y que es recomendable usarlo siempre. Es decir: <FORM> <INPUT TYPE="text"> </FORM> . Cajas de texto. 2. checkbox.1. Recordemos brevemente todos los atributos de la etiqueta INPUT cuando la usamos para insertar el botón de envío: <INPUT TYPE="Submit" NAME="Nombre" VALUE="Texto del botón"> 2. image. submit. con TYPE="text".

Un problema adicional que dificulta una correcta elección del tamaño de la caja es que este tamaño será considerado de distinta forma por los distintos navegadores y más aún si estos son de distintos sistemas operativos.6. Debemos tener en cuenta que en diferentes navegadores un mismo valor no se corresponde a una misma longitud. Para ello usaremos. esta es la longitud de los ejemplos que veíamos en las figuras 12. cuando ponemos TYPE="text" existen otros dos: SIZE: Determina la anchura de la caja de texto.3 a 12. . Cuando insertamos una caja de texto. El atributo SIZE nos permite variar la longitud de la caja de texto. En ocasiones convendrá decrementar o incrementar este valor por defecto.7.Si nuestra intención es insertar más de un control será conveniente darle un nombre a la caja de texto. pero en todo caso siempre será conveniente mantener un valor menor de 50 caracteres de manera que la caja de texto quepa en la mayoría de pantallas. Ya hemos visto los atributos TYPE y NAME que existe siempre en la etiqueta INPUT. Figura 12. En la figura 12. tal y como hacíamos con el botón de envío. el atributo NAME: <FORM> <INPUT TYPE="text" NAME="mitexto"> </FORM> Como podemos apreciar la etiqueta INPUT consta de una única instrucción.7 podemos ver una serie de cajas de texto de diferentes tamaños y las diferencias entre Internet Explorer y Netscape Navigator al mostrar el mismo código. es decir. El valor por defecto de este atributo es 20 caracteres.

Para entender el funcionamiento es mejor comprobarlo in situ con unos ejemplos.MAXLENGTH: Con este atributo limitamos el número máximo de caracteres que pueden ser escritos en una caja de texto. Recomendamos al lector que pruebe a visualizar los siguientes códigos. que dejarán de estar a la vista (OJO. 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"> . y que es totalmente independiente. Si es mayor cuando lleguemos al final de la caja de texto los nuevos caracteres que insertemos irán desplazando hacia la izquierda a los primeros. El valor de este atributo puede ser mayor o menor que el especificado en SIZE. esto no quiere decir que sean borrados).

Tal y como hemos indicado antes. El atributo ALIGN puede tomar los siguientes valores: ALIGN="top": Alinea verticalmente el control con la parte superior de la línea en que es insertado. todos los controles que insertamos con la etiqueta INPUT tienen un atributo. 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.<INPUT TYPE="text" SIZE="20" MAXLENGTH="40"> Por último queda decir que si no usamos el atributo MAXLENGTH el número de caracteres que pueden introducirse en la caja de texto no tendrá límite. al contrario que el resto de etiquetas y atributos que hemos visto hasta ahora en este capítulo. ALIGN="bottom": Alinea verticalmente el control con la parte inferior de la línea. en general. antes de que el usuario escriba nada. llamado ALIGN. VALUE: Sirve para especificar un texto que debe aparecer por defecto en la caja de texto. que nos permitirá seleccionar entre varios tipos de alineamiento. que existen desde la versión anterior del estándar (HTML 2.2. Este atributo apareció en el estándar HTML 3. Este texto suele ser. o bien instrucciones o bien la respuesta más probable.0). Alineamiento de controles. . muchísimo"> </FORM> Invitamos al lector a que pruebe este ejemplo en su navegador y compruebe los resultados.

el texto no bordeará el control por su derecha. ALIGN="left": En este caso estamos alineando el control horizontalmente a la izquierda.8 podemos ver un ejemplo de este tipo de alineamiento y del siguiente: Figura 12. situándose éste en una línea propia. En este caso vemos una caja de texto alineada a la izquierda (ALIGN="left"). sólo que ahora el control se situará a la derecha de la ventana del navegador.ALIGN="middle": Sitúa el control a una altura media entre el resto de elementos de la línea. En la figura 12.8. Al contrario de lo que ocurría con las imágenes y con las tablas. ALIGN="right": Este valor es idéntico al anterior en funcionamiento. El atributo ALIGN de la etiqueta INPUT nos permite alinear los controles. .

9. Figura 12.9. Un ejemplo típico de uso de password es al pedir una identificación. el de la caja de texto para passwords. Para ello debemos usar TYPE="password" en la etiqueta INPUT. por ejemplo para entrar en algunas secciones de una página. una caja de texto modificada en la que al escribir se mostrarán únicamente asteriscos. El lenguaje HTML permite utilizar. En ocasiones puede ser conveniente pedir al usuario algún tipo de información confidencial como puede ser una clave de acceso o password.2. al menos. no ha sido mostrado siendo sustituido por asteriscos. 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. en estos casos. En ella vemos como el texto que hemos escrito en el segundo campo. Cajas de texto para claves. Debemos tener en cuenta que algunos usuarios pueden estar en algún lugar público o. 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="tamaño" MAXLENGTH="longitud_máxima" ALIGN="alineamiento"> 2. Las cajas de texto para claves muestran asteriscos en lugar del texto que escribimos para aumentar la confidencialidad. .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 crear este formulario podemos usar el siguiente código: <H2><FONT COLOR="#8080FF">Formulario de autenticación</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 código con Explorer obtenemos el resultado de la figura 12.

como traducción directa de su denominación inglesa radio buttons y porque en general los navegadores suelen darles una forma circular. Para insertar un botón de elección usaremos de nuevo la etiqueta INPUT. Al igual que hicimos con estas. MAXLENGTH. pero esta vez el valor del atributo TYPE será radio: <FORM> <INPUT TYPE="radio"> .La caja de texto para claves o passwords simplemente impide que el texto que se escribe sea mostrado en pantalla. Las cajas de texto para claves también tienen los atributos SIZE. Botones de elección.3. VALUE y ALIGN que vimos en las cajas de texto. y por tanto no es seguro mandar datos confidenciales. veamos un resumen de todos los atributos de las cajas de texto para claves: <INPUT TYPE="password" NAME="clave" SIZE="tamaño" MAXLENGTH="longitud_máxima" VALUE="clave por defecto" ALIGN="alineamiento"> 2. Estos controles reciben también el nombre de botones de radio. sin embargo este texto no es codificado al ser mandado al servidor Web.

También es posible especificar que un botón determinado esté seleccionado inicialmente insertando el atributo CHECKED en la etiqueta INPUT de la siguiente manera: <INPUT TYPE="radio" CHECKED> Los botones de elección suelen ser insertados en los formularios en grupos. Cuando pulsamos sobre un botón de radio le pasamos a la posición ON y permanecerá en ese estado hasta que pulsemos en otra opción del mismo grupo. de las cuales podemos elegir sólo una. Los botones de elección permiten elegir entre un conjunto de opciones. Para indicar que una serie de botones de elección pertenecen a un mismo grupo debemos incluir el mismo valor en el atributo NAME en todos ellos. Figura 12. Esto es así porque entre los botones de radio de un mismo grupo sólo uno de ellos puede estar seleccionado. En ella vemos que únicamente el botón de radio correspondiente a 'Pop' está seleccionado. dando al usuario la posibilidad de elegir entre una serie de opciones. estando inicialmente todos en la posición OFF.10.</FORM> Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no seleccionado (OFF). por tanto cuando seleccionamos uno.10. . Además debemos usar el atributo VALUE para dar un nombre distinto a cada uno de los botones. Veamos un ejemplo: Indique el tipo de música que más 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 código obtenemos el resultado que apreciamos en la figura 12. Invitamos al lector a que pruebe este ejemplo y observe cómo al seleccionar otro de los botones de elección el anterior deja de estar seleccionado. aquel que estuviese seleccionado previamente dejará de estarlo.

Por supuesto.n TYPE="radio" NAME="cine" VALUE="Comedia">Comedia TYPE="radio" NAME="cine" VALUE="CienciaFiccion">CienciaTYPE="radio" NAME="cine" VALUE="Drama">Drama De esta manera tendríamos el formulario de la figura 12.11. En un mismo formulario podemos incluir varios grupos de botones de elección. Por ejemplo al código anterior podríamos añadirle (antes de </FORM>) este otro: <P><INPUT <P><INPUT <P><INPUT Ficci&oacute. al pertenecer los botones a distintos grupos. es posible incluir varios grupos de botones de selección dentro de un mismo formulario. . Los visitantes podrán seleccionar una opción en cada uno.n <P><INPUT TYPE="radio" NAME="cine" VALUE="Accion">Acci&oacute. Figura 12.11 en la que vemos que se ha podido seleccionar 'Pop' como tipo de música favorito y 'Ciencia-ficción' como género cinematográfico preferido.

¿qué se envía cuando usamos botones de elección? La respuesta es simple. y en este caso el mensaje.Ficción' se enviará el siguiente mensaje: musica=Pop cine=CienciaFiccion En realidad. el mensaje que se envía no es exactamente el anterior. ya que éste es codificado. Por un lado es necesario enviar el nombre del grupo (el valor del atributo NAME) y por otro la opción elegida (el valor del atributo VALUE). Aún así las diferencias no son muchas. Si en las cajas de texto se manda al servidor el texto que introduzca el usuario. ya codificado.Quizá el lector haya tenido ya la siguiente duda. En el ejemplo anterior en el que se han seleccionado 'Pop' y 'Ciencia. Veamos un resumen de los atributos de este control: . que se enviaría constaría de una única línea: musica=Pop&cine=CienciaFiccion.

12 vemos este ejemplo. a no ser que hayamos usado el atributo CHECKED. por los que es posible tener varias seleccionadas. Veamos un ejemplo de uso de este tipo de controles: Indique su profesión (escoja todas las que procedan): <FORM> <P><INPUT TYPE="checkbox" NAME="medico">Médico <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 selección se cambia de seleccionado a no seleccionado. Cada caja de selección es independiente del resto. Al igual que dichos botones tienen dos posiciones. Las cajas de selección son independientes unas de otras.12. Para insertar una caja de selección debemos usar de nuevo la etiqueta INPUT. pero esta vez con TYPE="checkbox".4. y por tanto el valor del atributo NAME debe ser diferente en cada una. pero además permitirán seleccionar varias opciones en una lista. independientemente de la posición del resto. estando en esta última posición inicialmente.<INPUT TYPE="radio" NAME="Nombre_del_grupo" VALUE="Nombre_de_esta_opción" ALIGN="alineamiento"> 2. En el código podemos apreciar que es posible indicar que una caja de selección esté seleccionada por defecto. En la figura 12. Las cajas de selección guardan ciertos parecidos con los botones de radio. seleccionados o no seleccionados. Figura 12. . Cajas de selección. y podemos apreciar como es posible seleccionar varias opciones simultáneamente.

pero a veces puede ser conveniente. ya que el nombre dado con NAME es diferente en cada caso. dejando el resto igual: <P><INPUT TYPE="checkbox" NAME="ingeniero" VALUE="SI">Ingeniero El navegador hubiera enviado el mensaje: programador=SI&ingeniero=ON . en este caso no será imprescindible.Con las cajas de selección también podemos usar el atributo VALUE. En el caso de la figura se mandaría al servidor el siguiente mensaje: programador=ON&ingeniero=ON Si hubiésemos usado el atributo VALUE se sustituiría la palabra ON (que es la que se pone por defecto) por la que nosotros hubiésemos indicado en las cajas de selección con las opciones 'programador' e 'ingeniero'. Por ejemplo si en el código anterior hubiésemos escrito lo siguiente en el código de la caja del ingeniero.

Imágenes.5. El lenguaje HTML permite una manera alternativa para insertar un botón de envío personalizado.Todos los atributos de este control quedan resumidos en el siguiente código: <INPUT TYPE="checkbox" NAME="Nombre" ALIGN="alineamiento" VALUE="valor_que_debe_enviarse"> 2. al poder usar en lugar del botón normal que hemos visto anteriormente una imagen creada por nosotros mismos. Para insertar este tipo de control debemos usar TYPE="image".. Ejemplo 12.> y </BODY>): <CENTER><H2><FONT COLOR="#8080FF">Hoteles El Paraíso</FONT></H2></CENTER> <H3>Sistema de reserva de habitaciones:</H3> <FORM> </FORM> .. donde iremos insertando los distintos controles de los que consta el formulario (todo el código que mostremos de ahora en adelante en este ejemplo debe introducirse entre las instrucciones <BODY . El usuario deberá introducir ciertos datos y enviar posteriormente la reserva. Aprovecharemos el ejemplo de este tipo de control para realizar un formulario que englobe lo visto hasta ahora.1. Hemos elegido como motivo del formulario un sistema de reserva de habitaciones de un hotel. Comenzamos el formulario creando un archivo nuevo y escribiendo la estructura básica de la página: <HTML> <HEAD> <TITLE>Botón de envío personalizado</TITLE> </HEAD> <BODY BGCOLOR="#B6D6B6"> </BODY> </HTML> A continuación insertamos un encabezado y la etiqueta FORM. mientras que la dirección de la imagen se indica con el atributo SRC al igual que hacíamos con la etiqueta IMG.

Es hora de insertar los controles. . Visualizando el código que hemos escrito hasta ahora obtenemos el resultado de la figura 12.13.13. En el formulario de la clave sólo se podrán insertar 4 caracteres. elegimos un tamaño de 30 caracteres con el atributo SIZE y no usamos MAXLENGTH para no limitar la longitud del nombre que se pueda insertar. En este caso usaremos una caja de texto para claves.aquí iremos insertando el resto del código --> </FORM> Veamos lo que llevamos. Este es el aspecto que tiene el código que hemos escrito hasta ahora. En primer lugar debemos introducir un campo para preguntar el nombre. y que le servirá para identificarse cuando llegue al hotel junto con su nombre. Para ello lo más indicado es usar una caja de texto. Figura 12. Dado que la clave sólo puede constar de 4 caracteres limitamos el tamaño 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 identificación (4 letras): <INPUT TYPE="password" NAME="clave" SIZE="4" MAXLENGTH="4"></P> <!-.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. Además introducimos un segundo campo donde debe insertar una clave secreta. que debe elegir el mismo usuario.

--> <P>Tipo de habitación</P> <INPUT TYPE="radio" NAME="tipoHabitacion" VALUE="individual">Individual &nbsp.El siguiente paso será preguntar al usuario qué tipo de habitación desea reservar.. La cadena "<!-. <INPUT TYPE="radio" NAME="tipoHabitacion" VALUE="doble" CHECKED>Doble </FORM> Los espacios &nbsp han sido usados para separar ambas opciones.&nbsp. Existen dos opciones. una habitación individual o una habitación doble... ya que están en la misma línea. aunque no lo repitamos de nuevo. ya que sólo una de las dos pueden ser seleccionadas simultáneamente. para diferenciarlas ponemos diferentes valores en el atributo VALUE: <FORM> <!-. -->" simplemente hace referencia a que en ese lugar va el código que hemos escrito antes para preguntar el nombre y la clave... . Para ofrecer estas dos respuestas posibles resultan idóneos los botones de radio.. para lo cual usamos NAME="habitación". Los dos botones que necesitamos deben estar en el mismo grupo. De ahora en adelante lo usaremos para indicar 'aquí va el código escrito anteriormente'.

de las cuales pueden elegirse (de manera independiente) las que se deseen. En nuestro caso hemos llamado a la imagen envio.14 podemos apreciar el resultado de visualizar este formulario con el navegador Internet Explorer 4.gif"> </CENTER> </FORM> Con esto que podemos dar por concluido el formulario. . Una vez dibujado el botón debemos guardarlo en formato GIF o JPG.&nbsp. Podríamos simplemente usar: <INPUT TYPE="submit" VALUE="Envíeme"> Pero en este caso seremos algo más originales y nos crearemos nuestro propio botón. Las cajas de selección serán los controles que debemos usar en este caso. con las opciones 'Doble' y 'Desayuno en cama' preseleccionados al usar el atributo CHECKED.. --> <CENTER> <INPUT TYPE="image" NAME="envio" SRC="envio. En la figura 12.A continuación los dueños del hotel desean ofertar una serie de extras especiales junto con la habitación....&nbsp. Para ello únicamente necesitaremos un programa de dibujo y algo de creatividad. El código para insertar esta imagen de manera que sirva como botón de envío será: <FORM> <!-.. <FORM> <!-.gif. que quieren promocionar este servicio. --> <P>Opciones extra:</P> <INPUT TYPE="checkbox" NAME="desayuno" CHECKED>Desayuno en cama &nbsp. <INPUT TYPE="checkbox" NAME="jakuzzi">Jakuzzi &nbsp. hemos preseleccionado el desayuno en cama inicialmente usando el atributo CHECKED. Este es el aspecto inicial. El último paso será insertar el botón de envío..0. y lo ponemos en el mismo directorio donde está la página que estamos creando. <INPUT TYPE="checkbox" NAME="climatizador">Climatizador </FORM> Por petición de los dueños.

las coordenadas 'x' e 'y' sobre las que se ha pulsado. como si fueran parte de la información del formulario. Sin embargo las imágenes de formulario tienen una función extra. cuando el usuario pulsa una imagen.1 en el que destaca el uso de una imagen personalizada como botón de envío. También permite usar otros atributos de la etiqueta IMG como VSPACE y HSPACE para controlar los márgenes verticales y horizontales alrededor de la imagen y BORDER para controlar el grosor del borde. De esta forma el servidor Web puede realizar diferentes acciones en función del lugar de la imagen donde se ha pulsado. De hecho este es un método . en relación a la esquina superior izquierda.Figura 12. Este es el resultado final del formulario del ejercicio 12. ya que el navegador envía.14. El navegador Explorer permite el uso de los atributos WIDTH y HEIGHT para indicar el tamaño de las imágenes de formularios. En este ejemplo hemos usado una imagen creada por nosotros mismos como sustituto del botón de envío estándar.

Pero quizás en algún momento decida que quiere dar marcha atrás y recuperar los datos que aparecieron al principio. En el capítulo 6 vimos la diferencia entre las imágenes mapa en el servidor y las imágenes mapa en el cliente (las que podíamos crear con el lenguaje HTML). Botón de borrado La mayoría de los controles anteriores permitían al usuario introducir una serie de datos o elegir entre una serie de opciones. Una vez a cargado la página 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). Para ello no tenemos más que usar el código: <FORM> <INPUT TYPE="image" SRC="imagenmapa. Inicialmente las cajas de texto aparecían vacías. 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. Igualmente los botones de elección y cajas de selección aparecían en posición de no seleccionados a no ser que hubiésemos indicado lo contrario usando el atributo CHECKED. Este nuevo tipo se corresponde con las procesadas con el servidor. Para terminar con las imágenes de formulario veremos. La creación de . Más sobre esto en la sección 'Como usar los datos de un formulario' que veremos más adelante. Este control recibe el nombre de botón de borrado o botón de reseteado ( reset button ). si es que los había.alternativo para crear una imagen mapa. las coordenadas donde se ha pulsado) de este formulario y devolver la respuesta oportuna.gif"> </FORM> Posteriormente debemos crear un programa en el servidor que sea capaz de leer los datos (es decir. 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. un resumen con sus atributos: <INPUT TYPE="image" SRC="URL" NAME="Nombre"> 2. como hemos venido haciendo hasta ahora.6. a no ser que hubiésemos usado el atributo VALUE para asignarles por defecto.

Por ejemplo Internet Explorer 4. esta vez con TYPE="reset": <INPUT TYPE="reset"> Este código provocará la aparición de un botón como el botón de envío con un texto por defecto que indica su función. al igual que hacíamos con el botón de envío.0 muestra el mensaje 'Restablecer'. y dado que esto no siempre es deseable podemos usar el atributo VALUE. Este texto dependerá del navegador que usen los visitantes de nuestra página. De nuevo usaremos la etiquetaINPUT.este control es muy sencilla. Veamos un ejemplo algo más completo: <H2> <FONT COLOR="#8080FF"> Formulario de identificación </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> . para especificar el texto que prefiramos.

El botón de borrado (<INPUT TYPE="reset" >) permite al usuario borrar los datos introducidos y recuperar los iniciales. Si no hubiésemos puesto unos valores por defecto en nuestro código HTML los datos campos simplemente se hubieran quedado vacíos. Figura 12.15. .En la figura 12.15 podemos ver este formulario con unos datos introducidos por un usuario (arriba) y tras pulsar el botón de borrado (abajo).

pero mostraremos dos ejemplos sencillos que ilustran el funcionamiento de este tipo de botones. y por tanto el botón genérico debe ser considerado como una extensión. Estos ejemplos .Al igual que hemos hecho con los controles anteriores concluiremos con un resumen del código del botón de borrado. Por ahora no nos adentraremos en ningún lenguaje de script. que. como comentamos al principio. que no tiene ninguna función definida. Para insertar un botón genérico usaremos la etiqueta INPUT con TYPE="button": <INPUT TYPE="button" VALUE="Pulseme"> Las acciones que debe llevar a cabo este botón al ser pulsado sólo pueden indicarse con lenguajes de script como JavaScript o VBScript y no con HTML estándar. En éste hemos incluido el atributo NAME.7. nos encontramos con la posibilidad de insertar un botón genérico. es decir. está presente en todos los controles: <INPUT TYPE="reset" NAME="nombre" VALUE="Texto del botón"> 2. Para insertar el código de estos lenguajes se usa el atributo ONCLICK: <INPUT TYPE="button" VALUE="Texto del botón" ONCLICK="código de script"> No todos los navegadores soportan los lenguajes de script. sino la que nosotros queramos darle. Botón genérico Para completar la colección de botones de los formularios. éstos serán tratados más en detalle. ya que más adelante en esta obra. Si lo usamos debemos ser conscientes que únicamente los navegadores que soporten el script usado podrán hacer uso suyo.

han sido probados con los navegadores Internet Explorer y Netscape Navigator en sus versiones 3. Los botones genéricos tienen multitud de usos.16). pero pueden no funcionar con otros navegadores. El código necesario será: <FORM> <INPUT TYPE="button" VALUE="Cerrar ventana" onClick="window. . requieren hacer uso de un lenguaje de script. entre los más usados nos encontramos con el botón enlace y el botón para cerrar una ventana. que.close(). El primero consistirá en un botón cuya función será cerrar una ventana del navegador."> </FORM> Es probable que al pulsar el botón nos aparezca un mensaje de aviso del navegador pidiéndonos confirmación para cerrar la ventana (ver figura 12. como todos.16. Figura 12.0 y posteriores.

El resultado es más atractivo. ya que no todos los visitantes tendrán navegadores que entiendan este código: <FORM> <INPUT TYPE="button" VALUE="Cargar otra ventana" onClick="window. En la figura 12.html')."> </FORM> En el directorio botones podemos encontrar un archivo con ambos códigos para que el lector pueda probarlos.replace ('button2. pero debemos usarlo con moderación.location.El segundo ejemplo es más usado aún y consiste en usar el botón con la misma función que un enlace hipertexto.16 vemos una muestra de este .

gif" alt=""> </BUTTON> El texto e imagen entre la instrucción de inicio y la de fin se insertarán en el botón. Este tipo de control es invisible. Veamos un ejemplo de cómo funcionará BUTTON: <BUTTON name="reset" type="restablecer"> Restablecer<IMG src="pics/imagen. para indicar los datos y su nombre: .0 introduce una nueva etiqueta para insertar botones en nuestra página: BUTTON. podemos usar un campo oculto para pasarle la información de que debe hacer con los datos de este formulario concreto (debemos tener en cuenta que este mismo programa puede procesar la información de otros formularios también). En general. Si no aparece en la página y el navegante no puede hacer nada con él ¿Cuál es su función?. Los campos ocultos se crean usando la etiqueta INPUT con TYPE="hidden". los campos ocultos se usan para enviar información específica al programa del servidor Web que procesará los datos enviados. El nuevo estándar HTML 4. ¿Para qué sirve entonces un control oculto?.documento junto con el cuadro de diálogo con el que Internet Explorer 4. Aún así esta problemática queda fuerae de lo que pretendemos abarcar en esta sección dedicada al lenguaje HTML.8. La gran innovación de esta etiqueta es que podemos insertar en el botón imágenes o texto formateado con código HTML. borrado (TYPE=reset) o genérico (TYPE=button). y por tanto el navegador no muestra ningún tipo de gráfico para advertir de su existencia. Esta etiqueta tiene un atributo. por ejemplo si este programa es capaz de realizar varias funciones distintas con estos datos. Además debemos usar los atributos VALUE y NAME. 2. Campos ocultos Los campos ocultos son un tipo de control que únicamente sirve para incluir información adicional entre los datos del formulario. llamado TYPE. que nos permitirá elegir entre los tres tipos de botones disponibles: envío (TYPE=submit).0 pide confirmación para cerrar la ventana tras pulsar el botón del primer ejemplo.

<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 veían los controles con navegadores gráficos, usando como ejemplo a Microsoft Internet Explorer 4.0. Pero los formularios pertenecen al estándar 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 páginas Web conocer como son mostrados cada uno de los controles que hemos visto desde este navegador, para hacerse una idea de cómo se verán los formularios que de sus páginas. Dado que no siempre es fácil 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 botón de envío no será gráfico, 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 línea 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 también son capaces de mostrar formularios, que aunque no sean gráficos tienen la misma funcionalidad.

El código 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 más interesante aún puede ser ver con este navegador nuestro ejemplo 1 de este capítulo (figura 12.14) con Lynx. El resultado que obtenemos puede ser apreciado en la figura 12.18 donde vemos que este navegador también puede mostrar botones de radio y cajas de selección. Figura 12.18. En esta figura podemos apreciar cajas de texto y de clave, botones de elección y cajas de selección tal y como son mostradas por Lynx.

En este caso es también interesante ver que la imagen que usábamos como botón de envío ha sido sustituido por el texto ' [IMAGE]-Submit', pero sigue funcionando.

2.10. Innovaciones de Microsoft
La compañía 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 extensión resultará conocida a los lectores, se trata del atributo TITLE, y su función 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 (estándar de Windows) con el texto 'Introduzca aquí su nombre ': Figura 12.19. El atributo TITLE es una extensión de Microsoft que permite dar una descripción a los controles que será mostrada en un bocadillo.

simplemente se quedarán igual que si no lo hubiésemos usado. La forma de usarlo consiste en incluirlo en todos y cada uno de los controles asignándole un número. Para entender ambos atributos mejor es necesario verlo con un ejemplo. para ello usaremos parte del código del ejemplo 1: <FORM> <P>1) Introduzca su nombre: <INPUT TYPE="text" NAME="nombre" TABINDEX="1"> <P>3) Introduzca una clave para su identificación (4 letras): <INPUT TYPE="password" NAME="clave" TABINDEX="3"> <P>4) Dirección <INPUT TYPE="text" NAME="direccion" NOTAB> <P> 2) Tipo de habitación </P> <INPUT TYPE="Radio" NAME="tipoHabitacion" VALUE="individual" TABINDEX="2"> Individual <INPUT TYPE="Radio" NAME="tipoHabitacion" VALUE="doble" CHECKED TABINDEX="2"> Doble </FORM> . se puede usar la tecla tabulador o TAB para pasar de uno a otro.Este atributo puede usarse con entera libertad. Cuando nos encontramos ante un formulario formado por varios controles. porque los usuarios de Internet Explorer podrán beneficiarse de ella y los usuarios de navegadores que no lo entiendan no saldrán perjudicados. y por lo general será situado el último de todos. El atributo TABINDEX nos permitirá cambiar el orden.14). a pesar de tratarse de una extensión. Por defecto al pulsar esta tecla se pasa al siguiente control en el orden en que fueron insertados en el código HTML. El atributo NOTAB. este número representará la posición de ese control. La segunda extensión está formada por dos atributos: TABINDEX y NOTAB. por su parte indicará que este control está fuera de la lista. como el del ejemplo 1 (figura 12.

La última innovación que ha introducido Microsoft son los atributos READONLY y DISABLED. Veamos unos ejemplos con cajas de texto y botones de selección: <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> .Tras introducir el nombre. pero el usuario no podrá cambiarlo. Estos atributos funcionan exclusivamente con Internet Explorer 4. debemos usar el atributo DISABLED. pero no en los botones de elección o en las cajas de selección. Aunque en la documentación ofrecida por Microsoft no aparece así. para deshabilitar estos dos últimos controles. En general este atributo únicamente es usado con cajas de texto.0 (y posteriores).0 o posterior. Cuando una caja de texto usa este atributo podrá seguir mostrando texto (si usamos el atributo VALUE para poner un texto inicial). pero hoy por hoy. por ejemplo en una caja de texto podemos seleccionar con el ratón el texto que hay en ella. Debemos recordar que únicamente funcionarán con Internet Explorer 3. Este control tampoco podrá ser seleccionado. Quizá sea un fallo que se solucione en próximas versiones. La función del atributo READONLY es muy similar. cuando el usuario pulse el tabulador pasará a elegir el tipo de habitación. con la única diferencia de que el control actúa como tal. prácticamente actúa como si no estuviera. pero tampoco podrá modificarse el contenido. el atributo READONLY sólo funciona correctamente en las cajas de texto. Cuando usamos el atributo DISABLED en un control lo deshabitamos. después introducirá la clave y por último la dirección. por lo que debemos tener cuidado al usarlos. En el directorio ejem2 hemos incluido este ejemplo para que el lector pueda probarlo y compruebe el funcionamiento de los atributos TABINDEX y NOTAB.

Los atributos DISABLED y READONLY permiten deshabilitar un control de manera que sólo sirva para mostrar datos.20.0.READONLY: <INPUT TYPE="text" NAME="texto2" VALUE="Texto inicial" READONLY> <BR> <H2> Botones de elección </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 código con Internet Explorer 4. Figura 12. .

y por tanto no usarán INPUT. Ambos tienen sus propias etiquetas de HTML. En el directorio disabled se ha incluido este ejemplo añadiendo también las cajas de selección para que el lector pueda probarlos. 3. 3. las cajas de texto multilínea y los cuadros de selección. en esta ocasión será posible escribir varias líneas de . Cajas de texto multilínea: TEXTAREA Las cajas de texto multilínea 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 sucedía con las cajas de texto convencionales (<INPUT TYPE="text">). OTROS CONTROLES En esta sección hemos incluido dos controles ligeramente diferentes a los que hemos visto hasta ahora.En los casos de la caja de texto y el botón de elección se observa claramente que el navegador le da una apariencia distinta para resaltar que está deshabilitado.1.

Las áreas de texto (<TEXTAREA> </TEXTAREA>) permiten al usuario introducir texto de varias líneas como si de un sencillo editor de texto se tratara. <FORM> <TEXTAREA NAME="texto" ROWS="10" COLS="50"> Es la mejor que he visto nunca. . que consta de cuatro atributos:    NAME: El nombre que queremos asignarle al control. si deseamos que el usuario pueda escribir el texto de un mail .0: Figura 12. Este atributo es similar al atributo SIZE que vimos en las cajas de texto convencionales.21 podemos ver este código tal y como es mostrado por Internet Explorer 4. Veamos un ejemplo: Por favor haga sus comentarios sobre esta página. siendo obligatorio el uso de ambas.texto. este nombre será enviado junto con los datos del área de texto al mandar el formulario. lo que es muy útil para campos en los que se requiere una respuesta extensa. ROWS: El número de líneas de la caja de texto. las áreas de texto serán tremendamente útiles. Por ejemplo. </TEXTAREA> </FORM> En la figura 12. Como siempre. COLS: El número de caracteres visibles de cada línea. o escribir una serie de comentarios largos. La etiqueta usada para insertar este nuevo control es TEXTAREA. La etiqueta TEXTAREA está compuesta por una instrucción de inicio y una instrucción de fin. Entre ellas únicamente podrá insertarse texto llano (sin ninguna etiqueta HTML) y éste será mostrado como contenido inicial del área de texto.21.

Lynx muestra las áreas de texto como un conjunto de líneas (tantas como hemos indicado con el atributo COLS) sobre las que el usuario podrá escribir.Y en la figura 12. .22.22 el mismo visto con Lynx: Figura 12.

hasta que el usuario pulse ENTER. Nos referimos a los atributos DISABLED. que actualmente es soportada también por Internet Explorer . WRAP=SOFT: Este es el valor por defecto en Internet Explorer y provoca que el navegador pase automáticamente a la siguiente línea cuando se llega al final del área reservada. Si no pulsamos ENTER y llegamos al final de la línea el navegador debe decidir que hacer. el propio navegador vuelve a juntar todo el texto que fue escrito seguido en una sola línea. por lo general. del navegador que estemos usando. 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 línea. cambian automáticamente a la siguiente línea (text wrapping). de la misma manera que si hubiésemos pulsado ENTER nosotros mismos al llegar al final de cada línea. WRAP=HARD: Al igual que el valor anterior.23 vemos una página con los tres tipos de área de texto que hemos incluido en el directorio textarea para que el lector pueda probarlos.0. Algunos. En la figura 12. éste provoca que el navegador pase automáticamente a la siguiente línea. otros simplemente desplazarán el texto como ocurría con las cajas de texto y no cambiará de línea hasta que pulsemos ENTER y una minoría simplemente ignorará lo que pulsemos hasta que cambiemos de línea pulsando esta misma tecla. pero ahora la información se mandará al servidor Web con los saltos de línea. Esta decisión variará. antes de mandar el contenido. desplazándose hacia la izquierda si es necesario. TABINDEX.Pulsando sobre el área de texto podremos empezar a escribir. La etiqueta TEXTAREA también admite el atributo ALIGN y las extensiones introducidas por Microsoft que hemos visto anteriormente. La diferencia entre los dos últimos tipos no es apreciable por el usuario. . READONLY. y que nos permitirá tener un mayor control sobre la forma de actuar del navegador cuando se llegue al final de la línea. Esta extensión se basa en un nuevo atributo. pero con la diferencia de que ahora podremos pulsar ENTER cuando queramos para cambiar de línea. Sin embargo cuando se pulsa el botón de envío. como Internet Explorer 4. NOTAB y TITLE. El navegador Netscape introdujo una extensión al lenguaje HTML estándar. pero si existen diferencias en el mensaje que se envía al servidor. WRAP . al igual que hacíamos en las cajas de texto.

o mediante una persiana desplegable. que consta de una instrucción de inicio y de una instrucción de fin. Existen dos formas de mostrar estas opciones. como una lista con desplazamiento.2. Para insertar un cuadro de selección usaremos la etiqueta SELECT. OPTION. Para insertar estas opciones usaremos una nueva etiqueta. Su función será dar a elegir entre una serie de opciones de manera que el usuario pueda elegir una o varias de ellas. 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 elección"> </FORM> . Enseguida veremos cómo es cada una y cómo crearlas. que consta de una única instrucción. entre las cuales introduciremos las diferentes opciones para el usuario.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. Cuadros de selección Éste es el último control para crear formularios que nos ofrece el lenguaje HTML.

Por ejemplo. en los navegadores gráficos. Existe un atributo. y pulsando sobre una flecha se muestran el resto de opciones. Los cuadros de selección permiten mostrar varias opciones para que el usuario pueda elegir. es decir. En esta ocasión vemos su forma de persiana desplegable. si en el código 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> . Figura 12.Cuando se pulse el botón 'Enviar elección' se mandará al servidor el texto que sigue a la etiqueta OPTION. únicamente la opción actualmente seleccionada es visible.24.24. Como podemos ver en la figura 12. SELECTED. que se haya escogido (Por ejemplo 'color=Rojo'). que nos permitirá elegir la opción que debe estar seleccionada por defecto. este control suele ser mostrado. como una persiana desplegable.

25 vemos este ejemplo: . En ocasiones puede ser conveniente que todas. se mostrará una lista. como hemos visto hasta ahora. que podrá tener barras de desplazamiento si no caben todas las opciones disponibles. Si este valor es 1 (o no se usa el atributo SIZE).Al principio hemos comentado que los cuadros de selección pueden mostrarse como persianas desplegables. Para conseguir esto el lenguaje HTML ofrece el atributo SIZE. que determina el número de opciones que pueden ser vistas simultáneamente. se mostrará una persiana desplegable. o bien como listas con desplazamiento. Si es mayor. 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. sin tener que pulsar un botón. Hasta ahora sólo hemos visto el primer caso en el que únicamente la opción seleccionada es visible. o al menos algunas de las posibilidades sean mostradas directamente.

En el ejemplo de la lista de la compra esta posibilidad es de gran utilidad. Afortunadamente.25. por lo que no han sido necesarias barras de desplazamiento. Usando el atributo SIZE con un valor mayor que uno conseguimos que el cuadro de selección se muestre como una lista. es posible cambiar este comportamiento. sola una opción puede ser elegida simultáneamente. Si no indicamos lo contrario.Figura 12. usando el atributo MULTIPLE en el interior de la etiqueta SELECT. añadiendo este atributo al código anterior queda: <FORM> Lista de la compra:<BR> <CENTER> <SELECT NAME="compra" SIZE="6" MULTIPLE> <OPTION VALUE="Fruta"> Fruta <OPTION VALUE="Verdura"> . y permitir la selección de varias opciones. los cuadros de selección actúan como los botones de radio. es decir. En este caso el número de opciones es igual al tamaño que le hemos dado al control.

Para facilitar la tarea de los navegantes puede ser conveniente añadir a la página una nota explicativa sobre la manera de elegir varias opciones. <P> <INPUT TYPE="submit" VALUE="Enviar lista de la compra"> </FORM> La forma de seleccionar varias opciones simultáneamente dependerá del navegador que usemos. tal y como hemos hecho en este ejemplo.26 podemos ver como es mostrado Internet Explorer 4. . En general consistirá en mantener apretada una tecla mientras se seleccionan las diferentes opciones con el ratón.0: Figura 12. Usando el atributo MULTIPLE el usuario podrá seleccionar varias de las opciones que se ofrecen en la lista.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 selecciónenlas con el ratón. En la figura 12.26.

también podemos usar el atributo DISABLED en la etiqueta SELECT para desabilitarla. El navegador Lynx también es capaz de mostrar cuadros de selección. aunque solo funcionará con Internet Explorer 4. En lo que a extensiones se refiere. La etiqueta SELECT también consta del atributo ALIGN para elegir su alineamiento.27.Y en la figura 12.27 el mismo código. Igualmente podemos usar el atributo TITLE tanto en SELECT como en OPTION para incluir una descripción que será mostrada en un bocadillo cuando el usuario sitúe el .0. esta vez visto desde Lynx: Figura 12. por lo que podremos usarlo con libertad.

Usando nuestro editor de texto/HTMLhabitual abrimos el archivo plantilla. Como motivo hemos elegido crear una página más del sitio Web de la agencia de viajes Los Alpes.ratón sobre el control. Para concluir con los cuadros de selección sólo nos resta hacer un breve resumen de las etiquetas SELECT y OPTION. PRÁCTICA 6-FORMULARIO PARA "Los Alpes" Ahora que ya conocemos todos los controles existentes para crear formularios es hora de hacer uno con apariencia profesional. sino que los use de una manera adecuada.. en el segundo. Esto no quiere decir que use todos los controles existentes. que permita a los visitantes pedir que les envíen por correo un catálogo con todos los viajes disponibles. </SELECT> 4. cuidando la presentación y facilitando al usuario la introducción de datos. o sobre la opción específica. 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 opción" TITLE="texto_bocadillo"> .. en el primer caso. tarea en la que podremos demostrar nuestra capacidad para usar tablas para controlar la disposición de los elementos en una página Web. En primer lugar procederemos a escribir el código HTML necesario para crear los formularios y posteriormente nos dedicaremos a darle una apariencia profesional.  PASO 1: Para comenzar partiremos de las páginas que creamos en la práctica 5.htm donde creamos la . Podemos realizar los cambios sobre estas mismas páginas o crear una copia en otro directorio (en el directorio pract5 se encuentran de nuevo las páginas de esta práctica).

cambiando el título y la fecha y escribiendo un texto introductorio. Lo primero que haremos será adaptar el código de la plantilla a nuestros objetivos.htm .28: Figura 12. cambiando la fecha y el título de la página.plantilla de la página Web de Los Alpes. como podemos ver en la figura 12.29. Este es el aspecto inicial de la plantilla del sitio Web de Los Alpes.29): Figura 12.28. guardamos este documento con el nombre form. El aspecto de esta página es muy simple. . antes de realizar ningún cambio. El primer paso será modificar la plantilla. Sobre este nuevo archivo realizaremos los cambios. En primer lugar. y escribiendo un texto introductorio del formulario (ver figura 12.

p. teléfono. con la única excepción de un cuadro de selección para elegir el tipo de catálogo." SIZE="6" MAXLENGTH="5"> <P>Teléfono: <INPUT TYPE="text" NAME="telefono" SIZE="10" MAXLENGTH="9"> . del usuario. El código necesario para insertar estos controles es: <FORM> <P>Nombre completo: <INPUT TYPE="text" NAME="nombre" SIZE="30"> <P>Dirección: <INPUT TYPE="text" NAME="direccion" SIZE="50"> <P>Ciudad: <INPUT TYPE="text" NAME="ciudad" SIZE="20"> Código Postal: <INPUT TYPE="text" NAME="c. Dado que nuestro objetivo será recoger el nombre. dirección. usaremos en su mayoría cajas de texto. PASO 2: El siguiente paso consistirá en insertar los controles del formulario. etc.

Figura 12.30.jpg" VALUE="Enviar"> </FORM>    Y deberemos insertarlo a continuación del texto introductorio. Una vez realizados estos cambios y escrito el código anterior obtenemos el resultado que vemos en la figura 12. Este código no tiene demasiada complejidad. usar un botón de envío personalizado. Este y otro material necesario para la práctica puede encontrarse en el directorio pract6/material. acorde con la apariencia del Web.<P>Fax: <INPUT TYPE="text" NAME="FAX" SIZE="10" MAXLENGTH="9"> <P>Email: <INPUT TYPE="text" NAME="email" SIZE="30"> <P>Catálogo: <SELECT> <OPTION VALUE="nacional"> Nacional <OPTION VALUE="internacional" SELECTED> Internacional <OPTION VALUE="completo"> Completo </SELECT> <P> <INPUT TYPE="image" BORDER="0" SRC="img/enviar. En ambos casos hemos usado el atributo MAXLENGTH para imponer esta limitación. además. . En esta página hemos decidido.30. con lo que evitamos posibles equivocaciones de los usuarios. pudiendo destacarse la limitación a cinco caracteres para el código postal y a nueve el del número de teléfono y fax. Usando los conocimientos adquiridos en este capítulo utilizamos las etiquetas INPUT y SELECT para crear los controles del formulario.

En un Web real un buen diseño incita a un mayor número de navegantes a rellenar el formulario.  PASO 3: Podríamos 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 capítulos anteriores hemos aprendido a usar tablas para controlar la disposición de los elementos y es hora de usar estos conocimientos para dar a nuestro formulario una apariencia mucho más profesional. .

Tras hacer esto en nuestro formulario concluimos que sería adecuado usar una tabla de nueve filas y tres columnas. Usando una tabla de nueve filas y tres columnas controlamos la disposición de todos los elementos de la tabla para conseguir un diseño profesional. Una vez hecho el boceto es hora de usar este lenguaje para plasmarlo sobre una página Web.31 mostramos el formulario con su nueva apariencia mostrando los bordes de la tabla. Para realizar el diseño suele ser conveniente hacer un boceto sobre el papel o con un programa de dibujo.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 que el lector pueda apreciar la estructura de la tabla: Figura 12.Para empezar cambiamos el titular por una imagen ( pract6/material/catalogo. . la segunda contendrá el control en sí y la tercera servirá únicamente como margen derecho. La primera columna contendrá el texto indicativo del formulario alineado a la derecha (<TD ALIGN=" right">). donde no existen las limitaciones del lenguaje HTML.31. En la figura 12. De las filas la primera es para el título y para el texto introductorio. mientras que el resto son para cada campo del formulario.

.Otro aspecto que podemos comentar es que el ancho total de la tabla será de 600 pixeles. Para que también quede bien en monitores grandes la centramos usando la etiqueta CENTER. con lo que conseguimos que se visualice correctamente en todo tipo de monitores. Por otro lado. para crear cierta separación entre los diferentes campos podemos usar el atributo CELLSPACING. con el que controlamos la distancia en pixeles entre las diferentes celdas.

La realización de este código es un ejercicio muy importante. ya que este tipo de retoques es muy común en las páginas Web reales. en el directorio pract6 se ofrece una posible solución. . En la figura 12.32. Por esta razón dejamos al lector que intente mejorar el diseño de la página usando las pistas que le hemos dado. Este es el aspecto final del formulario una vez introducido en la estructura con frames del sitio Web creado en la práctica 5.32 podemos ver la página completa una vez introducida en la estructura de frames: Figura 12. En cualquier caso.

.

COMO USAR LOS DATOS DE UN FORMULARIO Una vez dominamos la creación. Este atributo puede tomar dos valores GET y POST.urlencoded. 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 añadírselos a la etiqueta <FORM>. y diseño. ¿Cómo se envía información a un CGI?. que se ejecutan en el servidor y que pueden estar escritos en prácticamente cualquier lenguaje de programación.miservidor. Veamos un ejemplo: <FORM METHOD="post" ACTION="http://www.30 es apreciable. Además debe usarse otro atributo. pero la etiqueta FORM consta de un atributo llamado ACTION donde debemos especificar la dirección URL del programa CGI donde deben enviarse los datos. El navegador mandará a este programa los datos del formulario codificado con un código especial.Código para insertar los distintos controles --> </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. Requiere la puesta en acción de unos programillas llamados CGIs. En algunos de los ejemplos de .es/cgi-bin/ programaCGI"> <!-. de formularios en las páginas Web probablemente nos estamos preguntando ¿cómo puedo hacer que me lleguen los datos?. Esta respuesta será en general o bien la dirección de una página o bien una página creada por el propio CGI. Estos programas deben encontrarse en algún lugar del servidor Web. mientras que el segundo será el escogido para formularios donde la cantidad de información es grande. Al enviar un formulario a uno. METHOD . omitiendo todos los detalles. podemos decir que el primero se usa con formularios pequeños. para indicarle cómo se mandarán estos datos. La respuesta a esta pregunta va mas allá del lenguaje HTML. 5.La mejora en apariencia respecto a la que veíamos en la figura 12. Hasta ahora habíamos omitido este detalle. cuyo tipo MIME es application/x-www-form. éste procesará la información y contestará con la respuesta oportuna.

Una alternativa a los CGIs son los lenguajes de script. pero puede ser útil en ocasiones. Para conseguir que los datos de un formulario sean enviados por e-mail debemos usar las etiquetas ACTION. Si no queremos usar ninguna podemos escribir: <FORM ENCTYPE="text/plain" METHOD="post".. 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 dirección de correo electrónico . pero la necesidad de conocer un lenguaje de programación nos lleva a buscar métodos alternativos que serán suficientemente buenos si no tenemos demasiados requerimientos.. Formularios sin CGIs Sin duda los programas CGIs permiten realizar muchas más cosas que cualquier otro método.. tiene un atributo. METHOD y ENCTYPE de la siguiente manera: <FORM ACTION="mailto:milogin@midireccion. Hasta entonces veremos algunos métodos alternativos que nos permitirán hacer uso de los formularios que hemos creado sin necesidad de CGIs. Esto es suficiente para el ejemplo de la práctica 6. ENCTYPE. al no ser necesario decodificar el mensaje. no necesitamos interactuar con él en manera alguna. --> . que nos permitirá cambiar el tipo de codificación. que nos permitirán interactuar con el navegante sin hacer uso del servidor.. 5.este capítulo hemos visto ejemplos de como funciona esta codificación.> </FORM> No usar codificación podrá ocasionar problemas al enviar caracteres especiales como son las letras acentuadas.es" ENCTYPE="text/plain" METHOD="post"> <!-. La etiqueta FORM. pero será cubierta en detalle más adelante debido a la gran importancia que tienen estos programas en la programación de Internet y en concreto de páginas Web. ya que simplemente necesitamos conocer los datos del usuario para mandar el catálogo.1. La creación de los programas CGI excede los límites de esta sección dedicada al lenguaje HTML.

33) que la página quiere enviar un e-mail . Como método alternativo a los CGIs pueden mandarse los datos del formulario por correo electrónico. Al pulsar sobre el botón de envío el navegador advertirá al usuario (ver figura 12. que en general será la nuestra como creadores del Web. Esto es conveniente para facilitar la lectura de los mismos. que debe ser sustituida por aquella a la que queramos enviar los datos. De hecho. . Figura 12. pero no necesaria.es.</FORM> Donde hemos usado como ejemplo la dirección de correo electrónico milogin@midireccion. si el usuario acepta enviará los datos del formulario. en algunos casos aislados puede ser preferible no usar este atributo y usar la codificación por defecto.33. En ese caso el navegador pedirá al usuario confirmación de la acción. La función del atributo ENCTYPE="text/plain" es enviar los datos sin ninguna codificación.

Los cambios respecto a los controles anteriores no son muchos. --< </FORM< En lo que al control en sí se refiere usaremos de nuevo la etiqueta INPUT. El navegador lo mostrará como una caja de texto junto con un botón que permitirá al usuario buscar entre sus archivos el que quiere enviar. Un ejemplo con el código completo sería: .miservidor.. Con este nuevo sistema será posible enviar ficheros de todo tipo. Cuando. En primer lugar debemos hacer uso del atributo ENCTYPE especificando que los datos que se van a enviar desde este formulario al servidor serán de tipomultipart/form-data. después debemos usar ACTION para especificar la dirección de un programa del servidor Web que sea capaz de recoger este archivo y realizar las acciones oportunas con él. por lo que podemos usarlo con suficientes garantías.es/cgi-bin/ cogefichero"< <!-. Con este método alternativo podemos empezar a usar todos los formularios que hemos visto hasta ahora. esta vez con TYPE="file". ENVÍO DE FICHEROS USANDO FORMULARIOS Como apéndice a los formularios incluimos un método introducido por Netscape y aceptado por el estándar HTML 3. soporta esta característica. por ejemplo: <FORM ENCTYPE="multipart/form-data" ACTION="http://www. estudiemos a fondo los CGIs veremos como nuestras posibilidades se incrementan enormemente..2 que permite a los visitantes de una página mandar un archivo presente en su ordenador a la página Web. Internet Explorer y Opera. el método alternativo que envía por correo electrónico los datos del formulario puede no funcionar con algunos navegadores. una imagen o un programa..Al contrarió que los CGIs. más adelante. y practicar con ellos. pero no existía ninguna manera de mandar. incluyendo Netscape Navigator . Sin embargo actualmente un gran número de ellos. 6. por ejemplo. Con los controles que hemos visto hasta ahora se podía enviar un archivo de texto copiándolo a un área de texto.

miservidor..'.es/cgi-bin/ cogefichero"> Enviar el fichero: <INPUT NAME="fichero_usuario" TYPE="file"> <INPUT TYPE="submit" VALUE="Enviar fichero"> </FORM> Usando este código se obtiene el resultado que observamos en la figura 12.33 en la que se muestra también el cuadro de diálogo que ofrece Internet Explorer 4 cuando se pulsa sobre el botón 'Examinar.<FORM ENCTYPE="multipart/form-data" ACTION="http://www. Hasta aquí es sencillo. Figura 12. Como método alternativo a los CGIs pueden mandarse los datos del formulario por correo electrónico. En ese caso el navegador pedirá al usuario confirmación de la acción.. La parte más difícil en el envío de ficheros desde páginas Web consistirá en crear un programa para el servidor que sea capaz de recibirlo.33. .

Por lo general puede ser conveniente obtener alguno hecho por profesionales que realice.internic.net/rfc/rfc1867. o al menos nos ayude.bio.uk/cgi-lib/ Si está interesado en adquirir información para crear el programa usted mismo puede obtener toda la información necesaria en el servidor FTP:  ftp://ds. Para ello recomendamos al lector que se dirija a la dirección:  http://www.ac. a realizar esta labor.cam.txt .

<script type="text/javascript"> var d = new Date(). Para usar varias encadenadas hazlo de la siguiente forma: Al usarlo se mostrará: Fecha: 11 Dia de la semana: 0 Mes (0 al 11): 7 Año: 2013 Hora: 18 Hora UTC: 1 Minutos: 28 Segundos: 39 Para mostrar la diferencia en minutos con la zona horaria de Greenwich utiliza getTimezoneOffset(): <script type="text/javascript"> var d = new Date().getDate()). document.write(d.write(d. </script> Para escribir la hora utiliza getHours(): <script type="text/javascript"> var d = new Date().write('<br>Diferencia de GTM en minutos: . document.getHours()). document. </script> Así sucesivamente se puede usar con cada función.

• La función getMonth() devuelve el mes comprendido entre el 0 y el 11. <script type="text/javascript"> var d=new Date(). Para mostrar el resultado de esas y otras funciones correctamente. var dia=new Array(7). pero en un formato entre el 0 y el 6. o sea estándar para todos los equipos e idiomas. por lo que algunos de ellos necesitan ser convertidos antes de mostrarlos. donde 0 corresponde a Enero. así como la zona horaria. Todos los parámetros de Javascript son globales. dia[2]="Martes". dia[0]="Domingo". . se pueden emplear algunos trucos. donde el 0 corresponde al domingo. dia[1]="Lunes".getTimezoneOffset()). dia[3]="Miercoles". por ejemplo: • La función getDay() devuelve el día de la semana.'+d. dia[4]="Jueves". </script> En todos los casos la función new Date() como primer paso determina la hora y fecha actual de acuerdo a lo que indica Windows. Trucos para convertir el resultado de funciones • En el siguiente ejemplo se traducen los días de la semana a los nombres es español creando un array.

dia[6]="Sabado". mesok[10]="Noviembre". var m2 = mm. document. mesok[4]="Mayo". mesok[2]="Marzo". </script> • Si deseas que se muestre el nombre del mes entonces utiliza: <script type="text/javascript"> var mm=new Date(). se puede utilizar: <script type="text/javascript"> var hoy = new Date(). mesok[5]="Junio". var mes = (m < 10) ? '0' + m : m. document. mesok[0]="Enero". var m = hoy. </script> Al usarlo se mostrará: Hoy es: Domingo • En el caso del mes. mesok[8]="Septiembre".getMonth() + 1.getDay()]).dia[5]="Viernes". mesok[9]="Octubre".getMonth() + 1. mesok[7]="Agosto".write('Este mes es el número: '+mes). var mesok=new Array(12).write("Hoy es: " + dia[d. mesok[1]="Febrero". en que la funcion getMonth() siempre devuelve el resultado con un atraso de una cifra. mesok[3]="Abril". mesok[6]="Julio". var mesok = (m2 < 10) ? '0' + m2 : m2. .

mesok[11]="Diciembre".htm')"> para mostrar otra pagina <input type="button" value="Abrir" onclick="window. El tiempo que llevas ya en esta página: Ejemplos prácticos de códigos para insertar en las paginas web Los siguientes cuadros de texto contienen códigos de varios ejemplos prácticos diferentes para usar en las páginas web.getMonth()]).open('Aqui la direccion que quieres que se abra')" /> . cópialo y pégalo en el lugar del código HTML donde deseas que se muestre. document. Se ha tratado de incluir solo una selección de los más sencillos.write("Este mes es: " + mesok[mm. para evitar que influyan en el rendimiento de la página. Para mostrar otra pagina en html <INPUT TYPE="button" VALUE="botón" onclick="open('pagina. </script> Un ejemplo interesante del uso de JavaScript para usarlo en tu blog o sitio web. da un clic encima del que te interese.

"Jueves."Septiembre"."."Abril"."Viernes."."Diciembre") document."Martes.") var montharray=new Array("Enero".getMonth() var daym=mydate."Sábado.".Fecha y hora <font size="1"> <script languaje="JavaScript"> var mydate=new Date() var year=mydate."Agosto"."Octubre" ."Noviembre".".getDate() if (daym<10) daym="0"+daym var dayarray=new Array("Domingo."Marzo"."Febrero"."Julio"."Lunes.write("<font color='black' face='Georgia' style='font-size:8pt'>"+dayarray[day]+" "+daym+" de "+montharray[month]+" de "+year+"</font>") </script></font> Boton Utilización de la etiqueta <BUTTON> ."Mayo".getYear() if (year < 1000) year+=1900 var day=mydate."."Miércoles.getDay() var month=mydate."."Junio".

Veamos un ejemplo: <button> Hola esto es un <b>botón</b> <br> <br> Puedo poner saltos de línea en él! <hr> Y otras cosas <br> <img src="http://www.desarrolloweb.gif" width="261" height="35" alt=""> </button> Que tendría este aspecto: Hola esto es un botón Puedo poner saltos de línea en él! Y otras cosas Como se puede ver. de apertura y cierre. permite aportar bastante creatividad a los botones que incorporemos en páginas web. es decir.com/images/logo_desarrollo_web. Tiene la particularidad que se pueden colocar dentro del botón los contenidos que se desee. se coloca el contenido que irá dentro del botón.La etiqueta BUTTON se utiliza con una apertura de etiqueta <BUTTON> y una de cierre </BUTTON>. negritas o lo que podamos necesitar. que sólo permite colocar texto dentro del botón: <input type="button" value="texto del botón"> Atributos de BUTTON Ahora veamos rápidamente los atributos que podemos utilizar:  name: sirve para darle un nombre al botón. entre la etiqueta de apertura y cierre se puede colocar texto a voluntad. Al enviarse el formulario se enviarán los datos del botŽn bajo este nombre. Entre las dos etiquetas. . pero también otras etiquetas HTML. como imágenes. mucho más que la etiqueta INPUT. saltos de línea.

tiene algunas funcionalidades interesantes que podrían venirnos bien el algún momento. El valor es lo que se enviará por formulario. salvo Internet Explorer. el texto que haya entre <BUTTON> y </BUTTON> con todas las etiquetas que pueda haber dentro. que le da por defecto valor "submit". en el momento del submit. 2. el atributo type de BUTTON tiene el valor "button" en todos los navegadores. Desde desarrollo web . la segunda tiene más difícil solución. Por lo demás. Por defecto.com/reference/tags/input. la etiqueta BUTTON tiene diversas interpretaciones por parte de los distintos navegadores del mercado. type: sirve para indicar el tipo de botón. Es por ello que lo más recomendable es no basar el funcionamiento de scripts en formularios en esta etiqueta. que veremos a continuación. Esto lo solucionamos simplemente colocando siempre el atributo type con el valor que queramos. que podría ser: button para un botón normal. Los demás navegadores envían el atributo value que tenga el botón.  Incompatibilidades entre navegadores con la etiqueta BUTTON Lamentablemente. Internet Explorer envía como value del botón lo que hay escrito en él. es decir. aunque sólo hacen esto cuando el botón es de type="submit" y si se ha enviado el formulario pulsando ese botón. 1. Pero ojo aquí porque puede haber diferencias entre navegadores. De estas dos incompatibilidades.htmlquick.  value: para especificar el valor de un botón. disabled: este atributo sirve para hacer que el botón se encuentre deshabilitado.com advertimos que se debe tener cuidado cuando la usemos. Ejemplos Código <button type="button"> <p><strong>El contenido HTML</strong> está permitido en este botón</p> <p>También estudia al <a href="http://www. porque estas incompatibilidades podrían perjudicar el buen funcionamiento de la página. reset para un botón de borrado de datos del formulario y submit para un botón de envío de formulario.</p> </button> Vista . Cuando se envía un formulario con un botón creado con la etiqueta BUTTON. porque deberíamos saber el navegador que está utilizando el usuario para poder saber el comportamiento del BUTTON. al menos hasta la versión 7.html">elemento HTML input</a>.

¿Cómo se escribe el JavaScript? El elemento <SCRIPT> Los scripts de JavaScript se escriben de forma similar a los de VBScript. Espero haberte ayudado. Y saldría Bienvenido a la web Juan José. Hola.location alert ( variable_1 ) } --> </script> <form><center><input type="button" value="Click aquí para observar el URL de esta página" onclick="ver( )"></p> </center> </form> alerta ( MyVar1 + '' + MyVar2 ) .El contenido HTML está permitido en este botón También estudia al elemento HTML input. alert(frase). y esta es una de las causas más habituales de . bien la manera de hacerlo es por ejemplo si tienes una variable nombre: nombre = "Juan José". si sólo quieres poner la variable sería simplemente frase ="Bienvenido Juan José". pero su sintaxis es mucho más estricta. Un saludo. alert ("Bienvenido a la web "+nombre). <a href="#" onmouseDown="alert('tu mensaje')">su texto aquí</a> CON JAVASCRIPT SE PUEDE CREAR UNA FUNCION Y LUEGO LLAMARLA <script language="Javascript"> <!-function ver( ){ variable_1 = window.

error. Estas barras son el indicativo de que lo que viene a continuación es un comentario también. puede escribirse el código en los dos sitios a la vez.write("Esto ha sido escrito por JavaScript") // --> </SCRIPT> Fíjate en que dentro de la etiqueta HTML <SCRIPT> y antes del código JavaScript propiamente dicho. y hay que ponerlas para evitar que el intérprete JavaScript tome el cierre del comentario html como una instrucción y produzca un error de sintaxis. si escribimos . claro. Los scripts pueden escribirse tanto en la <HEAD> como en el <BODY> de la página. Puesto que este elemento HTML es el mismo que se emplea con otros lenguajes. Document. si ello es necesario.. es preferible escribir todas las declaraciones y sentencias al principio de la página.. es preciso indicar al navegador el lenguaje que se va a utilizar al definir el script. */. Por claridad a la hora de revisar el código. Sea por ejemplo: <SCRIPT LANGUAGE=JavaScript> <!-document. en la<HEAD>. Esto es válido siempre que el comentario vaya a tener una sola línea. Si va a tener más se utilizarán /* . a diferencia de VBScript. pero si se desea escribir más de una instrucción en la misma línea hay que separarlas con . por ejemplo. no se pueden escribir mayúsculas alegremente. aunque esto dependerá de las necesidades del programa. Esto se hace para evitar que los navegadores que no son capaces de interpretar el script muestren el código. Otra cosa importante son las dos barras (//) que aparecen justo antes del cierre del comentario html: -->. No es lo mismo MiFuncion() que mifuncion(). al final de cada instrucción. y si escribimos. Así: /* Comentario 1 Comentario 2 */ JavaScript entiende que una instrucción ha terminado cuando encuentra un retorno de línea. En JavaScript.Write() no funcionará. pero del propio JavaScript en este caso. aunque no ocurre nada si se escribe. excepto la última que no lo necesita. Por ejemplo. aparece el símbolo del comentario HTML <!--. También. Todo el código deberá ir escrito entre <SCRIPT> y </SCRIPT>. como VBScript.

Otra particularidad de la sintaxis de JavaScript son las llaves: { }. Pueden anidarse si el programa va a tener varios bloques. y siempre deben ser pares. en la siguiente función: <HTML> <HEAD> <TITLE>Capturar evento de boton</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-function mensaje() { .write("Esto ha sido escrito por JavaScript desde BODY") // --> </SCRIPT> <P> Esto ha sido escrito por HTML.write("Esto ha sido escrito por JavaScript desde HEAD <BR>") // --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE=JavaScript> <!-document.<HTML> <HEAD><TITLE>Prueba de JavaScript</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-document. y son obligatorias al definir funciones. Por ejemplo. Estas llaves hay que utilizarlas siempre que el bloque de declaraciones vaya a tener más de una línea. </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.

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. Al igual que se puede hacer con las hojas de estilo en cascada (CSS).js Sea el ejemplo anterior: <HTML> <HEAD> . normalmente tiene la extensión . JavaScript permite que todo el código (o parte de él) esté en un fichero independiente de la página html.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> Fíjate en que la función es invocada al pulsar el botón del formulario. pero también es posible escribir directamente la instrucción en el punto de captura en lugar de utilizar el elemento <SCRIPT>. sin necesidad de editar muchos ficheros diferentes. capturando un evento: onClick. lo que permite modificar y mantener más rápidamente la programación. El fichero que contiene el código JavaScript. la función es muy simple.

y por tanto es necesario tener cuidado con el orden en que se escriben las variable y las funciones que serán invocadas desde el núcleo del programa. Por . Variables Las variables son espacios de memoria que contienen algun tipo de dato. es decir. se empleará este sistema siempre que sea posible. ya que en ese momento la función todavía no existe. 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 números. Al escribirlos. Recuerda que este es un lenguaje interpretado. que las instrucciones se van cargando en memoria a medida que se leen. recordar que no es lo mismo MiVariable que mivariable. Para mayor claridad de los ejemplos. como todos los programas. en este fichero no hay que incluir el elemento <SCRIPT>.js"></SCRIPT> </HEAD> <BODY> <FORM NAME="Formulario1"> <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba" onClick="mensaje()"> </FORM> </BODY> </HTML> Donde el contenido de fichero. lo que excluye letras acentuadas. etc.<TITLE>Capturar evento de boton</TITLE> <SCRIPT LANGUAGE=JavaScript src="fichero. Los programas JavaScript. se comienzan definiendo las variables. cedillas. Por ejemplo. En JavaScript no hay constantes como en VBScript. si una instrucción que llama a una función se escribe antes que la función llamada. se producirá un error. después las funciones. sino solamente instrucciones JavaScript. si se utilizan mayúsculas. si la hay.js es: function mensaje() { alert("Esto es un mensaje de JavaScript") } Como puedes ver. al que se accede mediante el nombre que se le asigne a la variable. eñes. y a continuación la estructura del programa propiamente dicha.

Dependiendo del ámbito de actuación de la variable. directamente sus valores. El literal es un concepto a veces confuso. Si. que impondrá su valor allí. en ese mismo momento. y si se desea. Cuando una variable es definida con la instrucción var en un bloque acotado por llaves { } (ámbito). salvo que sea estrictamente necesario. la instrucción var es similar a la instrucción Dim de VBScript. y se la denomina variable de ámbito local. if. se le asigna un valor. Se pueden cambiar los tipos de datos que contienen en cualquier momento sin necesidad de redefinir la variable. Las variables pueden contener cualquier tipo de dato. habrá que utilizar. números. la instrucción var en el momento de crearla. no importando dónde ha sido declarada. Si se declaran dos variables con el mismo nombre. Como ya sabrás. como return. Variable3 Como puedes ver. Variable2. claro. o no. simplemente se escribe su nombre. no puedes crear una variable con ninguna palabra reservada del lenguaje. 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.supuesto. valores booleanos. decimos que variable1 = "A" y variable2 = "B" podemos acceder a "A" o a "B" bien invocando el nombre de las variables correspondientes. excepto en el área donde "reina" la local. simples ' o dobles ". No es buena idea declarar variables duplicadas. . o invocando sus literales. Para crear una variable. y estará disponible en cualquier lugar de la página (a partir de donde ha sido declarada. es una variable de ámbito global. o incluso objetos. por ejemplo. pero una global y la otra local. etc. Por ejemplo: var MiVariable = 2004 También es posible definir varias variables en una misma línea: var Variable1. case. como cadenas. la global será accesible desde toda la página. A los valores contenidos en las variables se les denomina literales. Si se declara sin la instrucción var. es decir. pero no antes). solamente estará disponible en ese bloque. un string o cadena es cualquier contenido acotado por comillas.

sino como un carácter normal. lo que provocaría un error de sintaxis. se incluye otra subcadena acotada por las otras comillas. es decir. Para resolver este problema se utilizan los "escapes". no como el cierre de las comillas. . Así: mivariable = "Prueba de " + "\"concatenado\" " + '\'doble\'' Y este sería el resultado: Prueba de "concatenado" 'doble' Esto mismo también es posible hacerlo usando el código hexadecimal del carácter deseado. el mismo caracter que se quiere escribir precedido de \ Esto evita que sea interpretado. o los dos. puede ocurrir que dentro de la cadena haya que poner uno de estos signos. Aplicándolo a las comillas sería así: mivariable = "Prueba de " + "\x34concatenado\x34 " + '\x27doble\x27 ' Además de las comillas y el código hexadecimal ya vistos. se puede "escapar" la misma barra inclinada: \\. son válidas 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. el escape funciona al revés que en las comillas o la barra inclinada: En efecto. Fíjate que en el caso de estos dos últimos. la \t para insertar un tabulador horizontal. no se considera un concatenado. y la \n para forzar una nueva línea. Por ejemplo. tanto simples como dobles. Normalmente se utiliza la codificación hexadecimal sólo con los caracteres que no admiten el "escapado" (que son casi todos).mivariable = "Hola" También es posible concatenar dos o más cadenas usando el signo + : mivariable = "Prueba de " + "concatenado" Y este sería el resultado: Prueba de concatenado Si dentro de una cadena acotada por comillas.

o el punto. se codifica incluso el espacio en blanco (%20). el guión. y además. Por ejemplo.write("C:\temp") se obtiene C: emp Como puedes ver. por lo que su utilidad se limita al formateo de texto dentro del entorno JavaScript exclusivamente.mientras que con las comillas el escape pretende que no se interprete su cualidad para abrir o cerrar cadenas. si se escribe la típica ruta del directorio temp en el disco C: document. se ha interpretado como indicador de tabulación.write(unescape("%24%20%26%20%25%20@")) Se obtiene: $ % & @ . Recuerda también que tanto el tabulador como la nueva línea no tienen efectos visibles en los navegadores. deberá hacerse escpándose a sí misma.write(escape("$ % & @")) Se obtiene: %24%20%26%20%25%20@ Como puedes ver. en este caso el error es doble. un número. al estar junto a la t. Y con su inversa: document. el subrayado o la arroba (Az 1-9 _ . ya que la barra no puede aparecer sin escape como tal carácter. si se escribe: document. Por ejemplo. con t o n lo que se hace es darles las cualidades que no tienen para producir un tabulador o un salto de línea. es decir cualquier caracter que no sea una letra (mayúsculas o minúsculas). La función escape() devuelve el código ASCII decimal de los caracteres especiales. Todos los demás serán codificados. si en una cadena hay que escribirla. @). 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 intrínsecas de JavaScript: escape() y su inversa: unescape(). Al ser la barra inclinada \ el controlador de escapes.

print()">Imprimir</a> . no es necesario abrir otra ventana.Imprimir Para imprimir la pagina sin que aparezca el boton imprimir.style. 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.print() //reaparece el boton document.getElementById("btnImprimir"). puede estar el boton en la misma ventana.style.getElementById("btnImprimir").display='inline' } <a href="javascript:window.display='none' //se imprime la pagina window.

getDay().getHours(). . PARA MOSTRAR LA FECHA 4. var hora=quehora.getMinutes().getSeconds()..getDate(). var minutos=quehora.PARA MOSTRA LA HORA EN UN ALERT <script> function quehoraes(){ var quehora=new Date(). alert(" } </script> </head> <body onload="quehoraes()"> son las : "+ hora + " : " +minutos + " : " + segundos). var mes=fecha. var diasemana=fecha.getMonth() +1 . var segundos=quehora. var diames=fecha.CODIGO COMPLETO <script language="javascript"> var fecha=new Date().

textomes[10]="Octubre". textomes[12]="Diciembre". . var textomes = new Array (12). textosemana[6]="Sábado". textomes[7]="Julio". textosemana[1]="Lunes". textomes[1]="Enero". textomes[5]="Mayo". textomes[7]="Agosto". textomes[3]="Marzo". textosemana[2]="Martes". textomes[4]="Abril".getFullYear(). textomes[11]="Noviembre". textosemana[0]="Domingo". textosemana[3]="Miércoles".var ano=fecha. textomes[9]="Septiembre". textosemana[4]="Jueves". textomes[2]="Febrero". textosemana[5]="Viernes". textomes[6]="Junio". var textosemana = new Array (7).

write("Dia mes: " + diames + "<br>"). Benjamin nos enseña como mostrar la fecha actual en nuestras webs por medio de JavaScript.document. Como sabéis 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.write("Dia semana: " + diasemana + "<br>"). " + diames + " de " + textomes[mes] + " de " + ano + "<br>"). <script language="javascript"> Aquí escribiremos nuestro script .write("Fecha completa: " + fecha + "<br>"). document.write("Año: " + ano + "<br>"). utilizando diferentes formas. document. document.write("Mes: " + mes + "<br>"). document. document. Vamos en este pequeño manual a ver varias formas de mostrar en pantalla la fecha actual.write("Fecha: " + textosemana[diasemana] + " " + diames + "/" + mes + "/" + ano + "<br>").write("Fecha: " + diames + "/" + mes + "/" + ano + "<br>").write("Fecha: " + textosemana[diasemana] + ". document. </script> En este interesante tutorial. document.

. ya que la fecha que nos ofrecerá el ordenador será siempre de tipo Sat Dec 9 11:37:51 UTC+0100 2006 Y esto.</script> Hay dos partes bien diferenciadas dentro de nuestro script 1. 1.. no es lo que queremos que aparezca en nuestra página. 9 de Diciembre de 2006 por lo que necesitamos cuatro variables a las que llamaremos: textosemana que en este ejemplo sería = sábado . Vamos a crear una fecha del tipo: Sábado..la creación de variables 2.la impresión en pantalla Para la creación de las variables trabajaremos con varios métodos del objeto Date.CREACION DE VARIABLES A cada parte de la fecha. tenemos que asignarle una variable distinta. obviamente.

diames que en este ejemplo sería = 9 textomes que en este ejemplo sería = diciembre ano que en este ejemplo sería = 2006 para la creación de esta fecha (o para otro tipo de impresión tipo 9/12/2006) necesitaremos otras variables. completándose la lista anterior con la siguiente: diasemana que en este ejemplo sería = 6 (el día de la semana en número. .getDate(). a la variable “diames” le asignamos el día del mes (del 1 al 31) var diasemana=fecha. la más importante: fecha Empezamos con la creación de las variables: var fecha=new Date(). a la variable “fecha” le asignamos el valor de la fecha actual var diames=fecha. el 0 para el domingo. el 6 para el sábado) mes que en este ejemplo sería = 12 Y por supuesto.getDay().

ahora le asignamos valores a los “siete posibles textosemana”: .a la variable “diasemana” le asignamos el día de la semana en número.getFullYear(). 6 el sábado) var mes=fecha. …. 1 el lunes. Crearemos primero la matriz para el día de la semana. Aplicamos la teoría. y a la variable que vamos a utilizar la llamamos textosemana. Para esto usaremos una matriz. Lo único que nos queda es saber (en texto) el día de la semana y el día del mes. La sintaxis de la matriz es la siguiente: var nombredelamatriz = new Array(numerodeceldas). el formato sería: var ano=fecha getYear(). quedará de la siguiente forma: var textosemana = new Array(7). Como la semana tiene siete días.getMonth() +1 . Si quisiéramos tener el año con dos cifras. siendo 0 el domingo. a la variable “ano” le asignamos el año con cuatro cifras. Con esto ya tenemos toda la fecha desglosada. a la variable “mes” le asignamos el día del mes en número (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.

recordar que lo que el ordenador nos dará originalmente es diasemana que tendrá valores entre 0 y 6. textosemana será igual a “Sábado”. . textomes[5]="Mayo". textosemana[1]="Lunes". textomes[1]="Enero". Hacemos exactamente lo mismo con el nombre del mes: var textomes = new Array (12).textosemana[0]="Domingo". textosemana[2]="Martes". textosemana[6]="Sábado". textomes[4]="Abril". textosemana[3]="Miércoles". textosemana será igual a “Domingo” … Cuando diasemana sea igual a 6. textomes[2]="Febrero". textomes[3]="Marzo". textosemana[5]="Viernes". textosemana[4]="Jueves". Lo que hacemos con esto es muy simple: Cuando diasemana sea igual a 0.

Os doy la forma para varios tipos de impresión de fecha: 9/12/2006 document. textomes[11]="Noviembre". recordar que aunquegetMonth(). Sábado 9/12/2006 . donde entre los paréntesis tendremos que decirle qué es lo que ha de imprimir en pantalla. textomes[12]="Diciembre". textomes[10]="Octubre".IMPRESIÓN EN PANTALLA Para escribir la fecha en la pantalla utilizaremos el document. siempre utilizando comillas para el texto que queremos que escriba y sin comillas cuando queramos que aparezca la variable. nos devuelve el mes de 0 a 11. a la variable mes le hemos sumado 1.write("Fecha: " + diames + "/" + mes + "/" + ano + "<br>")..write().textomes[6]="Junio". textomes[9]="Septiembre". textomes[7]="Julio". textomes[7]="Agosto". 2.

document.write("Fecha: " + textosemana[diasemana] + " " + diames + "/" + mes + "/" + ano + "<br>");

Sábado, 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 (más o menos). La verdad es que lo único que hay que hacer es copiar y pegar (al final teneis el script completo). Pero, ¿cómo utilizo esto en mi página que estoy haciendo con Dreamweaver.

Cuando tengáis vuestra página hecha, habréis dejado una celda donde queréis poner la fecha. Es tan fácil como lo siguiente:

Seleccionas el script y lo copias en el portapapeles (botón derecho del ratón > copiar) Recuerda que el script que tienes al final te imprimirá la fecha de varias formas; selecciona la que te interesa y borra las demás

En vista diseño, colocas el cursor donde quieres que aparezca la fecha Pasas a vista código Edición > Pegar Vuelves a vista diseño

Recuerda que no verás en vista diseño la fecha, pero sí al verla en el navegador

Salto de línea en un mensaje de alert

<html> <head> <script language="JavaScript"> function mostrar(){ alert("Este es un mensaje de alerta\n con mas de una línea"); } </script> </head> <body> <form name="frm"> <input type="button" value="Alert multilínea" onclick="mostrar()"> </form> </body> </html>

Back slash

\\n solución 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 dirección del sitio al que hacemos referencia. Pero al pinchar en dicho enlace, el sitio en cuestión se abre en la misma ventana, (salvo que pinchemos el enlace con el botón derecho y le digamos que abra en otra ventana o pestaña) 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. Quizás esta persona regrese a seguir leyéndote, pero también puede ser que no lo haga. A menudo un enlace te lleva a otro y a otro y así acabas perdiéndote en la red. Puedes hacer que tus enlaces se abran directamente en otra ventana. Para ello, una vez insertado el link pincha en la pestaña Edición de HTML. Verás que la dirección 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>

Detrás de las comillas de cierre de la dirección 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, verás mi otro blog en otra ventana.

Pincha en Redactar para seguir escribiendo la entrada, si aún 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 redacción), pero antes de hacer la prueba asegúrate de que el botón Guardar ahora está de color gris, pues si no estuviera bien puesto y se abriera en la misma ventana, perderías 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.

. pinchando en Ocultar vista preliminar regresarás a la ventana de escritura.Si funciona bien.