Taller de Adobe Dreamweaver: Panel Insert, pestaña Forms

¡Hola! ¿Cómo andan? ¿Preparados para otra clase de Dreamweaver? En esta clase, la numero 6, vamos a ver máaaas herramientas del panel Insert.

Y sí… son muchas herramientas, pero a no aflojarle, que esta es la parte más pesada pero es importante un reconocimiento de la interfase para ya ir sabiendo por lo menos los nombres y qué son cada una de las herramientas, así cuando las expliquemos a fondo con sus usos, no nos sonarán a chino mandarín.

Hoy nos toca revisar las herramientas de la pestaña “Forms”, y si podemos llegar a ver la pestaña “Data”, mejor, así sacamos esto mas rapido, y ustedes que siguen el curso tienen más para estudiar durante la semana (me imagino que estarán probando las cosas que vemos en cada taller no? jeje).

Panel Insert (insertar), tercera parte.

Pestaña Forms:

• Form: ¿A que no saben para que sirve esta herramienta? ¡Correcto! para insertar un formulario. Podemos usarla tanto en modo de diseño como en modo código.
  Los formularios nos sirven para que los usuarios puedan cargar datos, y así nosotros recibirlos desde nuestra página.
  Cuando un formulario es enviado, envía todos los elementos del formulario con él.
• TextField: Un textfield es un elemento de formulario, es el lugar donde se puede escribir texto, para que luego sea enviado por nuestro formulario.
  Este elemento va dentro de un formulario, y cuando este se envía, enviará con él todos los textfields también.
  Un ejemplo de un TF para que tengan una idea es el lugar donde ponen su nombre o su nickname, cuando se registran en una página.
• Hidden Field: Un Hidden Field es un TextField, sólo que tiene una propiedad que lo hace oculto, así el usuario no lo puede ver, ni cargarle datos.
  Sirven para nosotros, los administradores de sitios web, para poder precargarle información que necesitemos, un ejemplo fácil, qué navegador esta usando (en realidad es mas útil que eso pero ya lo veremos).
• Text-Area: Un Textarea es un campo muy parecido a un textfield, sólo que es más grande, y tiene no solo una fila sino que puede tener varias.
  Sirve para contener textos grandes y también nos ofrece barras de scroll para poder setearle un tamaño, y si el texto excede el tamaño del Text-Area, poder navegarlo con las barras.
• Checkbox: Un checkbox nos permite poner una cajita de checkeo (como las que aparecen al lado de “acepta los términos y condiciones…” estas sirven para que el usuario seleccione una o mas, entre varias opciones.
• Radiobutton: es igual que un checkbox, sólo que permite elegir uno y solo uno entre varios radiobuttons. Además, clickeando uno seleccionado, no se deselecciona (como pasa con los checkbox), aunque sí lo hace cuando clickeamos otro radiobutton del grupo.
• Radiogroup: es un atajo que nos brinda Dw para poder poner varios radiobuttons que pertenezcan a un mismo grupo, y además nos pone cada radiobutton entre las etiquetas “label” que nos permiten dar una identificación a cada uno.
• List-menu: Nos permite poner un menú desplegable de selección para que el usuario pueda elegir entre una de las opciones que le pongamos. Se usan mucho en los registros para seleccionar la fecha de nacimiento.
• Jump-menu: es como un list-menu, solo que sus opciones nos permiten llevar a quien las elija a otra página, u otro archivo.
  Por ejemplo, podemos tener una lista de opciones de varias páginas, y que cuando el usuario clickee una en el menú, lo lleve directamente.
• Image-field: Es un campo en el que podremos poner una imagen, y que al clickearlo enviara el formulario con lo que tengamos cargado.
  En sí, sirve como botón de “enviar” pero con la diferencia que podemos ponerle la imagen que nosotros queramos.
• File-field: Inserta una casilla con el botón de “examinar…” para que el usuario pueda buscar y enviar un archivo a nuestro sitio.
• Button: nos permite insertar un botón, que va a tener varias funcionalidades que podremos elegir. Por ejemplo, enviar el formulario o borrar los campos del mismo entre otras cosas.
• Label: sirve para poner una descripción a un campo, a modo de ejemplo:
  ¿Acepta los términos? Aquel texto es un Label de la checkbox.
• Fieldset: La herramienta fieldset nos permite agrupar campos de un formulario.
  Podemos crear un Fieldset y dentro poner los text-fields de datos del usuario, crear otro fieldset y poner los checkbox de preferencias, otro textfield y poner el boton de “enviar formulario” o “borrar formulario”.
• Spry validation textfield: esta opción nos permite agregar un campo de texto (textfield) que además de permitir que el usuario ingrese datos, podemos seleccionar que tipo de datos debe contener el campo y, si el usuario ingresa otra cosa, cuando intente enviar el formulario, le saldrá un cartel de error.
  Esto sirve por ejemplo si queremos que el usuario ingrese un email en nuestro campo, que ponga realmente un email y no cualquier cosa.
• Spry validation textarea: Esta opción nos permite crear un textarea con validación. Al igual que el anterior si el textarea no cumple con los requisitos de validación, al intentar enviar el formulario nos dará error.
• Spry validation checkbox: y seguimos con validaciones. Es igual a un checkbox común, pero verifica por ejemplo, si tenemos varios checkbox en un grupo y queremos que al menos uno este seleccionado (entre otras cosas).
• Spry validation select: al igual que el list-menu que vimos anteriormente este es igual con la diferencia que valida que el usuario haya elegido al menos una de las opciones del selector.

Conclusión

Bueno, espero que no estén muy cansados de ver tantas herramientas (yo si :p ) y no se preocupen (o preocúpense) ¡¡porque vienen muchas más!!

La clase que viene espero que ya estemos terminando con el panel Insert y ya dar comienzo a la creación de nuestra primera página.

Vayan practicando las cosas que vimos, mirando como funcionan y sus opciones.

No se queden solo con lo que vemos acá y nada mas, véanlo en vivo y en directo desde el Dw, así pueden entender todo lo que hace el programa, y si se animan, véanlo en modo código así se van familiarizando con el HTML.

¡Saludos!
Hasta la próxima.