Formularios con dreamweaver

Si es con dreamweaver es simple... aunq codigo codigo tambien.




I.- Conocimientos previos.




1.- El formulario esta compuesto por campos de distinto tipo. Los tipos son:




* text: es un campo de texto de una linea. El tipico campo donde ingresamos nuestro nombre


* password: igual al anterior pero en este no se ve el texto que se ingresa. El texto es reemplazado por asteriscos (*******). Es usado para ingresar contraseñas.


* texarea: campo de texto de varias lineas. El tipico campo donde ingresamos un mensaje en un formulario de contacto.


* hidden: este es un campo oculto. Normalmente contiene un valor que queremos se reciba en la pagina destino, pero que no vea el usuario. Sirve por ejemplo para pasar un codigo de usuario o un dato que se completa automaticamente.


* select: es un campo de seleccion en que tienes una lista desplegable de opciones.


* checkbox: un pequeño cuadro de confirmación. Es usado para que un usuario elija entre "Si" o "No" sobre una pregunta. Es el que aparece cuando una pagina te consulta si guarda la contraseña o si "Aceptas las condiciones de...."





Bueno... existen algunos más, pero para comenzar estos estan bien.





2.- Los elementos anteriores tienen un valor. Algunos como text y password toman el valor que se ingresa (Por ejemplo si el campo es nombre, el nombre ingresado será su "valor"). Otros tienen valores predefinidos, aunque al seleccionar una u otra opcion este varia.





3.- La sintaxis de un elemento de formulario text, password y hidden es más menos:





<input type="xxxxxx" value="yyyyyy" name="zzzz">






donde xxxx es el tipo (text, hidden, password, etc)


yyyyy es el valor incial en el caso de text, hidden y password.





4.- La sintaxis de un elemento tipo select es:





<select name="seleccion" id="seleccion">


<option value="x1">1</option>


<option value="x2">2</option>


<option value="x3">3</option>


</select>





Donde el valor entre <option ...> y </option> es lo que verá el usuario y el texto en el value (x1,x2,x3) es el valor que tomará ese elemento si se selecciona su opcion.





5.- El campo checkbox tiene la sgte:





<input type="checkbox" name="checkbox" value="hola">





Este campo tiene un comportamiento "Extraño". Si se selecciona su "value" (valor) es el que se indique ("hola" en el ejemplo), pero si no se selecciona el campo no envia ninguna valor (Por lo tanto "no existe" para la pagina que recibe los valores)




6.- Por ultimo el campo texarea es el "patito feo" ya que no tiene un value propiamente tal.




Su sintaxis es:





<textarea name="textarea1">hola hola hola</textarea>






Su valor será lo que se escriba entre los <texarea... > y </textarea>.




7.- En los campos text, password y textarea si se escribe algo en el "value" este valor se verá por defecto pero puede ser modificado por el usuario. Normalmente se usa para "ayudas"... por ejemplo si el campo es tipo nombre lo relleno con "Juan Perez" para que la gente sepa el orden de llenado nombre+apellido





Bueno... finalmente falta ver el tema del formulario en si.





1.- El formulario es un conjunto de elementos que estan encerrados entre la etiqueta <form> y </form> como:





<form name="form1" method="post" action="">


<p>Nombre:</p>


<p>


<input type="text" name="textfield">


</p>


<p>Mensaje: </p>


<p>


<textarea name="textarea"></textarea>


</p>


</form>





2.- El formulario tiene algunos atributos:




name: es el nombre que se le dará al formulario




method: es la forma de envio. Puede ser "post" o "get". Enviando por post los campos no se ven, es mas seguro. Enviando por get los campos pasan por la url... Un ejemplo de get es que si la pagina que recibe se llama pagina2.php y enviaste el formulario de arriba verás la direccion como:




pagina2.php?nombre=jorge&&mensaje=hola


Mirando un poco con detalle los valores podras leerlos, modificarlos y quien sabe que mas...






action: este campo decide la pagina o direccion de email a la que será enviado el formulario. Si eliges una direccion de email la sintaxis es:





<form name="form1" method="post" action=mailto:ayuda@desarrolloweb.com>






Si eliges una web que procesara los datos debe ser:





<form name="form1" method="post" action="paginadestino.html">





Nota: Todos lo que entre <form> y </form> será enviado... y lo mas importante lo que no lo este no será enviado por ningun milagro de nadie...





Por ultimo el formulario se envia con un bonton que es un elemento como los anteriores pero su tipo es submit.




Su sintaxis es:





<input type="submit" name="Submit" value="Enviar">



En este caso el name no es importante y el value es el texto que se mostrará en el boton.





II.- Manos a la Obra con Dreamweaver:





1.- Dreamweaver tiene una barra especial de construccion de formularios. Este ubicada en la parte superior abajo del menu principal.





Debes picar en "Insertar" -> "Formulario"





2.- Para construir el form debes estar en el modo visual para lo siguiente:






* Primero picas la primera etiqueta que dice "Formulario". (Cuadradito amarillo con una linea punteada roja dentro... primero de la lista de cosas de formulario)


* Aparecerá una linea roja formando un cuadrado. Tienes que posicionarte dentro de esta e ir insertando todos los campos que tu formulario requiera (Dentro de la linea roja.. ya qeu asi estaran entre las etiquetas <form>)


* Luego cuando pongas un campo debes mirar en la ventana propiedades (Normalmente en la parte de abajo de tu DW (Dreamw...)). ahi podras cambiar el name (Nombre), value (Valor), y agregar opciones al campo de tipo select (Lista/Menu). Para cambiar las propiedades de algun campo debes picarlo y ver sus opciones en "Propiedades".


* Finalmente para cambiar las propiedades del form debes picar la linea roja y cambiar sus atributos name, action, method y todo eso en la misma ventana propiedades.