Formularios en Dreamweaver: leedlo con calma!!!

Formularios:

Todos los formularios se agregan a través del menú "insertar".


Por ello, vamos a "insertar", "formulario" , "formulario".

El primer elemento que debemos poner (obligatorio), es el "Formulario". Dentro de él, colocaremos los controles.

Ahora, con la "base" del formulario ya puesta, fíjate que parece un recuadro con el borde discontinuo en color rojo. Dentro del formulario, ya podemos insertar los controles.

Para organizar los controles dentro del formulario, podemos ayudarnos de una tabla (o una capa).

Esa tabla puede tener borde "cero" (ser invisible), por eso "grosor del borde", 0 pixeles.

La idea es colocar, en una de las celdas vacías, las etiquetas (nombre, dirección, teléfono) y en otra "columna", justo a su derecha, el campo vacío, donde la gente pondrá el dato (DW llama a esto "controles").

El primer control (dato) , lo ponemos desde "insertar" , "Formulario", "campo de texto".

Todos los controles comparten la misma ventana:

ID: etiqueta (opcional, es para localizarlo dentro de DW). Consiste en un texto descriptivo, que además, activa el formulario al hacer clic sobre ella.

Si la etiqueta está junto al control, dejamos el primer estilo. No necesitamos cambiar nada más, para que funcione correctamente.

Pero si está separada (en otra tabla, capa....), hay que marcar la segunda opción de ese menú para que funcione (o sea, "adjuntar etiqueta de título utilizando el atributo FOR").

Si no usamos un ID descriptivo, DW pondrá uno automáticamente (OJO!!!!).

Una vez lo tengamos, pulsamos en "Aceptar".

Ya tenemos la etiqueta y el control (o sea, título y zona en blanco, donde escribe la persona).

Sólo tenemos que mover ese control a otra celda (para que no estén juntos y haya una mínima separación estética).

Pulsa y arrastra para conseguirlo.

Ahora, con la vista "en vivo", podrás comprobar cómo funciona ese control.

En cuanto hagas clic sobre la etiqueta (el título, que podría ser "dirección de correo"), ya te lleva el cursor a la casilla en blanco.

Si seleccionaras el tipo "Varias líneas", el campo de texto pasaría a ser un "área de texto".

(Ver parte inferior de la pantalla, donde pone "TIPO")

Ancho car = ancho total de esa casilla de "control", indicando cuantos caracteres serían visibles.

Car. máx = máximo número de caracteres que permitiremos en ese "control" (ponle 100, por ejemplo).

Val. inicial = valor inicial, por si quieres que aparezca algo de ejemplo, para que la gente sepa qué puede poner (p.ej: ponga aquí su e-mail).

NOTA: El ID nunca podrá tener espacios, ni caracteres especiales (tildes,comillas,eñes....).

Si quisiéramos poner un campo "contraseña", es necesario repetir los pasos, para crear una nueva etiqueta y otro control.

Eso sí, el tipo será "contraseña". De esa forma, lo que escriba, no será visible (va enmascarada, protegida por "asteriscos").

Podemos insertar campos donde la gente responda "sí" o "no".

Lo que haríamos, sería ir "insertar", formulario , "casilla de verificación".

Recuerda dentro de "estilo", la opción "adjuntar etiqueta de título utilizando el atributo FOR".

En "posición": elige, "antes del elemento de formulario".

Acepta y arrastra a la derecha esa casilla vacía (la que la persona puede activar o desactivar, para decir "sí" o "no").

Recuerda que el estado inicial significa "cómo aparece de entrada" (activado / desactivado).


Más cosas:

Botones de opción = empleados para que el usuario elija entre varias opciones que le proponemos, donde sólo podrá elegir una de ellas.

Ponemos "deseo recibir información de":

Y vamos a "insertar" , "formulario", "botón de opción".

Si va todo junto (y no llevamos el control a otra tabla, celda, etc), podemos dejar activado "ajustar con etiqueta de rótulo", si no, la que está debajo ("adjuntar etiqueta de título....").

Repetimos el último proceso, para conseguir otro bóton "redondito" que podamos marcar, en este caso, con un "No" (el "sí", ya lo tenemos).

TRUCO: para que al marcar una, se desmarque la otra, los botones de opción tienen que tener el mismo nombre.

¿Dónde se cambia esto? En la parte inferior, donde pone "Botón" (y debajo, "Radio" o la palabra que DW elija por nosotros, si no pusimos nada diferente).

Estos botones sólo permiten un valor (sí / no). En cambio, las casillas permiten que marquemos varias (si nos interesan varias opciones, p.ej.).

Para ello, tenemos que insertar una lista o menú.

Adivina! Insertar, Formulario, "Seleccionar Lista/Menú".

Ese ID, podría llamarse "intereses". Con etiqueta "Quiero recibir información sobre:".

Justo debajo, en la parte inferior, fíjate en que el menú es "específico" para esto que estamos haciendo. Ahora, sólo aparece la opción de "menú" o "lista".

Cuando se trata de un menú, el usuario sólo podrá elegir uno de los valores, pero si se trata de una lista puede permitirse que se seleccionen varios simultáneamente.

Dejamos activada la casilla "lista" (por ese motivo).

El campo "Alto", sirve para establecer el número de líneas que se mostrarán de la lista. En el caso de haber elegido "menú", no estaría activada.

Los valores que aparecen en la lista, se introducen pulsando justamente donde dice "valores de lista....".

En la pestaña que aparece, "listar valores", podemos introducir elementos de la lista.

Empezamos por "informática". El siguiente elemento, lo añadimos pulsando en el símbolo "+".

Podemos añadir "música", luego "animales", "cine", "deportes"....

Ordenada el orden, pulsando en los símbolos de "arriba" y "abajo".

En la parte inferior, recuerda que puedes especificar cuál estará seleccionado inicialmente.

Por último, y para que todo esto funcione, tenemos que insertar un botón que envíe el formulario.

Por ello, llévame a "insertar" , "formulario" , "botón".

No necesitamos "etiqueta de rótulo", puedes darle a aceptar y ¡ya está!

El botón puede tener asignada una de las propiedades que aparecen en el campo "acción":

-enviar formulario
-restablecer formulario (lo borra)
-ninguno (ejem!!)

El valor "enviar", permite cambiar el texto que sale en el botón de "enviar formulario" (ver "VALUE", cuando hicimos el botón con el programa CSS Button....).

Para que el formulario sea enviado, deben cambiarse las propiedades del mismo. Podemos seleccionarlo haciendo clic en su etiqueta.

Le indicamos la acción que deseamos que realice, cuando el usuario haga clic en el botón "Enviar". La idea es enviarlo por correo.

Por eso, la "acción" será:

mailto:xesusvazquez@yahoo.es (o el correo que toque)

No olvides alinear la tabla y darle colores al fondo, para que guarde el mismo aspecto que el resto de tu página web.

Con F12, podemos ver como queda este ejercicio. Recuerda que antes, debes guardarlo!!!

Si lo prefieres, junto a inspeccionar, debería aparecer una "bola del mundo", donde al pulsar, nos permita ver como quedaría en diferentes navegadores.

Tras aceptar la advertencia de que estamos enviando un mensaje (típico en Internet Explorer), fíjate que debería aparecer una ventana de Outlook, preguntándote el asunto y el texto a enviar. Si no aparece.... consulta tu bandeja de correo! El mensaje debería haber llegado sin problemas.

(También puede deberse a que Internet Explorer 9 tiene problemas al cargar ciertas páginas, algo que no ocurre en Google Chrome, ojo!!!)