Unidad 11. Formularios y PHP (I)

11.1. Introducción

Hemos visto como crear una página web, darle formato y añadirle funcionalidades con JavaScript, pero esto es sólo el comienzo. Una página web puede hacer muchas más cosas, puede mostrar los datos que obtiene es ese instante de una Base de Datos que reside en un servidor de Internet, puede comunicarse con otras webs, puede utilizar mapas, información del tiempo, etc.

En definitiva, una página web puede mostrar información actualizada cada vez que se ejecuta. Es lo que se conoce como páginas dinámicas, en contraposición a las páginas estáticas, que siempre muestran la misma información. Un ejemplo de página dinámica sería un foro de Internet, como el que hay en aulaClic. Esta página que estás leyendo sería un ejemplo de página estática.

Para crear páginas dinámicas hay que emplear un lenguaje de programación web, como Java, .NET, o PHP. Si quieres ver las diferencias entre estos lenguajes visita este tema avanzado .

Nosotros hemos elegido PHP por ser gratuito y fácil de aprender. Para explicar PHP necesitaríamos un curso completo, así que sólo vamos a dar las nociones básicas para que puedas empezar a programar en PHP.

11.2. Formularios

En nuestro ejemplo tenemos una página de Contacto que recoge datos mediante un formulario y los envía a una dirección de correo electrónico. Para enviar dicho correo electrónico vamos a utilizar PHP.

Hay varias formas de recoger datos y enviar un correo, nosotros vamos a emplear la más didáctica utilizando dos páginas. Luego en un ejercicio la mejoraremos (con una sola página).

Necesitamos una primera página escrita en HTML que contiene el formulario para recoger los datos y llamar a una segunda página escrita en PHP que realiza el envío del correo.

A continuación te mostramos el código de la primera página que se llamará contacto.htm.


<html><head></head><body>

<form method="post" action="enviar_mail.php">

 <table style="text-align: left; width: 100%;" cellpadding="3" rules="rows">

 <tbody>

   <tr>

     <td>Nombre:</td>

     <td><input type="text" name="nombre" id="nombre" /></td>

   </tr>

   <tr>

     <td>Correo electrónico:</td>

     <td><input type="text" name="email1" id="email1" /></td>

   </tr>

   <tr>

     <td>Repite tu correo:</td>

     <td><input type="text" name="email2" id="email2" /></td>

   </tr>

   <tr>

   <td>¿Cómo nos conociste?:</td>

     <td><select name="conocio" id="conocio">

      <option selected="selected"></option>

      <option>Un amigo</option>

      <option>Un blog</option>

      <option>Un buscador</option>

      <option>Otros</option>

    </select></td>

   </tr>

   <tr>

     <td>Tu pregunta es referente a:</td>

     <td><label><input type="radio" name="referente" id="ref_web" value="web" /> 

      La Web </label><br />

     <label><input type="radio" name="referente" id="ref_fotos" value="fotos" /> 

      Las fotos </label><br />

     <label><input type="radio" name="referente" id="ref_asociacion" value="asociacion" /> 

      La asocioaci&oacute;n </label></td>

   </tr>

   <tr>

     <td colspan="2">Escribe lo que quieres preguntarnos:</td>

   </tr>

   <tr>

     <td class="centrado" colspan="2">

      <textarea cols="50" rows="5" name="consulta"></textarea></td>

   </tr>

   <tr>

     <td class="centrado" colspan="2"><input type="submit" value="Enviar" />

       <input type="reset" value="Restablecer" /></td>

   </tr>

  </tbody>

 </table>

</form>

</body></html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .

El primer paso es recoger los datos. Para ello, hemos empleado un formulario, con una serie de controles, con los que interactúa el usuario.

Un formulario, está delimitado por la etiqueta <form></form>. Como mínimo, suele tener dos atributos, propios del formulario:

method: es la manera en la que se enviarán los datos. Sus valores pueden ser get, que muestra los datos en la barra de direcciones, o post, que los envía de forma separada.
action: como valor, contiene a dónde se enviarán los datos. En nuestro caso, sería una página PHP (action="enviar_mail.php").

Dentro del formulario, podemos tener cualquier elemento, como párrafos o tablas para organizar los controles.

Entre los controles podemos encontrar:

Cajas de texto de una línea, con la etiqueta <input type="text" /> .
Cajas de texto multilínea, con la etiqueta <textarea></textarea> Escribe aquí... .
Casillas de verificación, con la etiqueta <input type="checkbox" /> .
Casillas de opción, con la etiqueta <input type="radio" /> Opción A Opción B.
Menú de opciones, con la etiqueta <select><option></option>...</select> .
Botones, con la etiqueta <input type="submit"> o la etiqueta <button> .

Los controles que recogen datos, llevan además el atributo name con el nombre que le queramos dar al control. Es importante, porque al recoger los datos, nos referiremos al control por su nombre.

También es indispensable el botón, ya que al pulsarlo, envía la página al action del formulario.

Para ver en detalle estos controles y conocer alguno más, puedes seguir este avanzado .

Si necesitas ayuda para crear la página nosotros.htrml, puedes seguir el ejercicio paso a paso Crear un formulario.

Puedes ver el aspecto final del formulario aquí.

Enero-2010

Pág. 11.1

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies