Hacer de WebProgreso tu página de inicio Agregar a favoritos Contáctenos Acerca de WebProgreso
Creación de formularios en Dreamweaver
Tutorial de Web Progreso basado en el Dreamweaver 4, la creación de formularios en otras versiones tales como la MX no es muy distinto, puedes aprenderlo con este tutorial y luego realizarlo en otras versiones del programa.

Los formularios nos permiten recolectar información de nuestros usuarios. Requieren de dos elementos: el código HTML que describa el formulario y una secuencia de comandos CGI (Common Gateway Interface) que procese su contenido. Para insertar un formulario debemos abrir la ventana de objetos / elegimos el submenú Formularios.

Procedimiento:

Posicionarse donde se quiera insertar un formulario y hacer clic en el icono Insertar formulario Si luego de esto no vemos ningún cambio es porque no estamos viendo elementos invisibles. Para ello debemos ir a Ver / Ayudas visuales / Elementos invisibles.

Ahora veremos que se ha creado en nuestra página un recuadro con línea punteada de color rojo. Todos los elementos de formulario que queramos insertar deberán ir dentro de este recuadro. Lo primero que debemos hacer es seleccionar el formulario haciendo clic sobre la línea roja. En el inspector de propiedades veremos las propiedades del formulario.
En el campo Nombre (Form name) escribimos un nombre para nuestro formulario.
En el campo Acción (Action) debemos escribir la ruta completa de la secuencia de comandos que procesará el contenido del formulario (CGI). Esta secuencia debemos consultársela a nuestro proveedor de hosting. Por convención, los programas CGI se guardan generalmente en una carpeta de nombre cgi-bin. Si no poseemos un servicio de hosting pagado podemos utilizar un sistema de envío gratuito de formularios como el que se puede encontrar en:
http://www.webtaller.com/regsystem/panel_servicios.php

En Método (Method) se especifica cómo se manejarán los datos del formulario. La selección adecuada dependerá del servidor y de la secuencia de comandos que se esté utilizando. Debemos consultar esta información a nuestro proveedor de hosting. Por lo general es Post ya que es el sugerido por el Consorcio W3.

Elementos de formulario: Estos son los elementos de formulario que Dreamweaver nos permite insertar, todos ellos tienen un campo Nombre que debemos completar en el inspector de propiedades. Es recomendable insertarlos dentro de una tabla para que queden más ordenados.

Campo de texto (TextField): Para que el usuario ingrese texto.
Debemos especificar un largo y, si queremos una cantidad máxima de caracteres que podrá ingresar el usuario. También debemos indicarle si será de una sola línea o varias y si será un campo contraseña, en cuyo caso el usuario verá asteriscos. Si lo deseamos, podemos darle un valor inicial, es decir, un texto para que aparezca inicialmente en ese campo. Por ejemplo: "escriba su nombre en este campo".

Botón (Button): Sirve para enviar el formulario o reestablecerlo. En general se ponen debajo de todo. Debemos especificar una etiqueta para el botón (texto que aparecerá sobre el botón) y si será un botón de enviar o restablecer o no hará nada.

Casilla de verificación (Checkbox): Sirven para que el usuario seleccione varios elementos. Haciendo clic en una casilla de verificación aparece una tilde de selección. Nosotros debemos configurar el estado inicial (tildado o no tildado) y qué valor le
enviará al servidor en caso de que el usuario lo tilde. Por ejemplo: SI.

Botones de opción (Radio Buttons): Estos botones le permiten elegir al usuario UNA entre varias opciones. Debemos darle el mismo nombre a todos los que formen parte de un grupo de opciones. De esta forma, si se quiere crear otra sección con radio buttons, a todos ellos se les dará otro nombre que será el mismo para todos.
Debemos indicar el estado inicial (tildado o no) y el valor que le enviará cada uno al servidor en caso de estar tildado (en valor activado).

Lista/MenÚ (List/Menu): Este campo nos permite crear una lista desplegable o un menú. Debemos definir si será lista o menú e indicarle qué opciones ofrecerá al usuario, para ello oprimir valores de lista, Etiqueta del elemento será lo que vea el usuario y Valor será lo que se enviará. Para agregar otro elemento oprimir +.

Campo de archivo (File Field): Para que el usuario pueda adjuntar un archivo al formulario. Debemos darle un largo al campo y, si lo deseamos, una cantidad máxima de caracteres y un estado inicial.

Campo de imagen (Image): Para insertar una imagen que actúe como botón enviar. Debemos proporcionar un texto alternativo para quienes no puedan ver imágenes (navegadores solo texto).

Campo oculto (Hidden field): Algunas secuencias de comandos CGI requieren que le enviemos valores en campos ocultos ya que el usuario no tiene por qué verlos. Por ejemplo, existen CGI para enviar el contenido de un formulario a una dirección de e-mail, que requieren que le enviemos en un campo oculto la dirección a la cual
deberá ir ese e-mail. Ejemplos:
1) Campo oculto llamado: recipient, en valor colocar el mail al cual se enviará el formulario.
2) Campo oculto llamado redirect, en valor colocar la URL a la cual se redirigirá luego de ser enviado el formulario (es importante que esté con http...).
3) Campo oculto llamado: subject, en valor colocar el Asunto con que llegará el mail.

Menú de salto (Jump menu): Este tipo de menú desplegable, permite elegir entre opciones que nos llevarán a otra página o archivo. Se pueden crear enlaces a páginas en nuestro sitio, a páginas en otro sitio, a archivos, a imágenes, a direcciones de correo o a cualquier archivo que se pueda abrir en un navegador. Debemos elegir una
instrucción o categoría, por ejemplo: "Ir a" o "Adonde quiere ir", un botón IR y un listado de opciones con sus URL's.

Validación de formularios:

Esto sirve para que el formulario no se envíe mientras no estén rellenados los campos obligatorios. Para establecer campos obligatorios, seleccione el formulario (desde la linea punteada roja, o bien oprimiendo <form> en la esquina inferior izquierda) /
haga clic en ventana / comportamientos / + / validar formulario / en "campos con nombre" seleccione el elemento de formulario que desea que sea obligatorio, y seleccione la opción obligatorio (también puede seleccionar si es que debe ser un correo electrónico, etc), repita este paso, seleccionando otros elementos de formulario en "campos con nombre" y eligiendo que sean obligatorios / finalmente oprima aceptar.

Enviar un formulario con la tecla enter:
Normalmente, el formulario debería enviarse automáticamente al oprimir la tecla enter, pero si esto no ocurre, puedes hacerlo con el siguiente código:

<script language="JavaScript">
function envia(tecla) {
if (tecla == 13) {document.formulari.submit();}
</script>

y en las propiedades del form pones:

<form onkeypress="Javascript:envia(window.event.keyCode);">

Recapitulación:
Insertar un formulario, darle un nombre, la dirección del CGI, y el método.
Insertar los elementos de formulario, y campos ocultos que señalen el mail al cual se enviará y la página a la cuál se redireccionará.
Un buen consejo es insertar los elementos del formulario dentro de una tabla para que queden más ordenados.


Elementos relacionados en WebProgreso:

Scripts PHP:
Formulario que se envía a un email, agradeciendo al nombre escrito en éste

Estilos CSS:
Estilos en campos de formulario

Javascripts:
Javascripts para formularios

 
                 
     
 
WebProgreso | Acerca de | Contáctanos | Sitio por Sebastián Largo
df