mayo 2012

PRESENTACION

HOSTING DE PHP

http://elbuenmaestrolafamilia.com/madecyta/

VIDEOS PHP

TIENDA ONLINE EN PHP CON DREAMVIEWER

En este caso nos vamos a apoyar en la variable $HTTP_POST_VARS, que debería contener el formulario, para saber si hemos recibido o no datos desde un formulario. Dicha variable la utilizamos en un enunciado if (! $HTTP_POST_VARS), que si pasa por el caso positivo -no había nada en $HTTP_POST_VARS- significa que no se ha recibido nada desde un formulario. En ese caso, muestro el formulario de contacto.

En caso contrario -sí que había algo en $HTTP_POST_VARS- quiere decir que estamos recibiendo datos por un formulario y en ese caso, recogemos los datos y componemos el cuerpo del mensaje.

Veamos el código de la página para crear el formulario, recibirlo y componer el cuerpo del mensaje que se va a enviar. En el mismo código podremos encontrar también la llamada a la función que envía el correo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Mándanos tus comentarios</title>
</head>

<body bgcolor="#cccc66" text="#003300" link="#006060" vlink="#006060">
<?
if (!$HTTP_POST_VARS){
?>
<form action="envia_form_php.php" method=post>
Nombre: <input type=text name="nombre" size=16>
<br>
Email: <input type=text name=email size=16>
<br>
Comentarios: <textarea name=coment cols=32 rows=6></textarea>
<br>
<input type=submit value="Enviar">
</form>
<?
}else{
    //Estoy recibiendo el formulario, compongo el cuerpo
    $cuerpo = "Formulario enviado\n";
    $cuerpo .= "Nombre: " . $HTTP_POST_VARS["nombre"] . "\n";
    $cuerpo .= "Email: " . $HTTP_POST_VARS["email"] . "\n";
    $cuerpo .= "Comentarios: " . $HTTP_POST_VARS["coment"] . "\n";

    //mando el correo...
    mail("admin@tudominio.com","Formulario recibido",$cuerpo);

    //doy las gracias por el envío
    echo "Gracias por rellenar el formulario. Se ha enviado correctamente.";
}
?>
</body>
</html>

TABLAS O ARRAYS

Definición

Un array es una variable en la que podemos guardar varios datos o variables agrupados a la vez. Estos forman una lista, la cual tiene un único nombre. Por ejemplo podemos guardar en un array llamado $semana los días de la semana, o en $meseslos nombres de los meses del año, o en $clientes los nombres de los clientes habituales de un negocio.

En otros manuales podemos encontrarlos con el nombre de "vectores", "listas", "matrices", "arreglos" o "tablas". Nosotros hemos preferido llamarlos por su nombre en inglés, que es el que se usa para crearlos, "arrays". Conservamos así su nombre original, para no confundirlos con otro tipo de estructuras.

Si has visto el curso de javascript, sin duda, ya sabrás lo que son los arrays, aunque en PHP siguen la misma estructura, su forma es un poco diferente.

Una diferencia con javascript es que en PHP los arrays pueden ser indexados o asociativos, mientras que en javascript todos son indexados. Empezaremos por estos últimos.

definir un array

La forma más simple de definir un array es mediante la instrucción array(). Dentro del paréntesis escribimos los valores o variables que contiene el array, separados por comas:

$temporadas=array("primavera", "verano", "otoño", "invierno");

Dentro del array podemos poner todo tipo de datos, tanto cadenas de texto, como números enteros o decimales, o booleanos, o poner variables que contengan esos datos, El siguiente array mezcla todo tipo de datos:

$miarray=array("Juan",,32,17.5,true);

Leer un array

Los arrays anteriores son arrays indexados, es decir, a cada elemento del array le corresponde un número, el cual se utilizará para poder leerlo. Se empieza a contar desde el número 0, por lo que el primer elemento del array será el número 0. Al último elemento de un array de n elementos le corresponderá el número n-1. Es decir en el array $temporadas del ejemplo anterior, al elemento "primavera" le corresponde el número 0, a "verano" le corresponde el 1, a "otoño" el 2 y a "invierno" el 3.

para leer cada elemento usaremos el siguiente código:$nombreArray[num_elemento]. Así para leer los elementos del array anterior escribiremos:

echo "$temporada[0], $temporada[1], $temporada[2], $temporada[3].";

Fíjate que el número de elemento debe ponerse entre corchetes [ ], mientras que en la definición mediante la palabra clave "array" hemos usado paréntesis ( ).

Si haces la prueba de escribir el array anterior en una página, y sacarlo luego en pantalla, el resultado será el siguiente:

primavera, verano, otoño, invierno.

más adelante veremos otros métodos más eficaces para mostrar todos los elementos de un array, así como para buscar algún elemento en concreto y otras operaciones con arrays.

Definir un array por sus elementos

También podemos definir un array definiendo directamente sus elementos, por ejemplo si escribimos:

$turnos[0]="mañana";
$turnos[1]="tarde";
$turnos[2]="noche";

Es lo mismo que si hubieramos escrito:

