php: 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 el Servidor 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.

action

El atributo “action” indica el tipo de acción que va a realizar el formulario. Anteriormente indicamos que la información podía enviarse a un correo electrónico o a un programa que la gestione. Es mediante esta etiqueta que se gestionan los formularios.

Si queremos que el formulario se envíe a un correo, la acción quedaría escrita de la siguiente manera: <form action=mailto:direcciondelcorreo@correo.com…></form>. Este tipo de envíos se utilizarían para casos de formularios de contacto, de sugerencias, etc.

Si lo que queremos es que la información sea enviada a un programa que la gestione, debemos indicarle en la acción, la url del archivo donde se encuentra ubicado el programa que la gestionará. Lo escribiríamos de la siguiente manera: <form action="dirección completa del archivo que la gestionará" ...> </form>. Este tipo de envíos se utilizarían para casos de formularios de encuestas, cuestionarios, etc.

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario será enviado. Existen dos valores posibles: get y post.

El valor get es el valor por defecto. Si no concretamos el method, la información se enviará a través de este medio.

“get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &.

Un ejemplo de un formulario enviado por el method=“get” sería el siguiente: http://www............?nombre1=valor1&nombre2=valor2

El valor post indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición.

enctype

Mediante este atributo indicaremos la forma en la que viajará la información que se mande a través del formulario.

La forma puede ser de varios tipos, aunque el más común es que la información se envíe como texto plano (enctype="text/plain").

Una vez vistos estos tres atributos, veremos como quedaría el código de un formulario estándar a un correo eléctrónico:

ELEMENTOS DE ENTRADA

Los Formularios no forman parte de PHP, sino del lenguaje estándar de Internet, HTML. Vamos a dedicar en este capítulo algunas líneas al HTML, para entrar posteriormente a tratarlos con PHP.

Todo formulario comienza con la etiqueta <FORM ACTION="lo_que_sea.php" METHOD="post/get"> . Con . Con ACTION indicamos el script que va procesar la información que recogemos en el formulario, mientras que METHOD nos indica si el usuario del formulario va ha enviar datos ( post ) o recogerlos ( get ). La etiqueta <FORM> indica el final del formulario.

A partir de la etiqueta <FORM> vienen los campos de entrada de datos que pueden ser:

Cuadro de texto:

Cuadro de texto con barras de desplazamiento:

<textarea rows="5" name="descripcion" cols="20">Es de color rojo</textarea>

Casilla de verificación:

Botón de opción:

Menú desplegable:

<option selected value="lunes">lunes</option>

<option>martes</option>

<option value="miercoles">miércoles</option>

</select>

Boton de comando:

Campo oculto:

Este último tipo de campo resulta especialmente útil cuando que remos pasar datos ocultos en un formulario.

Como habrás observado todos lo tipos de campo tienen un modificador llamado name , que no es otro que el nombre de la variable con la cual recogeremos los datos en el script indicado por el modificador ACTION de la etiqueta FORM FORM , con value establecemos un valor por defecto.

A continuación veamos un ejemplo, para lo cual crearemos un formulario en HTML como el que sigue y lo llamaremos formulario.htm :

<HTML>

<BODY>

<p>Tu nombre <input type="text" name="nombre" size="30" value="jose"></p>

<p>Tu sistema favorito

<option selected value="Linux">Linux</option>

<option value="Macintosh">Macintosh</option>

<option value=&qmargin-left: 75"><option value="Windows">Windows</option>

</select></p>

<p>¿Te gusta el futbol ? <input type="checkbox" name="futbol" value="ON"></p>

<p>Hombre<input type="radio" value="hombre" checked name="sexo"></p>

<p>Mujer <input type="radio" name="sexo" value="mujer"></p>

</blockquote>

<p>Aficiones</p>

</FORM>

</BODY>

<HTML>

Y ahora creemos el script PHP llamado desde le formulario mis_datos.php :

Todos los datos se encuentran en la variable $_POST, ya que el formulario está enviado por el método post.

<?PHP;

