Formularios y enlaces dirigidos a ventanas

Introducción

Este artículo pretende mostrar la utilización correcta de las ventanas "popup", ya que la forma que se considera correcta según los artículos que listo a continuación, no lo es del todo, incluso se afirma que son formas "semánticamente correctas". No voy a juzgar si está bien o mal empleado el uso de esas palabras, tan solo voy a incluír un enlace a un artículo de wikipedia, sobre "Semántica".

En principio podría decir simplemente que la forma correcta es la que se puede ver en un mensaje de los foros del web que yo mismo escribí: Abrir enlace en un popup (me refiero a la primera de esas formas), pero he notado que siguen existiendo dudas, tal como se puede deducir de este otro mensaje: Hay que rectificar las FAQS

Existen varias páginas en donde se explica esa forma de enlazar:

Y... ¿Por qué afirmo que no es correcto?

Voy a dar en un principio una explicación sencilla de comprender basada justamente en la semántica. Si usamos un enlace o vínculo a otra página, es evidente que pensamos que ese vínculo se puede realizar, pero el usar la sentencia return false (asociado al evento click de ese enlace) estamos dando la orden de cancelar el enlace o vínculo. En resumen, usando un enlace queremos expresar "enlace a", y usando return false estamos expresando "no enlace".

Podríamos pensar entonces que no debería existir ese tipo de cancelación, pero la verdadera razón de existencia es para confirmación o validación, tal como explicaré más adelante.

Describiré ahora la forma correcta, ayudándome de la similitud entre enlaces y formularios. La verdad es que son muy pocas las veces que se plantea el envío de un formulario hacia un popup, pero es posible, y está registrado en las FAQs javascript del mismo foro: Submit a una ventana emergente (popup), que también escribí yo mismo. También he encontrado un mensaje precedente: Un consejo, una idea, por favor.

Forma correcta

El enlace a un popup se debe hacer como cualquier enlace, usando el atributo href..., y para enviar formularios se utiliza el atributo action (en el primer caso se usa la etiqueta "a" y en el segundo "form").

Para que el soporte destino (tanto de los enlaces como de los formularios) sea otra ventana, debe definirse el atributo target. Existen nombres estándar de algunas ventanas como _self, _blank, _top, _parent. Pero también se puede dar un nombre arbitrario, y esos es lo que debemos hacer.

Y ahora viene lo más importante... "el popup"...

Tanto formularios como enlaces, ofrecen un sistema para confirmar/cancelar la ejecución y que son muy parecidos. Usando un valor lógico con el evento asociado: submit para formularios y click para enlaces, de manera que se puede confirmar la acción asignando el valor lógico true, y cancelarla con false.

Dicho esto, voy a mostrar 2 formas correctas de formulario y enlace (aún sin usar ventanas):

Enlace:
<a
	href="destino.html"
	onclick="return confirm('Desea enlazar con:\n' + this.href)">
	...
</a>

Formulario:
<form
	action="destino.html"
	onsubmit="return confirm('Desea enviar formulario a:\n' + this.action)">
	...
</form>

Nótese la similitud de los dos ejemplos... y si a ambos le añadimos un atributo target arbitrario: target="popup", seguirá teniendo la misma similitud: un enlace que se confirma (también podria validarse) con una función asociada al manejador de evento onclick, y un formulario que igualmente se confirma con su evento asociado (submit)

La verdad es que la confirmación la podemos omitir y en su lugar, ¿qué pasaría si abriésemos una ventana en blanco, de nombre popup...? Recuérdese que hemos puesto un atributo target="popup"...

Enlace:
<a
	href="destino.html"
	target="popup"
	onclick="window.open('', 'popup', 'width = 200, height = 100')">
	...
</a>

Formulario:
<form 
	action="destino.html"
	target="popup"
	onsubmit="window.open('', 'popup', 'width = 200, height = 100')">
	...
</form>

Cuando se activa el enlace (click), antes de enlazar se chequea el evento asociado por si hubiese que validar/confirmar, pero en vez de eso está la orden de abrir la ventana popup... sin URI. Entonces se abre esa ventana y luego se enlaza, pero al tener definido el atributo target, ese enlace se hace a una ventana que debe llamarse popup, y como es parte del juego de ventanas activas, allí se realiza.

Con el formulario el razonamiento es el mismo.

Una última observación

Otra cosa que no hemos considerado es el bloqueo de ventanas emergentes desde la configuración de los navegadores. Si bien en estos casos algunos navegadores abren una ventana nueva, la verdad es que no debería ser así...

Con los siguientes códigos para enlazar:

<a
	href="index.php"
	target="v"
	onclick="window.open('', 'v', 'width=300,height=200');" >
	...
