Capítulo 71. PHP y HTML

PHP y HTML interactúan bastante: PHP puede generar HTML, y HTML puede pasar información a PHP. Antes de leer estas preguntas, es importante que aprenda cómo recuperar variables desde el exterior de PHP. La página del manual sobre este tema incluye bastantes ejemplos también. Preste atención especialmente a lo que register_globals representa para usted.

1. ¿Qué codificación/decodificación necesito al pasar un valor a través de un formulario/URL?
2. Intento usar una etiqueta <input type="image">, pero las variables $foo.x y $foo.y no están disponibles. $_GET['foo.x'] no existe tampoco. ¿Dónde están?
3. ¿Cómo creo matrices en un <form> HTML?
4. ¿Cómo obtengo todos los resultados de una etiqueta de selección múltiple en HTML?
5. ¿Cómo puedo pasar una variable de Javascript a PHP?

1. ¿Qué codificación/decodificación necesito al pasar un valor a través de un formulario/URL?

Existen varias etapas en las que la codificación es importante. Asumiendo que tiene un valor tipo string $datos, que contiene la cadena que desea pasar sin codificar, estas son las etapas relevantes:

Interpretación de HTML. Para especificar una cadena cualquiera, es necesario incluirla en comillas dobles, y aplicar htmlspecialchars() sobre el valor completo.
URL: Una URL consiste de varias partes. Si desea que sus datos sean interpretados como un ítem, es necesario codificarla con urlencode().

Ejemplo 71-1. Un elemento escondido de un formulario HTML


<?php
    echo "<input type='hidden' value='" . htmlspecialchars($datos) . "' />\n";
?>

Nota: No es correcto aplicar urlencode() sobre $datos, ya que es responsabilidad de los navegadores codificar los datos. Todos los navegadores populares lo hacen correctamente. Note que esto ocurrirá independientemente del método (es decir, GET o POST). Sin embargo, solo notará esto en el caso de una petición GET, ya que las peticiones POST usualmente son escondidas.

Ejemplo 71-2. Datos a ser editados por el usuario


<?php
    echo "<textarea name='misdatos'>\n";
    echo htmlspecialchars($datos)."\n";
    echo "</textarea>";
?>

Nota: Los datos son mostrados en el navegador como es de esperarse, ya que el navegador interpretará los símbolos HTML escapados.
Luego de ser enviados, ya sea por GET o POST, los datos serás codificados por el navegador para su transferencia, y serán decodificados directamente por PHP. Así que en lo que a usted concierne, no necesitará realizar ninguna codificación/decodificación, todo es manejado automáticamente.

Ejemplo 71-3. En una URL


<?php
    echo "<a href='" . htmlspecialchars("/siguientepagina.php?etapa=23&datos=" .
        urlencode($datos)) . "'>\n";
?>

Nota: En realidad está imitando una peticián HTML GET, por lo tanto no es necesario aplicar urlencode() manualmente a los datos.

Nota: Es necesario usar htmlspecialchars() sobre la URL completa, ya que la URL ocurre como el valor de un atributo HTML. En este caso, el navegador primero reemplazará las entidades HTML especiales por los caracteres correctos en el valor, y luego pasa la URL. PHP entenderá la URL correctamente, ya que ya usado urlencode() sobre los datos.
Notará que el caracter & en la URL es reemplazado por &. Aunque la mayoría de navegadores entenderán el caracter si olvida esto, no siempre es posible que ocurra. Así que incluso si su URL no es dinámica, es necesario usar htmlspecialchars() sobre la URL.

2. Intento usar una etiqueta <input type="image">, pero las variables $foo.x y $foo.y no están disponibles. $_GET['foo.x'] no existe tampoco. ¿Dónde están?

Cuando se envía un formulario, es posible usar una imagen en lugar del botón de envío estándar con una etiqueta como esta:

<input type="image" src="imagen.gif" name="foo" />

Cuando el usuario pulsa sobre la imagen, el formulario acompañante será transmitido al servidor con dos variables adicionales: foo.x y foo.y.

Dado que foo.x y foo.y habrían representado nombres de variable inválidos en PHP, éstos son convertidos automáticamente a foo_x y foo_y. Es decir, los puntos son reemplazados con caracteres de subrayado. Así que, es posible acceder a estas variables como cualquier otra descrita en la sección sobre recuperación de variables desde el exterior de PHP. Por ejemplo, $_GET['foo_x'].