if (isset($_POST['enviar']) {

echo "Hola <b>" . $_POST['nombre'] . "</b> que tal estás<BR>n";

echo "Eres " . $_POST['sexo'] . "<BR>n";

echo "Tienes " . $_POST['edad'] . "<BR>n";

echo "Tu sistema favorito es " . $_POST['sistema'] . "<BR>n";

if (isset($_POST['futbol']) {

echo "Te gusta el futbol <BR>n";

} else odigo" style="margin-left: 50">} else {

echo "NO te gusta el futbol <BR>n";

}

if ($_POST['aficiones'] != "") {

echo "Tus aficiones son: <BR>n";

echo nl2br($_POST['aficiones']);

} else {

echo "NO tienes aficiones <BR>n";

}

echo "<a href='formulario.htm'>VOLVER AL FORMULARIO</a>"

Una vez rellenados los datos del formulario, pulsamos el botón Enviar datos , con lo que le campo enviar toma lo que su etiqueta value indica, es decir enviar="Enviar datos" . En nuestro script lo primero que evaluamos es que se haya enviado el formulario, y para ello nada mejor que comprobar que la variable $enviar no está vacía. Le ponemos el signo dólar delante a enviar , ponemos el signo dólar delante a enviar , ya que en PHP todas las variables se les refiere con este signo.

Hay que tener en cuenta que si fusionáramos el código de ambos ficheros, nos ahorraríamos uno, pero no también se puede hacer en dos como lo estamos haciendo. Si la variable $enviar está vacia, enviamos el formulario.

<?PHP;

if ($enviar) {

echo "Hola <b>" . $nombre . "</b> que tal estás<BR>n";

echo "Eres " . $sexo . "<BR>n";

echo "Tienes " . $edad . "<BR>n";

echo "Tu sistema favorito es " . $sistema . "<BR>n";

if ($futbol) {

echo "Te gusta el futbol <BR>n";

} else {

echo "NO te gusta el futbol <BR>n";

}

if ($aficiones != "") {

< stuot;)>

echo "Tus aficiones son: <BR>n";

echo nl2br($aficiones);

} else {

echo "NO tienes aficiones <BR>n";

}

echo "<a href='$PHP_SELF'>VOLVER AL FORMULARIO</a>"

} else {

<HTML>

<BODY>

<p>Tu nombre <input type="text" name="nombre" size="30" nombre" size="30" value="jose"></p>

<p>Tu sistema favorito

<option selected value="Linux">Linux</option>

<option value="Macintosh">Macintosh</option>

<option value="Windows">Windows</option>

</select></p>

<p>¿Te gusta el futbol ? <input type="checkbox" name="futbol" value="ON"></p>

<p>Hombre<input type="radio" value="hombre" checked name="sexo"></p>

<p>="codigo" style="margin-left: 100"><p>Mujer <input type="radio" name="sexo" value="mujer"></p>

</blockquote>

<p>Aficiones</p>

</FORM>

</BODY>

</HTML>

<?PHP

} //fin IF

La variable de entorno $PHP_SELF , es una variable de entorno que nos devuelve el nombre del script que estamos ejecutando. Y por último, hacer notar el uso de la función nl2br() , nl2br() , con la cuál sustituimos los retornos de carro del texto, los cuáles no reconocen los navegadores, por la etiqueta <BR> .

Descarga de ficheros desde un formulario

Vamos a ver un caso especial, como descargar un archivo desde un formulario. Para ello utilizaremos una etiqueta INPUT de tipo FILE , soportada a partir de las versiones de los navegadores Nestcape Navigator 2.0 e Internet Explorer 4.0.

El formulario debe usar el método post , y el atributo post , y el atributo enctype debe tener el valor multipart/form-data . Además al formulario debemos añadirle un campo oculto de nombre MAX_FILE_SIZE , al cuál le daremos el valor en bytes del tamaño máximo del archivo a descargar.

</FORM>

Cuando el formulario es enviado, PHP detectará automáticamente que se está descargando un archivo y lo colocará en un directorio temporal en el servidor. Dicho directorio será que el que esté indicado en el archivo de configuración php.ini , o en su defecto en el directorio temporal del sistema.

Cuando PHP detecta que se está descargando un archivo crea varias variables con el prefijo del nombre del archivo pero con distintas terminaciones. La variable terminada en $_FILES['archivo']['name'] contiene el nombre original del archivo, $_FILES['archivo']['size'] contiene el tamaño en bytes de éste, y la variable $_FILES['archivo']['type'] nos indicará el tipo de archivo si éste es ofrecido por el navegador.

Si el proceso de descarga no ha sido correcto la variable archivo tomará el valor none y _size será 0 , y si el proceso ha sido correcto, pero la variable $_FILES['archivo']['size'] da 0 , quiere decir que el archivo a descarga supera el tamaño máximo indicado por MAX_FILE_SIZE .

Una vez descargado el archivo, lo primero que debemos hacer es moverlo a otro lugar, pues sino se hace nada con él, cuando acabe la ejecución de la página se borrará.

Veamos un ejemplo de todo lo dicho.

<HTML>

<BODY>

<?PHP

if (isset($_POST['enviar']) {

if ($_FILES['archivo']['name'] != "" && $_FILES['archivo']['size'] != 0){

echo "Nombre: $archivo_name <BR>n";

echo "Tamaño: $archivo_size <BR>n";

echo "Tipo: $archivo_type <BR>n";

if (! move_uploaded_file ($_FILES['archivo']['tmp_name'], "directorio/".$_FILES['archivo']['name'])) {

echo "<h2>No se ha podido copiar el archivo</h2>n";

}

} elseif ($_FILES['archivo']['name'] != "" && $FILES['archivo']['size'] == 0) {

echo "<h2>Tamaño de archivo superado</h2>n";

} else {

echo "<h2>No ha escogido un archivo para descargar</h2>n";

}

echo "<HR>n";

}

<FORM ENCTYPE="multipart/form-data" ACTION="<?php echo $_SERVER['PHP_SELF']; ?>" METHOD="post">

<p><b>Archivo a descargar<b><br>

</FORM>

</BODY>

</HTML>

botones submit y reset.

Botón de envío

Para enviar la información, el formulario necesita de un botón que le indique que el formulario ha concluido y que pueden enviar la información.
Los botones de envío se crean con la etiqueta “input” de tipo “submit”. Además, hay que definir el texto que queremos que esté escrito en el botón. Esto lo conseguimos con el atributo “value”. Así, el código de un botón sencillo de formulario sería el siguiente:

Obteniendo el siguiente resultado en nuestra Web:

Botón de resetear la información

Es posible que el usuario una vez avanzado el formulario, quiera reiniciarlo desde el principio y volver a escribir la información. Para ello es muy útil el botón para borrar la información.
El botón se escribe casi igual que el anterior, cambiando el type, que en el caso de estos botones es “reset” y cambiando el mensaje interno del botón, o sea, el “value”.
El ejemplo sencillo de este botón tendría el siguiente código:

Y el resultado de ese código sería este botón:

hidden

El hidden es un atributo que se le pone al tag. Gracias a este atributo estamos enviando al programa de gestión de datos, aparte de los datos enviados por el propio usuario, datos predefinidos por nosotros mismos invisibles para el usuario. Estos datos pueden ser útiles para ayudar al programa en su gestión de los datos del formulario. Lo que hacen es comunicar cierta información al servidor sobre cómo tratar los datos manteniéndose ocultos a la vista de los usuarios.
Este tipo de datos ocultos no se muestran en la página, aunque sí pueden ser detectados solicitando el código fuente. El atributo hidden no se llega a usar en páginas escritas en html, sólo en las que empleen también otro tipo de lenguajes.
Aquí podemos ver el código de un ejemplo:

image

El atributo “image” sirve para personalizar un botón. Es decir, este atributo introduce un botón en una imagen, sustituyendo al formato estándar de botones que ya hemos visto en otros artículos del tutorial.
La función de los botones creados de esta forma es igual que la de submit, pero nos permite personalizar este elemento.
Un ejemplo de este tipo de botones sería este:

file

El atributo file permite al usuario subir archivos. Por supuesto necesitaremos un programa que gestione estos archivos mediante un lenguaje diferente al html.
Aquí te hemos escrito un formulario con este tipo de type (type=“file”) para que veas las diferencias con los otros que habíamos visto hasta ahora.

Fíjate como tenemos que cambiar el enctype, la forma de enviar la información, ya que ahora no vamos a enviar texto plano, sino archivos.
Nosotros tenemos que definir el tamaño del campo y su nombre. El botón "Examinar" es creado automáticamente por el navegador. Al pinchar en él, podremos examinar nuestro disco duro para encontrar la imagen que deseemos subir.

Listas de botones: radio

A continuación vamos a ver otro tipo de listas de opciones o de selección. Son listas con botones de tipo radio. Estos botones se escriben mediente la etiqueta type=”radio”.
Vamos a transformar la lista anterior en este tipo de lista. Fijaros que a cada opción le vamos a atribuir una etiqueta nueva, pero todas ellas van a tener el mismo nombre. El código nuevo quedaría de la siguiente manera:

<input type="radio" name="transporte" value="1">Coche
<br>
<input type="radio" name="transporte" value="2">Avión
<br>
<input type="radio" name="transporte" value="3">Tren

Y el cambio de aspecto es evidente. Aquí lo tenéis:

Coche
Avión
Tren
Por defecto no saldrá ninguna opción activada. Pero si queremos activar alguna de ellas podemos hacerlo mediante el atributo checked. Por ejemplo, en el código siguiente la lista de opciones tiene activada la opción avión:

<input type="radio" name="transporte" value="1">Coche
<br>
<input type="radio" name="transporte" value="2" checked>Avión
<br>
<input type="radio" name="transporte" value="3">Tren

Y observa el resultado que obtenemos…

Coche
Avión
Tren

Listas de cajas: checkbox.

Estas listas de opciones son muy parecidas a las vistas anteriormente salvo por dos detalles que vamos a mostrarte a continuación.
El primero de ellos y fundamental es que las cajas son de un tipo diferente y se escriben, por tanto, de forma diferente. Las cajas se escriben mediante type=“checkbox”.
Otra diferencia es que así como las listas de botones tipo “radio” sólo permitiían elegir una opción (siempre y cuando los nombres de las opciones fueran los mismos), las listas de cajas permiten seleccionar una o varias opciones.
Aquí tienes el código de una lista que hemos escrito para demostrarte todo lo que te hemos explicado anteriormente:

<input type="checkbox" name="transporte" value="1">Coche
<br>
<input type="checkbox" name="transporte" value="2" checked>Avión
<br>
<input type="checkbox" name="transporte" value="3">Tren

Y observa a continuación el resultado:

Coche
Avión
Tren

ENVIO Y RECEPCION DE DATOS

El lenguaje PHP nos proporciona una manera sencilla de manejar formularios, permitiéndonos de esta manera procesar la información que el usuario ha introducido.

Al diseñar un formulario debemos indicar la página PHP que procesará el formulario, así como en método por el que se le pasará la información a la página.

Código fuente

<html>
<head>
    <title> Ejemplo 01 WebEstilo Avanzado </title>
</head>
<body>
    <H1> Ejemplo de procesado de formularios </H1>
    Introduzca su nombre:
    <FORM ACTION="02.php" METHOD="GET">
      <INPUT TYPE="text" NAME="nombre"><BR>
      <INPUT TYPE="submit" VALUE="Enviar">
    </FORM>
</body>
</html>

Vemos la ejecución

Al pulsar el botón Enviar el contenido de cuadro de texto es enviado a la página que indicamos en el atributo ACTION de la etiqueta FORM.

En versiones anteriores a 4.2.0 PHP creaba una variable por cada elemento del FORM, esta variable creada tenía el mismo nombre que el cuadro de texto de la página anterior y el valor que habíamos introducido. Pero por razones de seguridad a partir de entonces para acceder a las variables del formulario hay que usar el array de parámetros $_POST[] o $_GET[] dependiendo del método usado para enviar los parámetros.

En este ejemplo se ha creado una entrada en el array $_GET[] con el índice 'nombre' y con el valor que haya introducido el navegante.

Código fuente

<html>
<head>
    <title> Ejemplo 02 WebEstilo Avanzado </title>
</head>
<body>
    <H1> Ejemplo de procesado de formularios </H1>
    El nombre que ha introducido es: <?php echo $_GET['nombre'] ?>
    <br>
</body>
</html>

Vemos la ejecución

Method GET y POST

En la página anterior hemos comentado que los datos de un formulario se envía mediante el método indicado en el atributo METHOD de la etiqueta FORM, los dos métodos posibles son GET y POST.

La diferencia entre estos dos métodos radica en la forma de enviar los datos a la página, mientras que el método GET envía los datos usando la URL, el método POST los envía por la entrada estándar STDIO.

Código fuente

<html>
<head>
    <title> Ejemplo 03 WebEstilo Avanzado </title>
</head>
<body>
    <H1> Ejemplo de procesado de formularios </H1>
    <FORM ACTION="05.php" METHOD="GET">
      Introduzca su nombre: <INPUT TYPE="text" NAME="nombre"><BR>
      Introduzca sus apellidos: <INPUT TYPE="text" NAME="apellidos"><BR>
      <INPUT TYPE="submit" VALUE="Enviar">
    </FORM>
</body>
</html>

Vemos la ejecución

Código fuente

<html>
<head>
    <title> Ejemplo 04 WebEstilo Avanzado </title>
</head>
<body>
    <H1> Ejemplo de procesado de formularios </H1>
    <FORM ACTION="05.php" METHOD="POST">
      Introduzca su nombre: <INPUT TYPE="text" NAME="nombre"><BR>
      Introduzca sus apellidos: <INPUT TYPE="text" NAME="apellidos"><BR>
      <INPUT TYPE="submit" VALUE="Enviar">
    </FORM>
</body>
</html>

Vemos la ejecución

Código fuente (05.php)

<html>
<head>
    <title> Ejemplo 05 WebEstilo Avanzado </title>
</head>
<body>
    <H1> Ejemplo de procesado de formularios </H1>
    El nombre que ha introducido por GET es:
    <?php
      echo $_GET['nombre']," ",$_GET['apellidos']
    ?>
    <br>
    El nombre que ha introducido por POST es:
    <?php
      echo $_POST['nombre']," ",$_POST['apellidos']
    ?>
    <br>
</body>
</html>

Vemos la ejecución
el primero la respuesta a 03.php (método GET) y el segundo a 04.php (método POST)

El resultado final es el mismo, solo que con el método GET podemos ver los parámetros pasados ya que están codificados en la URL.

Envío de emails

PHP nos ofrece la posibilidad de enviar emails de una manera sencilla y fácil, para ello el lenguaje nos proporciona la instrucción mail( )

<?php
mail(destinatario, tema, texto del mensaje);
?>

En el parámetro destinatario pondremos la dirección de email a donde se enviará el mensaje, en el parámetro tema el tema o subject del mensaje y el parámetro texto del mensaje el cuerpo del mensaje en formato texto plano.

Existe una sintaxis extendida de la instrucción mail( ) que nos permite añadir información adicional a la cabecera del mensaje.

<?php
mail(destinatario, tema, texto del mensaje, información adicional de cabecera);
?>

En la información de cabecera podremos incluir parámetros adicionales al mensaje como Reply-To:, From:, Content-type:... que nos permiten tener un mayor control sobre el mensaje.

Código fuente

<html>
<head>
    <title> Ejemplo 06 WebEstilo Avanzado </title>
</head>
<body>
    <H1> Ejemplo de envío de email </H1>
    <FORM ACTION="07.php" METHOD="GET">
      Introduzca su direccion de email:
      <INPUT TYPE="text" NAME="direccion"><BR>
      Formato: <BR>
      <INPUT TYPE="radio" NAME="tipo" VALUE="plano" checked> Texto plano<BR>
      <INPUT TYPE="radio" NAME="tipo" VALUE="html" > HTML<BR>
      <INPUT TYPE="submit" VALUE="Enviar">
    </FORM>
</body>
</html>

Vemos la ejecución

Código fuente

<html>
<head>
    <title> Ejemplo 07 WebEstilo Avanzado </title>
</head>
<body>
    <H1> Ejemplo de envío de email </H1>
    <?php
      $direccion=$_GET['direccion'];
      $tipo=$_GET['tipo'];
      $asuntoPlano = "Ejemplo de envio de email (texto plano)";
      $asuntoHTML = "Ejemplo de envio de email (HTML)";
      $mensajePlano = "
          Ejemplo de envio de email de texto plano \n\n
            WebEstilo.\n
            http://www.webestilo.com/\n
            Manuales para desarrolladores web. \n
                      ";
      $mensajeHTML = "
          <html>
            <head>
              <title> WebEstilo. Manual de PHP</title>
            </head>
            <body>
              Ejemplo de envio de email de HTML
              <blockquote>
                WebEstilo.<br><br>
                <a href="http://www.webestilo.com">http://www.webestilo.com</a>
                <br><br>
                <u>Manuales</u> para <b>desarrolladores</b> web.
              </blockquote>
            </body>
          </html>
                     ";
      $cabecerasPlano = "From: iesleliadoura@wanadoo.es\n";
      $cabecerasHTML = 'MIME-Version: 1.0' . "\r\n";
      $cabecerasHTML .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
      $cabecerasHTML .= "From: iesleliadoura@wanadoo.es\r\n";
      if ($direccion!="")
      {
        if ($tipo=="plano")
        {
          // envio en formato texto plano
          mail($direccion,$asuntoPlano,$mensajePlano,$cabecerasPlano);
        }
        else
        {
          // envio en formato HTML
          mail($direccion,$asuntoHTML,$mensajeHTML,$cabecerasHTML);
        }
        echo "Se ha enviado un email a la direccion: ",$direccion," en formato <b>",
              $tipo,"</b>.";
      }
    ?>
    <br>
</body>
</html>

php

martes, 8 de mayo de 2012

Etiqueta form

action

method

enctype

ELEMENTOS DE ENTRADA

Cuadro de texto:

Cuadro de texto con barras de desplazamiento:

Casilla de verificación:

Botón de opción:

Menú desplegable:

Boton de comando:

Campo oculto:

Descarga de ficheros desde un formulario

botones submit y reset.

Botón de envío

Botón de resetear la información

hidden

image

file

Listas de botones: radio

Listas de cajas: checkbox.

ENVIO Y RECEPCION DE DATOS

Method GET y POST

Envío de emails

No hay comentarios:

Publicar un comentario