Curso completo de HTML - Practica 6-Formulario para "Los Alpes"

Ahora que ya conocemos todos los controles existentes para crear formularios es hora de hacer uno con apariencia profesional. Esto no quiere decir que use todos los controles existentes, sino que los use de una manera adecuada, cuidando la presentación y facilitando al usuario la introducción de datos. Como motivo hemos elegido crear una página más del sitio Web de la agencia de viajes Los Alpes, que permita a los visitantes pedir que les envíen por correo un catálogo con todos los viajes disponibles.

En primer lugar procederemos a escribir el código HTML necesario para crear los formularios y posteriormente nos dedicaremos a darle una apariencia profesional, tarea en la que podremos demostrar nuestra capacidad para usar tablas para controlar la disposición de los elementos en una página Web.

• PASO 1: Para comenzar partiremos de las páginas que creamos en la práctica 5. Podemos realizar los cambios sobre estas mismas páginas o crear una copia en otro directorio (en el directorio pract5 se encuentran de nuevo las páginas de esta práctica). Usando nuestro editor de texto/HTMLhabitual abrimos el archivo plantilla.htm donde creamos la plantilla de la página Web de Los Alpes. El aspecto de esta página es muy simple, como podemos ver en la figura 12.28:

  Figura 12.28. Este es el aspecto inicial de la plantilla del sitio Web de Los Alpes.

  

  En primer lugar, antes de realizar ningún cambio, guardamos este documento con el nombre form.htm . Sobre este nuevo archivo realizaremos los cambios. Lo primero que haremos será adaptar el código de la plantilla a nuestros objetivos, cambiando la fecha y el título de la página, y escribiendo un texto introductorio del formulario (ver figura 12.29):

  Figura 12.29. El primer paso será modificar la plantilla, cambiando el título y la fecha y escribiendo un texto introductorio.

  

• PASO 2: El siguiente paso consistirá en insertar los controles del formulario. Dado que nuestro objetivo será recoger el nombre, dirección, teléfono, etc. del usuario, usaremos en su mayoría cajas de texto, con la única excepción de un cuadro de selección para elegir el tipo de catálogo. El código necesario para insertar estos controles es:

  <FORM> <P>Nombre completo: <INPUT TYPE="text" NAME="nombre" SIZE="30"> <P>Dirección: <INPUT TYPE="text" NAME="direccion" SIZE="50"> <P>Ciudad: <INPUT TYPE="text" NAME="ciudad" SIZE="20">    Código Postal: <INPUT TYPE="text" NAME="c.p." SIZE="6" MAXLENGTH="5"> <P>Teléfono: <INPUT TYPE="text" NAME="telefono" SIZE="10" MAXLENGTH="9"> <P>Fax: <INPUT TYPE="text" NAME="FAX" SIZE="10" MAXLENGTH="9"> <P>Email: <INPUT TYPE="text" NAME="email" SIZE="30"> <P>Catálogo: <SELECT> <OPTION VALUE="nacional"> Nacional <OPTION VALUE="internacional" SELECTED> Internacional <OPTION VALUE="completo"> Completo </SELECT> <P> <INPUT TYPE="image" BORDER="0" SRC="img/enviar.jpg" VALUE="Enviar"> </FORM>

  Y deberemos insertarlo a continuación del texto introductorio. Este código no tiene demasiada complejidad, pudiendo destacarse la limitación a cinco caracteres para el código postal y a nueve el del número de teléfono y fax, con lo que evitamos posibles equivocaciones de los usuarios. En ambos casos hemos usado el atributo MAXLENGTH para imponer esta limitación. En esta página hemos decidido, además, usar un botón de envío personalizado, acorde con la apariencia del Web. Este y otro material necesario para la práctica puede encontrarse en el directorio pract6/material.

  Una vez realizados estos cambios y escrito el código anterior obtenemos el resultado que vemos en la figura 12.30.

  Figura 12.30. Usando los conocimientos adquiridos en este capítulo utilizamos las etiquetas INPUT y SELECT para crear los controles del formulario.

  

• PASO 3: Podríamos dejar el formulario así, y publicarlo en Internet; de hecho gran parte de los formularios que encontramos tienen una apariencia similar a esta. Sin embargo en capítulos anteriores hemos aprendido a usar tablas para controlar la disposición de los elementos y es hora de usar estos conocimientos para dar a nuestro formulario una apariencia mucho más profesional. En un Web real un buen diseño incita a un mayor número de navegantes a rellenar el formulario.

  Para empezar cambiamos el titular por una imagen ( pract6/material/catalogo.gif) en la que hemos escrito el mismo texto con un tipo de letra que simula escritura manual. El resto de cambios hacen uso de tablas. Para realizar el diseño suele ser conveniente hacer un boceto sobre el papel o con un programa de dibujo, donde no existen las limitaciones del lenguaje HTML. Una vez hecho el boceto es hora de usar este lenguaje para plasmarlo sobre una página Web. Tras hacer esto en nuestro formulario concluimos que sería adecuado usar una tabla de nueve filas y tres columnas. De las filas la primera es para el título y para el texto introductorio, mientras que el resto son para cada campo del formulario. La primera columna contendrá el texto indicativo del formulario alineado a la derecha (<TD ALIGN=" right">), la segunda contendrá el control en sí y la tercera servirá únicamente como margen derecho. En la figura 12.31 mostramos el formulario con su nueva apariencia mostrando los bordes de la tabla, para que el lector pueda apreciar la estructura de la tabla:

  Figura 12.31. Usando una tabla de nueve filas y tres columnas controlamos la disposición de todos los elementos de la tabla para conseguir un diseño profesional.

  

  Otro aspecto que podemos comentar es que el ancho total de la tabla será de 600 pixeles, con lo que conseguimos que se visualice correctamente en todo tipo de monitores. Para que también quede bien en monitores grandes la centramos usando la etiqueta CENTER. Por otro lado, para crear cierta separación entre los diferentes campos podemos usar el atributo CELLSPACING, con el que controlamos la distancia en pixeles entre las diferentes celdas.

  La realización de este código es un ejercicio muy importante, ya que este tipo de retoques es muy común en las páginas Web reales. Por esta razón dejamos al lector que intente mejorar el diseño de la página usando las pistas que le hemos dado. En cualquier caso, en el directorio pract6 se ofrece una posible solución. En la figura 12.32 podemos ver la página completa una vez introducida en la estructura de frames:

  Figura 12.32. Este es el aspecto final del formulario una vez introducido en la estructura con frames del sitio Web creado en la práctica 5.

  

  La mejora en apariencia respecto a la que veíamos en la figura 12.30 es apreciable.