Nota: Los espacios en nombres de variables de petición son convertidos a caracteres de subrayado.

3. ¿Cómo creo matrices en un <form> HTML?

Para hacer que el resultado de <form> sea enviado como un valor array a su script PHP, se deben nombrar los elementos <input>, <select> o <textarea> de esta forma:

<input name="MiMatriz[]" />
<input name="MiMatriz[]" />
<input name="MiMatriz[]" />
<input name="MiMatriz[]" />

Note los paréntesis cuadrados después del nombre de la variable, ellos son los que la convierten en una matriz. Es posible agrupar los elementos en diferentes matrices asignando el mismo nombre a elementos diferentes:

<input name="MiMatriz[]" />
<input name="MiMatriz[]" />
<input name="MiOtraMatriz[]" />
<input name="MiOtraMatriz[]" />

Esto produce dos matrices, MiMatriz y MiOtraMatriz, que son enviadas al script PHP. También es posible asignar claves específicas a sus matrices:

<input name="OtraMatriz[]" />
<input name="OtraMatriz[]" />
<input name="OtraMatriz[email]" />
<input name="OtraMatriz[telefono]" />

La matriz OtraMatriz ahora tendrá las claves 0, 1, email y phone.

Nota: Especificar claves de matrices es opcional en HTML. Si no especifica las claves, la matriz es llenada en el orden en que aparecen los elementos en el formulario. Nuestro primer ejemplo contendrá las claves 0, 1, 2 y 3.

Vea también Funciones de Matrices y Variables desde el exterior de PHP.

4. ¿Cómo obtengo todos los resultados de una etiqueta de selección múltiple en HTML?

La etiquete de selección múltiple en una construcción HTML le permite a los usuarios elegir varios ítems desde una lista. Estos ítems son pasados entonces al gestor de acción del formulario. El problema es que todos son pasados con el mismo nombre de control. Es decir,

<select name="var" multiple="yes">

Cada opción elegida llegará al gestor de acción como:

var=opcion1
var=opcion2
var=opcion3

Cada opción sobrescribirá los contenidos de la variable $var previa. La solución es usar la característica de PHP "matriz desde un elemento de formulario". Debe usarse la siguiente forma:

<select name="var[]" multiple="yes">

Esto le dice a PHP que debe tratar $var como una matriz y cada asignación de valor a var[] agrega un ítem a la matriz. El primer elemento se convierte en $var[0], el siguiente $var[1], etc. La función count() puede usarse para determinar cuántas opciones fueron seleccionadas, y la función sort() puede ser usada para ordenar la matriz de opciones si es necesario.

Note que si está usando JavaScript los caracteres [] en el nombre del elemento pueden causar problemas cuando intente referirse al elemento por su nombre. Use su ID numérico de elemento de formulario en su lugar, o encierre el nombre de variables en comillas sencillas y úselo como índice de la matriz de elementos, por ejemplo:

variable = documents.forms[0].elements['var[]'];

5. ¿Cómo puedo pasar una variable de Javascript a PHP?

Ya que Javascript es una tecnología (usualmente) del lado del cliente, y PHP es (usualmente) una tecnología del lado del servidor, y dado que HTTP es un protocolo "sin estados", los dos lenguajes no pueden compartir variables directamente.

Sin embargo, es posible pasar variables entre los dos. Una forma de hacerlo es generar código Javascript con PHP, y hacer que el navegador se refresque a sí mismo, pasando variables específicas de vuelta al script PHP. El ejemplo a continuación muestra precisamente cómo hacer esto -- permite que código PHP capture la altura y el ancho de la pantalla, algo que normalmente sólo es posible en el lado del cliente.


<?php
if (isset($_GET['ancho']) AND isset($_GET['altura'])) {
  // imprimir las variables de geometria
  echo "El ancho de la pantalla es: ". $_GET['ancho'] ."<br />\n";
  echo "La altura de la pantalla es: ". $_GET['altura'] ."<br />\n";
} else {
  // pasar las variables de geometria
  // (preservar la cadena query original
  //   -- las variables post deberan ser pasadas de otra forma)

  echo "<script language='javascript'>\n";
  echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
            . "&ancho=\" + screen.width + \"&altura=\" + screen.height;\n";
  echo "</script>\n";
  exit();
}
?>