miércoles, 2 de mayo de 2012

Practica 13. Formularios


En el 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
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>

 
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>
  • 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.

No hay comentarios:

Publicar un comentario