Unidad 11. Ejercicio paso a paso: Crear un formulario

Objetivo

Vamos a crear la página nosotros.html. Esta página contendrá un formulario para que los usuarios de nuestra web se puedan poner en contacto con nosotros, y que enviará los datos a la página enviar_mail.php.

Para ayudarnos a organizar los elementos del formulario, utilizaremos una tabla con dos columnas.

Todo esto, lo haremos partiendo de la página base.html, en la que tenemos el encabezado, la llamada al menú JavaScript, y un título y un párrafo dentro de una división con bordes redondeados.

Si por lo que sea no has seguido utilizando base.html, puedes copiar la estructura general de otra página.

Desde KompoZer, podemos insertar los controles de formulario desde el menú Insertar → Formulario...

Ejercicio

1. Abre al archivo base.html, y guárdalo como nosotros.html.
2. En el h2, escribe Contacto. En el primer párrafo, escribe Para ponerte en contacto con nosotros, rellena el siguiente formulario:.
3. Para seguir con el estilo de la página, vamos a meter el formulario en la división con borde redondeado, Crea la estructura:

   <div class="redondo_borde">
    <div class="red_arriba"><div></div></div>
   
    <div class="contenido">
         
   
    </div>
    <div class="red_abajo"><div></div></div>
   </div>

4. Dentro de la estructura anterior, crea el formulario <form></form>. Como método de envío, vamos a utilizar post (method="post"), y enviaremos los datos a la página enviar_mail.php (action="enviar_mail.php").
   Por tanto, crea el formulario <form method="post" action="enviar_mail.php">.
   Desde KompoZer, puedes crearlo a través del menú Insertar → Formulario... → Definir formulario.
5. Para organizar los controles, utilizaremos una tabla, con una columna a la izquierda para la leyenda, y otra a la derecha para el control. Crea una tabla, con un ancho del 100%, dos columnas y varias filas. La única cosa especial que haremos será utilizar el atributo rules para que muestre líneas en las filas (rules="rows").
   Crea la tabla:

   <table style="text-align: left; width: 100%;" cellpadding="3" rules="rows">
   <tbody>
     <tr>
      <td></td>
      <td></td>
     </tr>
     ...
   </tbody>
   </table>

6. Ahora vamos con los controles. La primera fila es para el nombre, así que en la primera celda escribe Nombre:.
7. En la segunda celda, introduciremos una caja de texto (<input type="text"). Y lo llamamos nombre (name="nombre"). También le vamos a asignar ese ID, aunque no es obligatorio. Crea el control <input type="text" name="nombre" id="nombre" />.
8. En la segunda fila, vamos a pedir el Correo electrónico:, por lo que introducimos ese texto.
9. En las segunda celda de la segunda fila, introduce otra caja de texto para el email: <input type="text" name="email1" id="email1" />.
10. En la tercera fila, le pediremos que repita el email, con el texto Repite tu correo:, y el control <input type="text" name="email2" id="email2" />.
11. En la siguiente fila, escribe el texto ¿Cómo nos conociste?:
12. En la siguiente celda mostraremos un menú desplegable (<select></select>) con algunas opciones (<option></option>). Dejaremos la primera en blanco, para saber si el usuario no ha marcado ninguna. Crea el control:

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

13. En la siguiente celda, escribe el texto Tu pregunta es referente a:.
14. En la siguiente celda le ofreceremos unas cuantas opciones, pero esta vez con radios (<input type="radio"). Para que al marcar uno se desmarquen otros, todos deben de tener el mismo name, aunque no el mismo id, que siempre ha de ser único. Además debemos de establecer el valor (value) que queremos que envía al seleccionar la opción. Crea los controles:

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

15. En las tres filas siguientes (créalas si no las tienes) sólo utilizaremos una celda, así que únelas, quitando al segunda y añadiendo a la primera el atributo colspan="2".
16. En la primera de las tres últimas filas, introduce el texto: Escribe lo que quieres preguntarnos:.
17. En la siguiente fila, crearemos un área de texto para que el visitante escriba su pregunta. Crea el control <textarea cols="50" rows="5" name="consulta"></textarea>.
18. En la última fila, crea un botón de envío (submit), con el texto Enviar en el atributo value (<input type="submit" value="Enviar" />), y un botón para borrar (reset) el formulario (<input type="reset" value="Restablecer" />).
19. A las dos últimas filas, asígnale la clase centrado, y define el estilo .centrado { text-align: center; }.
20. Por último, definimos los estilos para dar al formulario el aspecto deseado. Lo haremos con la tabla (form table), declarando los estilos:

    form tr {
      border-color: #F5E4CC;
    }
    form table {
      border-collapse: collapse;
    }
    form table td {
      width: 50%;
    }

21. Guarda la página y pruébala. Comprueba que si pulsas el botón Enviar se produce un error, porque todavía no existe la página eviar_mail.php.

El código debe de haberte quedado como el que se muestra en la página de teoría.

 Cursos Informática Gratuitos