$turnos= array("mañana","tarde",noche");

Esta forma de definir arrays simplemente definiendo sus elementos plantea algunos problemas: por ejemplo, ¿qué pasa si al definir un elemento no hemos definido los anteriores?. Pues simplemente que los anteriores no existen. el número de elementos, es el que tiene, sin embargo para leer el elemento deberemos usar el número que le hemos dado, y no el que le correspondería por su orden.

Por ejemplo, si escribimos :

$a[5]="hola";

Creamos un array de un solo elemento, sin embargo para leerlo debemos escribirecho "$a[5]";, con el número 5, aunque sea el primer elemento del array.

Redefinir elementos

Para darle otro valor a un elemento de un array basta con definirlo de nuevo, tal como hemos hecho en la sección anterior. así si en el array $temporada visto anteriormente queremos poner el primer elemento en letras mayúsculas, lo redefineremos de la siguiente manera:

$temporada[0]="PRIMAVERA";

Después de hacer el cambio, lo volvemos a sacar en pantalla mediante la sentencia:

echo "$temporada[0], $temporada[1], $temporada[2], $temporada[3].";

y veremos el siguente resultado

PRIMAVERA, verano, otoño, invierno.

El valor del primer elemento de este array ha cambiado.

Contar los elementos de un array

Para contar los elementos que contiene un array utilizaremos la instruccióncount($miarray), donde $miarray es la variable que contiene el array. Para contar los elementos del array $temporada visto anteriormente utilizaremos el siguiente código:

$num=count($temporada);
echo "El array \$temporada tiene $num elementos.";

Al aplicar el código anterior veremos el siguiente resultado:

el array $temporada tiene 4 elementos.

Podemos usar también la funcion sizeof($array) para contar los elementos de un array. La forma de usarla es idéntica a la función count(), y el resultado es el mismo.

FUNCIONES PREDEFINIDAS EN PHP

Introducción:

Como ya se ha dicho, en PHP, además de las funciones creadas por el usuario, existen múltiples funciones para realizar distintas tareas. Todas ellas están ya predefinidas, por lo que lo único que tenemos que hacer es llamarlas, pasarles los parámetros necesarios, y ellas realizan la tarea.

Para poder usarlas debemos conocer, el nombre de la función, los parámetros que debemos pasar, y por supuesto saber que tarea realizan.

Ya hemos visto algunas de estas funciones, concretamente las referidas a el tratamiento de arrays Tema 6.3. Trabajar con arrays. por lo que no las volveremos a repetir aquí. Sin embargo hay funciones que relacionan los arrays con cadenas de texto que sí las veremos.

Por supuesto, hay muchas más funciones predefinidas de las que vamos a incluir en este manual, aquí daremos sólo las mas usadas, o las que pueden sernos de más utilidad.

La totalidad de las funciones predefinidas que pueden usarse en PHP la podemos ver desde la página "php.net", sección "Referencia de funciones".. Desde ahi tienes distintos enlaces para ver las funciones predefinidas, agrupadas por categorías.

En esta primera página y en la siguiente de este tema veremos las funciones para cadenas de texto.

Contar caracteres de una cadena

Estas funciones, y las que veremos en los siguientes apartados, no alteran los argumentos que les pasamos, por lo que para obtener el resultado debemos guardarlas siempre en otra variable.

$resultado=nombreFuncion($argumentos);

`strlen($texto);`

Da como resultado el número de caracteres que tiene la cadena pasada en el argumento $texto.

`chr(num);`

En esta función pasamos como parámetro un número entre 0 y 255, y el resultado es caracter asignado a ese número en el código ASCII. ASCII es un código muy usado en programación, que asocia cada letra, signo o caracter con un número. Consta de 256 signos diferentes, si bien los 31 primeros no se corresponden con un carácter, sino con otras funciones tales como controles, escape, tabuladores, etc.

La lista completa del código ASCII puedes verla en caracteres ASCII para HTML

`ord("caracter");`

Es la función contraria a la anterior. pasamos como parámetro un caracter o signo, y la función nos devolverá el número en ASCII de ese carácter. Si pasamos como argumento más de un caracter o una cadena de texto, la función nos devolverá únicamente el código ASCII del primer carácter.

`count_chars($texto,modo);`

Esta función indica cuales son los caracteres en código ASCII que aparecen en el texto y/o cuantas veces aparece cada uno de ellos. En $texto pasamos como argumento la cadena a analizar, y en modo escribiremos un número del 0 al 4. Según el modo la función devolverá un array o una cadena. El comportamiento de los distintos modos es el siguiente.

Modo 0: Devuelve un array asociativo con todos los caracteres del código ASCII. En la clave aparece el número del caracter en ASCII, y en el valor indica el número de veces que se repite ese caracter.
Modo 1: Devuelve un array asociativo con únicamente los caracteres que aparecen en el texto. La clave nos da el número del carácter en ASCII, y el valor es el número de veces que se repite ese carácter.
Modo 2: Devuelve un array asociativo con los caracteres del código ASCII que no aparecen en el texto. La clave es el número de carácter, y el valor es siempre igual a 0, ya que éste es el número de veces que aparecen.
Modo 3: Devuelve una cadena de texto en la que aparecen los caracteres que contiene el texto. Estos aparecen una sola vez (aunque estén repetidos), y ordenados según el código ASCII.
Modo 4: Devuelve una cadena de texto en la que aparecen los caracteres del código ASCII que no aparecen en el texto, ordenados según este código.

`str_word_count($texto,modo);`

Esta función diferencia las palabras del texto y permite hacer varias operaciones según el modo. En el argumento $texto, pasamos el texto a analizar, y en modo pondremos los números, 0, 1 ó 2. Dependiendo del modo la función dará los siguientes resultados:

Modo 0: Devuelve el número de palabras que contiene el $texto.
Modo 1: Devuelve un array indexado con todas las palabras que contiene el$texto.
Modo 2: Devuelve un array asociativo donde la clave indica en qué número de caracter de la cadena comienza la palabra (empieza a contar desde 0), y el valor es la palabra en sí.

`substr_count($texto,$subcadena);`

Devuelve un número que indica las veces que una determinada $subcadena(carácter, palabra, etc.) aparece dentro de una cadena de texto $texto.

`strpos($texto,"caracter");`

Devuelve un número que indica la primera posición del "caracter" pasado en el segundo argumento, dentro de la cadena $texto pasado como primer argumento.

Si el carácter indicado en el segundo argumento no está en la cadena devolverá el valor boleano FALSE, representado por una cadena vacía.

Si en lugar de un carácter en el segundo argumento pasamos una cadena, comprobará si esta cadena (subcadena) está incluida en la cadena principal,y nos devolverá el número donde comienza la subcadena.

`strrpos($texto,"caracter");`

Funciona de forma análoga a la anterior, sólo que el número que devuelve es el de la última posición del "caracter" dentro de la cadena $texto.

`stripos($texto,"caracter");`

Funciona igual que la función strpos() pero sin tener en cuenta la diferencia entre mayúsculas y minúsculas.

`strripos($texto,"caracter");`

Funciona igual que la función strrpos() pero sin tener en cuenta la diferencia entre mayúsculas y minúsculas.

En la siguiente página de ejemplo se utilizan algunas funciones de las explicadas anteriormente:

Contar caracteres.

Para saber cómo hemos hecho esta página puedes ver el código en el siguiente enlace:

código de "Contar caracteres".

USO DE SESIONES PHP

Que son las sesiones

Las sesiones son las mejor forma de almacenar la información de los visitantes. Ya que con las cookis aparte de tener mala fama por ser “inseguras”, el usuario puede desactivarlas de su navegador, mientras que las sesiones no se pueden desactivadas. Además las cookies son almacenadas en el PC del visitante, mientras que las sesiones son guardadas en nuestro servidor, lo que nos permite almacenar mucha mayor información y tener un acceso mas fácil a ellas.

Nota: Para que las sesiones funcionen, todas las paginas por las que queramos que corra deben tener la extensión .php, si hacemos que corra por otra pagina que no sea php las sesiones se perderán al abandonar el archivo php.

session_start()

Con esta función, lo que aremos es comprobar si existe alguna sesión abierta, y si no hay ninguna, se abrirá una.
Es una buena idea incluir esta línea en cada script ya que si la sesion ya existe no abrirá otra nueva, sino que se limitará a abrir toda la información asociada a dicha sesión.

session_register()

Esta función nos servirá para registrar una variable de sesión

Ejemplo:
$nombre = “Giss”;
Sessión_register(“nombre”);

Nota: No es necesario poner el símbolo $ a la hora de registrar la variable de sesión

Cuando las variables están registradas, son enviadas a través de las páginas .php hasta que se termine la sesión o nosotros programemos manualmente el cierre de la sesión.

Se puede registrar mas de una variable a la vez, separándolo por comas, por ejemplo:
Session_register(“nombre”,”apellido”,”direccion”);

Otra cosa a tener en cuenta es que este tipo de variables no pueden pasarse por el método POST ni GET.

session_is_register()

Esta función nos servirá para saber si una variable esta registrada o no.
Su sintaxis es así:
$registro=session_is_register(“nombre”);

En caso de que sea verdadero devolverá true y de lo contrario devolverá false.

Cómo cerrar las sesiones

Cerrar una sesión equivale a “desregistrar” todas las variables que contiene. Para desregistrar una variable usamos la sentencia session_unregister(), lo malo de esta sentencia es que solo se puede desregistrar una sola variable por cada vez.

Para desregistrar todas las variables de una sola vez podemos utilizar la función session_unset().

Una vez desregistradas las variables solo nos falta terminar la sesión con la función session_destroy().

Vamos a realizar un ejemplo con todo lo visto hasta ahora sobre las sesiones:

Crearemos una sesión, registraremos una variable y la pasaremos a través de tres paginas distintas.
<! – sesion1.php ->
<?
session_start();
$nombre= “Jaime”;
session_register(“nombre”);
echo “ Bienvenido a mi web, $nombre”;
<a href = "sesion2.php"> siguiente pagina </a>
?>

<! – sesion2.php ->
<?
session_start();
echo “ Bienvenido a mi web de nuevo, $nombre”;
sesion_unregister(“nombre);
<a href = "sesion3.php"> siguiente pagina </a>
?>

<! – sesion3.php ->
<?
session_start();
echo “ Bienvenido a mi web de nuevo otra vez, $nombre”;
session_destroy();
?>

Explicación:

Tenemos 3 archivos con una sesion
En el archivo 1: creamos la sesión y registramos la variable nombre con session_register() y lo pasamos al archivo 2 mediante un enlace
En el archivo 2: usamos la variable creada en el archivo 1 y después desregistramos la variable con session_unregister()
En el archivo 3: vemos que a pesar de que la sesion sigue abierta no le llega la variable nombre ya que la desregistremos en el archivo2, y finalmente cerramos la sesion con session_destroy().

SENTENCIAS DE CONTROL II

While

La sentencia While ejecuta un código mientras la condición sea verdadera:

El bucle anterior se ejecutará 4 veces, ya que la quinta vez $numero valdrá 5, y como la sentencia dice que el código ha de ejecutarse si es menor de 5, saldremos del bucle.

Do... While

Éste bucle es igual al anterior, pero la condición se encuentra al final del bucle, y no al principio, con lo que el bucle se ejecutará por lo menos una vez.

For

El bucle for es el último tipo de bucle. En sí mismo no es necesario, cualquier bucle for puede sustituirse por uno de los anteriores.

En el siguiente capítulo veremos las tablas o arrays de PHP.

SENTENCIAS DE CONTROL I

If... Else

Con la sentencia If... Else podemos ejecutar un conjunto de operaciones si la condición es verdadera y otro distinto si es falsa. En todas las sentencias de control, la condición debe ir entre paréntesis.

El else es opcional, si solo queremos ejecutar unas operaciones si la condición es verdadera no lo contemplaremos, y además podremos escribir la forma corta del If (solo si no contiene la clausula else):

If... Elseif... Else

Ésta sentencia permite contemplar múltiples condiciones, y no solo 2 como la anterior. La condición Elseif puede aparecer tantas veces como queramos:

Switch... Case... Default

Ésta sentencia es equivalente a If... Elseif... Else. En el Switch especificamos el parámetro a evaluar; en las sentencias Case se contemplan los posibles valores, ejecutándose el correcto, si ninguno es correcto, se ejecuta el código del Default.

Después del código de cada case, se encuentra la orden break, esta orden se utiliza para que una vez se haya encontrado el case verdadero y ejecutado el código correspondiente, salgamos del switch sin seguir comprobando el resto de sentencias case. La sentencia break fuerza a terminar la ejecución de la sentencia de control, en cualquier sentencia de control.

FORMULARIOS HTML

¿Qué son los formularios?

Los formularios son posiblemente la herramineta más utilizada en Internet para obtener datos e información acerca de la gente que navega nuestro sitio. La idea de los formularios es recolectar información online en la interacción con el usuario y luego ejecutar una determinada acción con la misma, que podría ser por ejemplo, quizás el caso más utilizado, un formulario de venta que el usuario completa y luego es enviado vía email al vendedor en forma encriptada.

Este tema a diferencia de los anteriores es bastante más complejo y oscuro, aparecerán terminos como CGI scripts, Perl o bien lenguajes de programación como C, que seguramente nos desalentarán al principio, pero que con el tiempo asumiremos como familiares. La idea de esta sintética guía de formularios es brindar al newbie o novato un pantallazo general de lo que es posible hacer con simples formularios en nuestro sitio web.

¿Cómo los definimos?

Cinco son solamente las etiquetas que el código HTML posee para definir todos los elementos interactivos que un formulario puede presentar: <FORM>, <INPUT>, <SELECT>, <OPTION> y<TEXTAREA>. Estas etiquetas, junto a un número de modificadores o atributos, son suficientes para indicarle al navegador cliente cómo debe recolectar la información, cómo debe manejarla una vez recolectada y cómo debe interactuar con el servidor.

Etiqueta <FORM>

Todo formulario debe estar encerrado entre el par de etiquetas <FORM> y </FORM>, y debe ser ubicado en el cuerpo de cualquier documento HTML, es decir, entre el par de etiquetas <BODY> y </BODY>. Esta etiqueta <FORM> presenta tres atributos posibles:

Comando	Descripción
ACTION	el valor de este parámetro es la URL del programa o guión en elServidor Web utilizado para procesar la información recolectada.
METHOD	puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor.
ENCTYPE	este atributo está reservado para que la información viaje en forma encriptada a través de Internet.

Los dos primeros atributos de la tabla son de uso obligatorio para cualquier formulario que generemos, ya que establecen dónde enviar la información y cómo enviarla. El atributo o parámetro ENCTYPE es optativo y no es realmente importante.

Etiqueta <INPUT>

La etiqueta <INPUT> es la segunda etiqueta más importante de los formularios. Se la puede definir como una etiqueta multifunción, ya que con la misma podemos crear "push buttons", "radio buttons", "check boxes", y simples recuadros para ingresar texto. Posee ocho posibles parámetros: ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, y VALUE. Pero no se asusten con tantos parámetros porque normalmente solo se utilizan a lo sumo solo cinco. Los atributos cruciales para toda etiqueta <INPUT> son NAME, que asocia un nombre con cada variable ingresada; y TYPE, que puede asumir los valores TEXT, PASSWORD, CHECKBOX, RADIO,SUBMIT, RESET, IMAGE, and HIDDEN; de acuerdo al tipo de elemento que querramos representar. Más adelante todo será más claro con los ejemplos.

Etiqueta <SELECT>

Este par de etiquetas define una lista de elementos de los cuales el usuario debe seleccionar uno o varios, de acuerdo a los atributos que especifiquemos.

Etiqueta <OPTION>

Con esta etiqueta definimos cada elemento de las listas designadas con el par <SELECT> y </SELECT>.

Etiqueta <TEXTAREA>

Este par de etiquetas nos permiten definir un area de dimensiones arbitrarias que funciona como una suerte de editor, donde el usuario puede ingresar texto.

¿Cómo se ven?

Abrimos nuestro editor de texto preferido y creamos el siguiente archivo html:

<HTML>
<HEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>
<FORM ACTION="mailto:quantum@mundo21.com" METHOD=POST>
<table align="center" border="0">
<td align="left" width="100">Nombre:
</td>
<td align="center" width="150"><INPUT NAME="nombre" MAXLENGTH="25" TYPE="TEXT" VALUE="">
</td>
<tr>
<td align="left" width="100">Email:
</td>
<td align="center" width="150"><INPUT NAME="mail" MAXLENGTH="25" TYPE="TEXT" VALUE="">
</td>
<tr>
<td align="left" width="100">Motivo:
</td>
<td align="center" width="150"><INPUT NAME="motivo" MAXLENGTH="25" TYPE="TEXT" VALUE="">
</td>
<tr>
<td align="left" width="100"> Mensaje:
</td>
<td><TEXTAREA NAME="mensaje" ROWS=3 COLS=20>
</TEXTAREA>
</td>
<tr>
<td widht="100">
</td>
<td align="right" width="150"><INPUT NAME="boton" TYPE="SUBMIT" VALUE="Enviar">
</td>
</TABLE>
</FORM>
</BODY>
</HTML>

Lo que se vería de esta forma:

Aunque parezca complicado a primera vista el código anterior, con un poco de práctica puede resultar muy natural. Analicemoslo paso a paso:

El formulario comienza con esta línea:

<FORM ACTION="mailto:quantum@mundo21.com" METHOD=POST>/p>

Como dijimos anteriormente todo formulario debe comenzar con la etiqueta <FORM> y finalizar con </FORM>. El parámetro ACTION define qué es lo que debemos hacer con la información obtenida, en este caso le indicamos al navegador que nos envié los datos a nuestra dirección de correo electrónico (en el ejemplo la mandan a mundo21). La mayoría de los formularios enInternet realizan esta tarea, es decir, recolectan información del usuario y la envían por correo electrónico hacia algún destino. Para realizar esta tarea existen dos formas de hacerlo, una es la utilizada anteriormente, y la otra es hacer uso de algún script o guión CGI (Comon Gateway Interface) que procesa los datos y los reenvía hacia donde le indicamos. Un script CGIes un pequeño programa escrito en general en lenguaje PERL o C (muy populares en ambientes Unix) alojado en los servidores web que facilitan el intercambio y la transferencia de información entre el servidor y el cliente.
¿Cuál es la diferencia entre ambos métodos?, el utilizado en nuestro ejemplo es más sencillo y no utiliza ningún script, pero a su vez es menos eficaz, ya que en la mayoría de los casos no funcionará. Mientras que el segundo, si bien un poco más complicado, nos asegura casi un 100% de efectividad y una gran variedad de opciones para hacerlo, pues existen miles de scripts para diferentes tipos de formularios. Si quisiéramos utilizar un script CGI, es necesario averiguar si el servidor web que aloja nuestro sitio posee un directorio con scripts cgi, comúnmente conocidos como /cgi-bin (pues aloja binarios). En el caso afirmativo, solo debemos conversar con personal entendido del servidor para conocer como debemos configurar nuestro formulario, y en caso contrario, no debemos perder las esperanzas pues existen miles de scripts gratuítos online en diversos servidores alrededor del mundo esperando ser utilizados.

Supongamos, esto es solo un ejemplo, que nuestro servidor web o ISP (Internet Service Provider o Proveedor de Internet) cuenta con un script CGI para manejar formularios de correo electrónico, así sería la configuración del mismo en nuestra página:

<FORM ACTION="/cgi-bin/mailto.pl" METHOD=POST>

<input type=hidden name="to" value="quantum@mundo21.com">
<input type=hidden name="return-url" value="http://www.mundo21.com/gracias.html">

<table align="center" border="0">
<td align="left" width="100">Nombre:
</td>
<td align="center" width="150">
<INPUT NAME="nombre" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td>
<tr>
<td align="left" width="100">Email:
</td>
<td align="center" width="150">
<INPUT NAME="mail" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td>
<tr>
<td align="left" width="100">Motivo:
</td>
<td align="center" width="150">
<INPUT NAME="motivo" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td>
<tr>
<td align="left" width="100"> Mensaje:
</td>
<td>
<TEXTAREA NAME="mensaje" ROWS=3 COLS=20>
</TEXTAREA>
</td>
<tr>
<td widht="100">
</td>
<td align="right" width="150">
<INPUT NAME="boton" TYPE="SUBMIT" VALUE="Enviar">
</td>
</TABLE>

</FORM>

Para ver que pinta tiene un script del tipo utilizado en el ejemplo anterior, escrito en PERL, pueden observar el codigo fuente del archivo mailto.pl.

Como dijimos arriba, si por alguna razón nuestro proveedor de Internet o servidor web donde alojamos nuestro sitio no posee scripts CGI, no debemos bajar los brazos, aún nos queda una posibilidad: utilizar guiones gratuítos online. Existen muchas empresas que ofrecen este servicio y además por algunos billetes nos pueden crear o generar un script a medida. En las siguientes direcciones se pueden obtener muy buenos scripts gratis con todas las instrucciones correspondientes:

http://www.cgi-resources.com/Programs_and_Scripts/Remotely_Hosted/Form_Processing/
http://www.sbrady.com/hotsource/cgi/index.html#ffp

Para los más osados y valientes, aún existe una tercera posibilidad: crear nuestros propios scripts. Si nuestro proveedor o servidor web nos permite el acceso al directorio /cgi-bin, nos es posible subirlos, compilarlos y luego correrlos. Los mejores lugares en la red para obtener información, código fuente y ejemplos de cómo hacer esta hazaña son:

http://www.cgi-resources.com/Programs_and_Scripts/
http://www.artsackett.com/freebies/asform/

Construcción de Formularios

El TYPE más común para la etiqueta <INPUT> de un formulario es TEXT.

<FORM>
<INPUT TYPE="text">
</FORM>

Toda etiqueta <INPUT> necesita un NAME para poder identificar el valor que el usuario ingresa, es decir, el valor del parámetro NAME es el nombre de la variable que alojará el valor ingresado por el usuario.

<FORM>
<INPUT TYPE="text" NAME="nombre">
</FORM>

Cuando el usuario ingresa su nombre en la casilla de texto (por ejemplo Morgan Clay), éste se convertirá en el valor de entrada de la etiqueta INPUT y será relacionado con "nombre" (NAME="nombre"), de forma que el resultado que será procesado será el par nombre=Morgan Clay. Es posible, si así lo deseamos, establecer un valor predetermindado de la siguiente manera:

<FORM>
<INPUT TYPE="text" NAME="nombre" VALUE="J.J. Lopez">
</FORM>

Esto automáticamente generará el par nombre=J.J. Lopez, que sólo será modificado si el usuario lo cambia. El tamaño de las casillas puede ser especificado también de la siguiente manera:

<FORM>
<INPUT TYPE="text" NAME="nombre" VALUE="Morgan Clay" SIZE=20>
</FORM>

<FORM>
<INPUT TYPE="text" NAME="nombre" VALUE="Morgan Clay" SIZE=15>
</FORM>

<FORM>
<INPUT TYPE="text" NAME="nombre" VALUE="Morgan Clay" SIZE=10>
</FORM>

El valor predeterminado para el tamaño de un INPUT es SIZE=20, es decir, que sino le explicitamos otro tamaño, el navegador asumirá el valor 20 para el parámetro SIZE.

También podemos indicar la cantidad de caracteres a ingresar por el usuario, aunque no es muy utilizado este parámetro, puede resultar útil en algunas ocasiones. Por ejemplo, un límite de 15 caracteres lo indicamos de la siguiente manera:

<FORM>
<INPUT TYPE="text" NAME="nombre" SIZE=30 MAXLENGTH=15>
</FORM>

Muy similar al TYPE=TEXT es el TYPE=PASSWORD. Es exactamente igual al tipo texto, con la diferencia que despliega en pantalla *** en lugar de letras a medida que tipea el usuario.

<FORM>
<INPUT TYPE="password" NAME="clave">
</FORM>

Acá también cuentan los atributos SIZE, VALUE, y MAXLENGTH.

Radio Buttons y Check Boxes

Los Radio Buttons le permiten al usuario seleccionar una entre varias opciones. En cambio las Check Boxes le dan la posibilidad de elegir una o más opciones.

Radio Buttons

<FORM>
<INPUT TYPE="radio" NAME="equipos">
</FORM>

Recordemos que toda etiqueta INPUT debe llevar un VALUE y un NAME:

<FORM>
<INPUT TYPE="radio" NAME="equipos" VALUE="cuervo">San Lorenzo
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="gallina">River Plate
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="bostero">Boca Juniors
</FORM>

El NAME es el mismo para los tres Radio Buttons, pues son tres opciones para el mismo campoNAME="equipos". En este caso el VALUE ya está definido, solo debemos esperar la selección del usuario, por ejemplo si marcase la primera se procesaría la siguiente información: equipos=cuervo. Con el parámetro CHECKED le indicamos al navegador cual de todas las opciones debe aparecer marcada por defecto.

Si lo hacemos completo, se vería así:

<FORM>
¿Quién será el campeón del torneo argentino?<BR>
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="cuervo" CHECKED>San Lorenzo
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="gallina"> River Plate
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="bostero"> Boca Juniors
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="rojos">Independiente
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="academia"> Racing Club
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="fortineros"> Vélez Sarsfield
</FORM>

Check Boxes

La construcción de Check Boxes es bastante similar:

<FORM>
<INPUT TYPE="checkbox" NAME="cuervo">
</FORM>

A diferencia de los Radio Buttons, los Check Boxes mantienen el mismo valor para el parámetroVALUE, y cambian el valor de NAME. Por ejemplo:

<FORM>
<INPUT TYPE="checkbox" NAME="cuervo" VALUE="YES">San Lorenzo
<BR><INPUT TYPE="checkbox" NAME="gallina" VALUE="YES"> River PLate
<BR><INPUT TYPE="checkbox" NAME="bostero" VALUE="YES"> Boca Juniors
<BR><INPUT TYPE="checkbox" NAME="rojo" VALUE="YES"> Independiente
</FORM>

Al igual que con los Radio Buttons podemos hacer uso del parámetro CHECKED para marcar alguna por defecto, si así lo quisiéramos:

<FORM>
¿Quiénes son amargos?<BR>
<BR><INPUT TYPE="checkbox" NAME="cuervo" VALUE="YES">San Lorenzo
<BR><INPUT TYPE="checkbox" NAME="gallina" VALUE="YES" CHECKED>River PLate
<BR><INPUT TYPE="checkbox" NAME="bostero" VALUE="YES">Boca Juniors
<BR><INPUT TYPE="checkbox" NAME="rojo" VALUE="YES" CHECKED>Independiente
</FORM>

Si bien, algunas opciones están marcadas por defecto, el usuario es capaz de desmarcarlas y marcar otras. Los datos serán recolectados de la siguiente manera:

gallina=YES
rojo=YES

(si es que el usuario no modifica las opciones por defecto... incluso pueden elegir ninguna, es decir, dejar todas desmarcadas, entonces no habra ningún valor procesado)

Ahora bien, supongamos que quisiéramos hacer tres preguntas con opciones acerca de un mismo tema, ¿como lo haríamos?, muy simple, lo único que debemos recordar es que no puede haber NAMES duplicados en un mismo formulario, por tanto el formulario tendría esta pinta:

<FORM>
<TABLE BORDER="1" ALIGN="center">
<TR>
<TD WIDTH="350">
¿Cuál es la hinchada más original?
</TD>
<TR>
<TD WIDTH="350">
<BR><INPUT TYPE="checkbox" NAME="original?..SL" VALUE="YES">San Lorenzo
<BR><INPUT TYPE="checkbox" NAME="original?..RP" VALUE="YES">River Plate
<BR><INPUT TYPE="checkbox" NAME="original?..BJ" VALUE="YES">Boca Juniors
<BR><INPUT TYPE="checkbox" NAME="original?..I" VALUE="YES">Independiente
</TD>
<TR>
<TD WIDTH="350">
¿Cuál es más numerosa?
</TD>
<TR>
<TD WIDTH="350">
<BR><INPUT TYPE="checkbox" NAME="numerosa?..SL" VALUE="YES">San Lorenzo
<BR><INPUT TYPE="checkbox" NAME="numerosa?..RP" VALUE="YES">River Plate
<BR><INPUT TYPE="checkbox" NAME="numerosa?..BJ" VALUE="YES">Boca Juniors
<BR><INPUT TYPE="checkbox" NAME="numerosa?..I" VALUE="YES">Independiente
</TD>
<TR>
<TD WIDTH="350">
¿Cuál es más fiestera?
</TD>
<TR>
<TD WIDTH="350">
<BR><INPUT TYPE="checkbox" NAME="fiestera?..SL" VALUE="YES">San Lorenzo
<BR><INPUT TYPE="checkbox" NAME="fiestera?..RP" VALUE="YES">River Plate
<BR><INPUT TYPE="checkbox" NAME="fiestera?..BJ" VALUE="YES">Boca Juniors
<BR><INPUT TYPE="checkbox" NAME="fiestera?..I" VALUE="YES">Independiente
</TD>
</TABLE>
</FORM>

¿Cuál es la hinchada más original?

San Lorenzo
River Plate
Boca Juniors
Independiente

¿Cuál es más numerosa?

San Lorenzo
River Plate
Boca Juniors
Independiente

¿Cuál es más fiestera?

San Lorenzo
River Plate
Boca Juniors
Independiente

Supongamos que el usuario marca en la primera pregunta "San Lorenzo", en la segunda "Boca Juniors" y en la tercera "San Lorenzo" nuevamente, la información procesada será entonces:

original?..SL=YES
numerosa?..BJ=YES
fiestera?..SL=YES

Listas

Para la creación de listas de elementos utilizamos la etiqueta <SELECT> en lugar de la utilizada anteriormente <INPUT>, y a diferencia de esta útlima debe ser cerrada con su para </SELECT>. Es decir:

<FORM>
<SELECT>
elementos de la lista <
</SELECT>
</FORM>

Listas Desplegables

Le damos un NAME y agregamos algunos elementos.

<FORM>
<SELECT NAME="equipos">
<OPTION>San Lorenzo
<OPTION>River Plate
<OPTION>Boca Juniors
<OPTION>Independiente
<OPTION>Racing Club
</SELECT>
</FORM>

A cada <OPTION> le otorgamos un valor:

<FORM>
<SELECT NAME="equipos">
<OPTION VALUE="cuervo">San Lorenzo
<OPTION VALUE="gallina">River Plate
<OPTION VALUE="bostero">Boca Juniors
<OPTION VALUE="rojo">Independiente
<OPTION VALUE="academia">Racing Club
</SELECT>
</FORM>

La opción por defecto de una lista de este tipo es la primera <OPTION> declarada. Si quisiéramos marcar otra opción por defecto lo hacemos con el parámetro SELECTED de esta manera:

<FORM>
<SELECT NAME="equipos">
<OPTION VALUE="cuervo">San Lorenzo
<OPTION VALUE="gallina" SELECTED>River Plate
<OPTION VALUE="bostero">Boca Juniors
<OPTION VALUE="rojo">Independiente
<OPTION VALUE="academia">Racing Club
</SELECT>
</FORM>

Listas Desplegadas

La construcción de una lista desplegada es bastante similar a la de una lista desplegable, solo difieren en algunos parámetros. Para convertir la lista desplegable de equipos en una lista ya desplegada utilizamos el parámetro SIZE de la siguiente manera:

<FORM>
<SELECT NAME="equipos" SIZE=5>
<OPTION VALUE="cuervo">San Lorenzo
<OPTION VALUE="gallina">River Plate
<OPTION VALUE="bostero">Boca Juniors
<OPTION VALUE="rojo">Independiente
<OPTION VALUE="academia">Racing Club
</SELECT>
</FORM>

El valor del parámetro SIZE indica exactamente cuántos elementos desplegar simultáneamente. Si el valor del SIZE es menor al número total de elementos de la lista, automáticamente aparecerá un barra de desplazamiento sobre el lado derecho de la misma. Para verlo mejor indiquemos un SIZE=3 para la lista de equipos:

<FORM>
<SELECT NAME="equipos" SIZE=3>
<OPTION VALUE="cuervo">San Lorenzo
<OPTION VALUE="gallina">River Plate
<OPTION VALUE="bostero">Boca Juniors
<OPTION VALUE="rojo">Independiente
<OPTION VALUE="academia">Racing Club
</SELECT>
</FORM>

Al igual que las lista desplegables podemos indicar un elemento seleccionado por defecto mediante el parámetro SELECTED:

<FORM>
<SELECT NAME="equipos" SIZE=3>
<OPTION VALUE="cuervo">San Lorenzo
<OPTION VALUE="gallina" SELECTED>River Plate
<OPTION VALUE="bostero">Boca Juniors
<OPTION VALUE="rojo">Independiente
<OPTION VALUE="academia">Racing Club
</SELECT>
</FORM>

AREA DE TEXTO

Para generar un area de texto donde el usuario pueda escribir libremente un mensaje, un comentario o sugerencia, debemos utilizar la etiqueta <TEXTAREA> de la siguiente manera:

<FORM>
<TEXTAREA NAME="SUGERENCIAS">
</TEXTAREA>
</FORM>

Controlamos el tamaño del area de texto con los parámetros ROWS y COLS, cuyos valores representan el número de filas y columnas respectivamente que ocupará en pantalla dicha area. Para entenderlo mejor, ROWS sería la altura y COLS la anchura.

<FORM>
<TEXTAREA NAME="SUGERENCIAS" ROWS=6 COLS=50>
</TEXTAREA>
</FORM>

Un atributo interesante de esta etiqueta <TEXTAREA> es WRAP. Algunos navegadores no lo interpretan correctamente, lo que significa que directamente lo ignorarán. Este parámetroWRAP significa que el texto ingresado no puede superar los márgenes laterales, es decir, cuando el usuario llegue al final del margen derecho automáticamente desplazará el cursor hacia abajo sin esperar que el usuario presione la tecla ENTER.

<FORM>
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="soft"> </TEXTAREA>
</FORM>

WRAP="soft" significa que el texto ingresado en la caja de texto no superará los margenes laterales, pero será porcesado como una línea larga de caracteres, es decir, viajará a su destino como una larga cadena de caracteres.

<FORM>
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="hard"> </TEXTAREA>
</FORM>

WRAP="hard" significa que el texto es enviado tal cual fue ingresado.

<FORM>
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="off"> </TEXTAREA>
</FORM>

Esto es normalmente el valor por defecto de las areas de texto si es que no se especifica un valor distinto para este parámetro.

Botones SUBMIT y RESET

Son muy simples de declarar:

<FORM>
<INPUT TYPE="submit">
</FORM>

Este tipo de boton envía la información. Mientras que el RESET lo que hace es borrar las modificaciones realizadas por el usuario y regresar todos los valores por defecto.

<FORM>
<INPUT TYPE="reset">
</FORM>

Es posible cambiar el texto de estos botones con el parámetro VALUE:

<FORM>
<INPUT TYPE="submit" VALUE="Enviar Datos">
<INPUT TYPE="reset" VALUE="Borrar Datos">
</FORM>

En caso de ser necesario, no es lo común, podemos asignarle un NAME a los botones de RESETy SUBMIT. Esto sería necesario en el caso extraordinario de tener dos botones del mismo tipo en un mismo formulario, algo más que insólito.

Podemos utilizar una imagen como boton SUBMIT:

<FORM>
<INPUT TYPE="image" SRC="enviar.jpg" WIDTH=70 HEIGHT=35 <BORDER=0 ALT="Submit">
</FORM>

Para el caso de botones del tipo RESET no nos es posible asignarle una imagen.

Aquí va un simple truco, un botón que nos transporta a otra página:

<FORM ACTION="indexweb.php3">
<INPUT TYPE="submit" VALUE="Tutorial">
</FORM>

Pages

Blog Archive