Dreamweaver CC 2017 esencial

Etiqueta form en Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1267 cursos !

Prueba gratis Mostrar modalidades de suscripción
Para empezar, vamos a aprender lo necesario para construir formularios: las opciones básicas de la etiqueta form, que es la que HTML utiliza para crear formularios. Aprenderemos a crear formularios y a configurarlos.

Transcripción

Es obvio que las páginas HTML sirven para dar información a los usuarios. Pero igual, también sirven para recibir información desde los usuarios. La comunicación puede ser bidireccional entre lo que es el servidor y lo que es el cliente. Y esta comunicación bidireccional, este envío de datos desde el cliente hacia el servidor se va a realizar a través de los formularios. En realidad los formularios se están utilizando constantemente, aunque a veces no se tiene mucha conciencia de que eso está ocurriendo. Estamos enviando datos constantemente al servidor con información que nos interesa que tenga, por ejemplo, cuando entramos en una tienda, obviamente, cuando he hecho una compra y relleno los datos de mi dirección postal para que me puedan enviar el producto que he comprado, pues tengo claro que eso es un formulario y que sirve precisamente para enviar esos datos. Pero hay muchas otras veces, que en realidad se están enviando datos sin que yo sea muy conciente de ello. Hay formularios que son transparentes. Por ejemplo, pues podría ser cuando selecciono un producto y pulso en que lo compre. Yo no he rellenado ningún campo, pero sin embargo esos datos hay que enviarlos al servidor para que sepa que se está efectuando una venta. Todos esos envíos de datos van a depender entonces de algo. Tiene que haber algún sistema para que el HTML recupere información y la pueda enviar. Estas etiquetas HTML van a ser los formularios Un formulario sirve para recuperar información de la manera que sea y para enviarla al servidor. Dentro de Dreamweaver, para trabajar con formularios, tenemos dentro del panel "Insertar" el apartado "Formulario". Dentro de él tengo las etiquetas HTML, típicas de "Formulario". En realidad hay mucho más, porque aparte de este apartado "Formulario", tengo los componentes de "Bootstrap", donde hay algunos de ellos que son controles propios de "Formulario". Los elementos de "jQuery UI", dentro de los cuales pues también voy a tener algunos elementos propios de "Formulario" un poco más avanzados. Pero básicamente, todos ellos se van a basar en etiquetas HTML de formulario que las podemos encontrar dentro del panel de "Insertar". Para poder trabajar con formularios, lo primero que necesito es una etiqueta "Formulario". Puedo añadirla, pues de las maneras habituales. Por ejemplo, seleccionando dónde quiero que vaya ese formulario, haciendo clic sobre el formulario y pidiendo que me anide dentro de la etiqueta que he añadido. En realidad, solamente me ha añadido una etiqueta "form" y un poquito de texto dentro de ella. Ese texto básicamente sirve a Dreamweaver para que pueda hacer selecciones fáciles sobre el formulario. Si me paso a la vista de "Diseño", tiene un poquito más de interés. Dentro de esta vista de diseño, voy a seleccionar fuera. Se observa que aparece ahora una línea roja punteada. Esa línea roja punteada indica dónde está el formulario o, mejor dicho, cuál es el espacio efectivo que está ocupando el formulario y sirve también para seleccionarlo. Si abro el panel de "Propiedades", teniendo seleccionado el formulario, pues también me encuentro que tenemos bastantes opciones. Opciones, además, algunas de ellas fundamentales. La primera de ellas y que es imprescindible es el "Action". El atributo "Action" de un formulario sirve para definir dónde se van a enviar los datos. Las páginas HTML son páginas estáticas, son páginas que no son capaces de gestionar los datos. Son páginas que muestran información o que permiten que el usuario escriba en campos o haga selecciones. Pero no es capaz de entender qué se está enviando, de procesar datos, de conectar con la base de datos y guardar esos datos en la base. Para eso vamos a necesitar lenguajes de servidor y de hecho el proceso no va a ejecutarse dentro de lo que es el navegador, lo que es el cliente. Todo el proceso de recepción de datos se va a ejecutar dentro del servidor, de una manera completamente invisible. Luego, cuando el servidor termina de procesar los datos, hará lo que se quiera. Por ejemplo, pues puede devolmerme un código HTML en el que tengo una página que me diga que todo ha sido correcto; puede redirigir el navegador a una página HTML estática. Puede hacer muchas cosas, pero siempre voy a necesitar lenguajes de servidor, como puede ser PHP, ASP, JSP o ColdFusion, por ejemplo. Bueno, pues el archivo en concreto que se va a ocupar de gestionar esos datos es lo que yo tengo que poner aquí en "Action". Por ejemplo, pues aquí podría poner "recepcion.php". Y ese PHP tendría que crearlo aparte de lo que es mi formulario y tendría que programarlo para que, por ejemplo, pues enviase un mail con lo que yo envío, o si he creado, por poner un ejemplo, un formulario de contacto. Es interesante tener esto en cuenta para comprender que en realidad tenemos siempre dos partes: una que es el formulario y otra parte que es el que gestiona los datos enviados por el formulario. Yo también puedo, que es una práctica relativamente habitual, añadir código PHP dentro de una página cualquiera, dentro de la misma página del formulario, y hacer que cuando se envia el formulario, se envie sobre la misma página. De esa manera, volvería otra vez, a cuando se hace el envío del formulario, volvería a mostrarme la misma página, pero con algún mensaje que me indicase que los datos se han enviado correctamente. Pero en cualquier caso todo ese PHP va a ser transparente y no se va a ver dentro de lo que es la parte visual, por decirlo de alguna manera. Bien, pues muy importante ese "Action" que llama a un archivo PHP. Otra cosa que también es muy importante en los formularios es la forma en la que se envían los datos, que puede ser "GET" o "POST". Básicamente consiste en cómo van a transferirse los datos desde el formulario en el navegador, hasta la página PHP que los recupere. En el caso de "GET", lo que va a hacer va a ser añadir, cuando envío el formulario, una interrogación y, luego, una serie de pares de nombre de variable igual al valor que se está enviando. Y luego, separado con un "ampersand", otra variable y otro valor, y así una y otra vez. Dicho de otro modo, todos los datos que estoy pasando se están enviando a través de la ruta. Eso hace que el envío sea menos "invisible", entre comillas, y, por otro lado, también, eso va hacer que tengamos una limitación en la cantidad de datos que puedo enviar. Lo que se suele utilizar más suele ser "POST". El envío de datos con "POST" hace que dentro del cuerpo del envío de datos vayan todas esas variables, pero no aparezcan en la URL. Se pueden enviar muchos datos y, además, no sólo envío muchos datos, sino que incluso envío diferentes tipos de datos, como por ejemplo podrían ser imágenes, para hacer que se subiese un archivo determinado. Si me voy a la parte de "Código", Vemos que en realidad se ha creado esta etiqueta "Form", dentro de la cual se ha añadido el atributo "Action" del que hablaba, y tiene un "Method". Y tengo también otros dos atributos que se han añadido: el "ID", el identificador único, que estamos utilizando, de vez en cuando, en algunas de nuestras etiquetas; pero también un atributo "name". Ese atributo "name" es el que sirve, de hecho, para recuperar el nombre del formlario cuando estemos trabajando, por ejemplo, con JavaScript o cuando se haga el "submit", el envío de ese formulario. De hecho, las distintas etiquetas, van a necesitar ese atributo "name" para que puedan añadirse como variables dentro del método "POST". También tengo la opción de pedir que valide o que no valide, y que tenga la forma de autocompletar o no, o sea, que si se ha rellenado este formulario previamente, permita el que el navegador entienda, más o menos, qué es lo que estás añadiendo para poder ayudarte a rellenar ese formulario. La validación también es un tema interesante. Se va a ejecutar dentro del navegador. De hecho yo cuando rellené los datos, cuando vaya a pulsar en el botón de "Envío", lo que hará el sistema, el navegador, será entender que todo está correcto y entonces lo envía, o que es incorrecto y, entonces, mostrarme algún tipo de alertas, de campos en rojo, etcétera. Y esto va a ser previo a lo que es el envío de datos. Luego ya con el envío de datos se gestionarán esos datos dentro del servidor. Y más o menos esto es un poco lo que se puede contar, de entrada, acerca de esta etiqueta de "Formulario". A partir de aquí vamos a empezar a añadir elementos dentro de nuestro formulario.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.