</a>

<a
	href="index.php"
	target="v"
	onclick="window.open(this.href, this.target, 'width=300,height=200'); return false" >
	...
</a>

... probados en los navegadores: "explorer", "mozilla" y "opera", se han abierto correctamente las ventanas en los dos primeros, pero en el tercero la ventana fue bloqueada con ambos códigos, pero solo a enlazado en la ventana activa el código sin cancelación (primero). Supongo que este último comportamiento es el correcto cuando se bloquean los popups (lamento no disponer de todos los navegadores para hacer pruebas).

Y teniendo javascript desactivado (otra de las posibilidades que ofrecen los navegadores), ambos códigos también funcionan correctamente.

Otros enlaces relacionados

Para quien desee más información:



Comentarios

Nombre: Pepe Molina (caricatos)
Procedencia: España
URL: http://www.caricatos.net
Fecha de envío: 2 de enero de 2009, a las 09:15.
comentario:

Agradezco los comentarios sobre este artículo, e intentando contestar, prefiero dar soporte para mis códigos en los \"foros del web\". Supongo que la mayoría de visitas se las debo a ese sitio.
Sobre la \"polémica\" de que esté desaconsejado el uso del atributo target, es una cuestión que no tiene que ver con este artículo, ya que el que necesita enviar datos sin salir de la página donde se encuentra, solo lo podrá hacer de esta manera, así que en vez de usar xhtml o html estricto, tendrá que usar la forma \"transitional\"... es más siempre se está considerando el uso de ventanas, y la utilización del target combinado con la apertura de la ventana durante el envío/enlace sigue funcionando con javascript desactivado.

Saludos ;-)


Nombre: lolo
Procedencia: lolo
E-Mail: lo@gmail.com
Fecha de envío: 27 de octubre de 2008, a las 19:20.
comentario:

bestial men felicitaciones


Nombre: Alejandro
Procedencia: Argentina
E-Mail: alesuriano@hotmail.com
Fecha de envío: 31 de agosto de 2008, a las 22:39.
comentario:

Wau, esto es lo que quiero, que envien un comentario y quede en la misma pagina, estuve viendo tus codigos fuente, pero no entiendo como haces para direccionar la informacion a la misma pagina.

Y encima con editor y codigo de seguridad !!!!

Sl2


Nombre: Alejandro
Procedencia: Argentina
E-Mail: alesuriano@hotmail.com
Fecha de envío: 31 de agosto de 2008, a las 22:37.
comentario:

Hola Pepe, estoy haciendo una pag web en fron page 2003 (soy nuevo en esto) y hace una semana que estoy trabado en insertar un formulario como este en mi pagina y no puedo, de todos los lugares por los que he pasado, este es el mas parecido a lo que quiero hacer.
Me podes dar una mano ???

Desde ya muchas gracias.

Abrazo


Nombre: Francisco Blanchart
Procedencia: Madrid
E-Mail: blanchrt@nova.es
Fecha de envío: 12 de octubre de 2007, a las 04:24.
comentario:

Tus argumentos son interesantes, pero hay un factor que te debería hacer revisar tus teorías: el atributo target está "deprecado" por el W3C, es decir, desaconsejado y a punto de desaparecer. De hecho, en XHTML 1.0 estricto ya no se admite, por lo que no es una alternativa válida al JavaScript desactivado.

(Otra cuestión es si estamos o no de acuerdo con esta decisión (yo no, desde luego), que nos deja sin un recurso que, aparte la polémica sobre si las ventanas nuevas molestan o no a los usuarios, tenía una innegable utilidad).

Un saludo


Colabore enviando su comentario

Nombre
Procedencia
Página web
E-mail *
Evaluación evaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluar
Código de envío

Rellene este campo con la clave de la imagen: codigo de envío

Nota Importante

El campo E-Mail es obligatorio para activar por correo electrónico el comentario (si no desea que se haga público, marque la casilla "anonimato"). También es obligatorio el código "captcha" (el número que se ve en la imagen adjunta); y por supuesto, debe existir un comentario.

Puede encontrar información sobre este sistema de comentarios en este enlace: Ponga comentarios en su web.

Edición negrita cursiva subrayado   alineación izquierda alineación derecha alineación centrada alineación justificada   Insertar enlace insertar imagen   Emoticones: [:)] [:(] [:x] [BIEN] [MAL] [SI] [NO] [APLAUSOS] [MEJORABLE] [¡A VER!] [¡DÉJAME PENSAR!] [FLIPE] [¡SIN PALABRAS!]
Copyright © 2006-2018 www.caricatos.net
Visitas: 31039