Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Dreamweaver CC 2017 esencial

Botones en Dreamweaver CC 2017. Validación del formulario

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Para enviar los datos de los formularios es necesario añadir botones, así que en este vídeo aprenderemos cómo crearlos y qué tipos de botones tenemos. Además veremos opciones de validación automática de los formularios.

Transcripción

(hombre) Para enviar el formulario necesitaré añadir botones. Va a ser interesante, además, de añadir este botón, vamos a verlo en un momento, porque me va a dar pie para explicar una cosa muy importante. Los botones los tenemos en la parte de abajo, de hecho, tengo botón enviar y botón restaurar. En realidad son el mismo botón solo que con una pequeña diferencia. Voy a seleccionar el último de los Inputs, y voy a añadir un botón. Lo voy a colocar después. En realidad aparece un botón, no tiene más truco. Pero ese botón no va a servir de absolutamente nada. Por dos motivos, porque hay que definir cual va a ser el tipo de actuación que va a ejecutar ese botón, y en segundo lugar, porque ese botón está fuera del formulario. Cuando estamos añadiendo elementos en vivo, como en la vista de diseño, tenemos que tener cuidado con donde estámos añadiendo los elementos del formulario. De hecho, ya he añadido muchos elementos pero realmente, en el formulario solo hay uno, aquí podemos verlo. Todos los que estén fuera del formulario, el formulario no va a ser capaz de enviarlos a la URL, que he definido. Así que tenemos que tener muchísimo cuidado con poner todos los campos y los botones que he ido añadiendo siempre dentro de ese formulario. De entrada ya se ve que se ven distintos porque van más seguidos. Si selecciono este botón voy a ver que dentro del panel de propiedades, a parte de el nombre, este es simplemente el identificador, el Name, aquí por ejemplo, podría llamarlo "B_enviar", tiene como propiedades Value, que es el texto que va a aparecer aquí, por ejemplo, "Enviar datos", por supuesto "Título", botón de envío de datos. No me canso de decir que es imprescindible añadir estos atributos alt y title. Y luego, lo que es verdaderamente importante que es para que va a servir ese botón. Voy a volverme al código fuente, en realidad, solamente se ha añadido la etiqueta Input, o sea, un botón en realidad es un Input, pero un Input que es de tipo Botón, y es tan fácil como eso, en el momento en que yo añado un botón, añado un Input con ese tipo. Pero, realmente no es el único tipo de botones. Voy a seleccionar el botón, voy a añadir un segundo botón que sea Enviar, y voy a añadir un último botón que sea Restaurar, y vamos a ver cual es la diferencia entre uno y otro. En realidad aparecen con diferentes textos. Pero si me voy a la vista de código veo que a parte del tipo Button, que es el que realmente genera un botón, tengo otros dos tipos de botón, que son el Submit y el Reset. Los que pongo como Submit, son los que se ocupan de hacer que cuando se hace clic sobre ellos, automáticamente, sin programar nada, se envíen los datos al formulario que aquí tengo seleccionado. Y en el caso de Reset, automáticamente lo que va a hacer, es que va a borrar los datos que yo tenía en el formulario. Me lo va a dejar como si no se hubiera hecho absolutamente nada con él. Voy a eliminar entonces este primer botón que he creado, y voy a volverme de nuevo a esta vista. En realidad todavía hay un tipo más de botón diferente. No aparece dentro de insertar, pero sí que puedo utilizarlo desde la vista de código. Y serían los botones de tipo Button. Esta es una etiqueta HTML5 que funciona un poco distinto. Sirve para añadir un botón y que este botón no tenga una relación directa que tienen los inputs dentro del formulario. De hecho estos botones también están pensados para ponerlos dentro de cualquier otra parte de mi estructura HTML. Y de hecho, para que envíen los datos, pues, digamos que la forma de trabajar es un poco distinta, aunque al final, si me vuelvo otra vez a la vista en vivo, vemos que el aspecto sigue siendo exactamente el mismo que en el caso de los Inputs. No obstane, es bueno comentar también de su existencia. Para comprobar que efectivamente este formulario está funcionando, siempre puedo... verlo en el navegador, y aquí podría añadir mi nombre, por ejemplo, podría añadir... mis apellidos. Podría añadir un texto que no sea un mail correcto, añadir una contraseña, o añadir un número, y cuando pulse en reestablecer, vemos que efectivamente me ha borrado esos valores. O también, que cuando pulse en envíar, me diga que tengo que completar ese campo porque es requerido. Lo relleno y pulso en enviar, pero no, tampoco, porque falta este otro campo. Pulso en enviar, y tampoco, porque ha detectado que esto no es un Email válido. Vale, pues aquí tendría que añadir esa @ y la dirección. Pulsar en enviar, me pide que también es requerido. Y ya al final lo que hace es enviar ese formulario a la página teórica, a la página que no he creado todavía pero que está configurada dentro del atributo Action. Hemos visto que todas estas validaciones las ha hecho el navegador, las ha hecho automáticamente y sin necesidad que yo haga absolutamente nada. Gracias a que en realidad todo eso viene definido dentro de los atributos HTML que hemos ido generando desde el panel de propiedades.

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.