Vamos a realizar a continuación el ejercicio de formulario final con HTML CSS y JavaScript están listos.
Vamos
el objetivo del ejercicio es crear un proyecto con HTML CSS y JavaScript para realizar un formulario
que incluya también validaciones y al finalizar deberemos observar lo siguiente según se muestra como
primer paso vamos a crear un nuevo proyecto.
Este nuevo proyecto se va a llamar formulario final lo depositamos en la ruta mostrada y damos clic
en Finalizar
ahora vamos a agregar un nuevo archivo.
Este archivo va a ser de tipo CSS el archivo se va a llamar estilos ese archivo lo vamos a depositar
a nivel raíz.
Por lo tanto el campo de folder está vacío y damos fe en finalizar como siguiente paso vamos a crear
un archivo de tipo JavaScript.
Ese archivo se llama validaciones y también nos vamos a depositar a nivel raíz y damos clic en Finalizar
ahora vamos a modificar nuestro archivo inexperto HTML.
Este ejercicio básicamente es el mismo que vimos cuando trabajamos el concepto de formularios HTML pero
ahora ya vamos a agregar las validaciones de JavaScript.
Así que antes de hacer el envió del formulario vamos a validar que cada uno de los campos tenga la información
que necesitamos.
Esto para garantizar que la información que se envíe al servidor sea lo más correcta posible.
Así que mucho del código que vamos a ver a continuación es el mismo que ya trabajamos en el ejercicio
de formularios.
Sin embargo si los ponemos nuevamente de manera completa para que no dependan de ningún otro proyecto
en este caso puedan trabajar directamente con este ejercicio
agregamos el doc html.
Abrimos nuestro elemento HTML también el cabecero el meta y agregamos el título ejercicio formulario
y vamos a agregar dos links.
En este caso el link para nuestra hoja de estilos puntos CSS y el link para nuestro archivo validaciones
punto J.V.
Así que en este momento ya tenemos claro tanto el uso de estilos los cuales los podemos manejar en un
archivo externo y también el uso de JavaScript.
En este caso también lo vamos a manejar en un archivo externo y cerramos el cabecero de nuestro documento
HTML.
Abrimos el cuerpo y agregamos nuestro formulario.
En este caso asignamos un nombre del formulario este formulario se llama Form 1 y posteriormente cuando
hagamos Summit de este formulario se va a llamar el R.L definido en este elemento de acción.
Sin embargo este recurso en servidor en este momento no lo vamos a trabajar.
Como hemos comentado este paso lo vamos a realizar en otro curso en el curso de Servlets y jote.
Pero también se puede utilizar cualquier otro lenguaje de programación para procesar este formulario
no solamente con Java utilizando usables y JSP sino que podemos utilizar cualquier otro lenguaje como
punto net PHP o más lenguajes del lado del servidor para procesar este formulario HTML ahora también
agregamos las siguientes características.
Vamos a utilizar el método Bost tenemos varios tipos de envío de información hacia el servidor dos de
ellos es el método GET y post.
La diferencia entre el envío de tipo Get o el envío de tipo post es que si utilizamos G.T de hecho podríamos
hacer aquí la prueba en lugar de utilizar post.
Podríamos utilizar el método G.T también este es el valor por default cuando hacemos el envío de información
así que si eliminamos este atributo de método entonces el envío va a ser tipo get.
Pero la diferencia entre post y G.T Es que si utilizamos G.T todos los parámetros se van a visualizar
en el where L el cual se va a concatenar cada uno de los parámetros en este R.L que se va a enviar al
servidor así que toda la información se va a concatenar como parámetros si es que utilizamos.
Y debido a que en el formulario tenemos un envío de un campo de tipo password entonces obviamente lo
recomendable es que no se concatenan estos parámetros directamente en el R.L que se va a enviar al servidor
sino que se envíen en el mensaje pero no directamente concatenados sino en el mensaje HTTP el cual estamos
enviando al servidor por lo tanto lo recomendable es que utilicemos este método POST.
Esta es una característica cuando trabajamos ya en nuestro formulario del lado del servidor por lo tanto
no es importante que quede claro este concepto en este momento ya que este concepto lo vamos a estudiar
a detalle en el curso de Servlets y JSP.
Pero cabe mencionar que estamos utilizando este método POST para que el campo de formulario y tampoco
ninguno de los otros campos se muestre directamente en el R.L sino que se va a enviar estos campos como
parte del mensaje HTTP que se envía al servidor pero ustedes pueden hacer la prueba cambiando este método
de post y poniendo la palabra Get y van a poder visualizar cómo cada uno de los campos de este formulario
se va a concatenar al R.L que se envía al servidor y lo siguiente es lo nuevo que estamos agregando
a nuestro formulario lo que estamos haciendo es declarando el atributo submit y lo que vamos a hacer
es que cuando se ejecute este método de envío del formulario entonces lo que vamos a hacer es mandar
a llamar el método validar forma y lo que hacemos con este operador dis estamos enviando como parámetro
todo el objeto de tipo form de HTML ya que la idea de validar el formulario es que podamos acceder a
cada uno de los campos de este formulario HTML.
Por lo tanto enviamos como parámetro este objeto de tipo for el cual envía prácticamente toda la etiqueta
HTML todo el objeto Dom de tipo form y vamos a poder acceder así a cada uno de los atributos de este
formulario.
Este concepto también es similar al lenguaje Java así que si ya venimos de estudiar los cursos anteriores
de Java va a ser más fácil entender cada uno de estos conceptos pero básicamente este operador dice
lo que procesa es el elemento que está ejecutando esta acción así que en este caso como estamos trabajando
en este momento con el elemento de Forth entonces lo que se envía a este método de validar forma es
el elemento HTML de form y por último este método va a regresar o fouls.
En dado caso de que este atributo reciba un Fool's como respuesta de validar el formulario entonces
ya no se ejecuta este método Summit.
Pero si recibe Chú como parte de la validación de este formulario entonces sí se va a hacer el envio.
A este recurso definido en el atributo Action.
Por lo tanto esta función de validar forma debe de validar cada uno de los atributos de este formulario
y en dado caso de que cualquiera de ellos tenga un error entonces regresamos.
Falso y al regresar falso ya no se va a procesar ni se va a enviar la información al servidor y en dado
caso de que todos los valores del formulario contengan información válida entonces vamos a regresar
tú y por lo tanto se hace el envío de información hacia el servidor así que básicamente con este ejercicio
lo que estamos poniendo en práctica es que únicamente vamos a enviar la información al servidor.
En dado caso de que todos los valores del formulario tengan información las validaciones de cada uno
de nuestros formularios.
Nosotros definimos cuáles son las validaciones correctas.
Sin embargo en este caso en este formulario que estamos trabajando con que tenga algún valor válido
entonces lo consideraremos como un valor correcto para enviarse al servidor como siguiente paso vamos
a agregar los campos a nuestro formulario.
Estos son los mismos campos que ya hemos trabajado en el ejercicio de formularios HTML así que únicamente
los vamos a mencionar agregamos un valor oculto.
Este valor no se va a mostrar en el formulario pero sí se va a enviar al servidor posteriormente declaramos
una tabla y en esa tabla vamos a agregar cada uno de los parámetros siguientes agregamos un título formulario
registro de datos.
También en esta tabla le vamos a asignar el estilo Juan con énfasis y este selector lo vamos a definir
posteriormente en el archivo estilos CSS.
Esto es lo mismo que ya hemos trabajado también en el ejercicio de formulario HTML así que cualquier
duda pueden revisar también este ejercicio ya que únicamente vamos a mencionar en este caso nos vamos
a enfocar a la validación con JavaScript
agregamos una primer columna para capturar el usuario utilizamos un elemento de tipo input y le solicitamos
al usuario que capture este elemento de usuario.
Este va a ser el primer elemento que se va mostrar en el formulario y por lo tanto lo que vamos a hacer
es que en el atributo de un Focus vamos a indicar por medio de JavaScript que seleccione este componente
así que el cursor cuando se carga esta página de índex punto HTML en automático va a seleccionar este
campo de tipo input así que para poder seleccionar este campo de manera automática utilizamos el atributo
de Focus y mandamos a llamar el método disputo Select.
Recordemos que en este caso este operador dis está haciendo referencia a este elemento HTML de tipo
input así que el operador dice lo que almacena es el elemento que en este momento está activo así que
debido a que estamos dentro de este elemento HTML de tipo input entonces este operador dice básicamente
contiene este elemento HTML de tipo input y por ello es que podemos mandar a llamar el método select
para que el cursor.
Una vez que se carga esta caja de texto el cursor en automático se posicione sobre esta caja de texto
y podamos empezar a escribir el usuario directamente cuando se carga el formulario con eso cerramos
nuestra primera columna en el cual capturamos el usuario cerramos nuestro primer registro y vamos a
continuar codificando nuestro formulario índex punto HTML
ahora vamos a agregar el campo de password definimos un elemento de tipo input y en este caso también
cuando hacemos clic sobre este elemento vamos a seleccionar este campo de tipo input.
Por ello agregamos el atributo de un Focus 10 puntos Select
posteriormente agregamos la columna de tecnologías de interés
utilizamos un input de tipo check box y agregamos tres elementos.
El usuario puede seleccionar un check box de IAVA punto net o de PHP todos estos elementos recordemos
que son de tipo check box y se llaman igual.
En este caso tecnología y si el usuario selecciona más de un valor entonces se va a crear un arreglo
de JavaScript y vamos a poder enviar esta información como un arreglo de datos.
Si el usuario únicamente selecciona un elemento entonces ya no lo podemos procesar como un arreglo sino
únicamente como un valor individual.
Esto es importante ya que cuando estamos trabajando con JavaScript tenemos que hacer la diferencia si
estamos trabajando con un arreglo o únicamente con un elemento individual.
Por ello es que mencionamos en qué casos se crea un arreglo cuando seleccionamos varios elementos o
cuando se crea únicamente un elemento de manera individual.
Entonces es cuando el usuario únicamente selecciona alguno de estos elementos
positivamente.
Agregamos la columna de género y utilizamos un radio botón.
Recordemos que este radio botón únicamente se puede seleccionar una opción en dado caso de que estemos
asociando el mismo nombre y como en este caso estamos utilizando el nombre de género.
En ambos casos entonces el usuario solamente puede seleccionar hombre o mujer pero no ambos a la vez
y con eso cerramos la columna de género
ahora agregamos nuestra columna de ocupación vamos a utilizar un tipo select y vamos a agregar los option
de profesor ingeniero y jubilado.
También agregamos una primera opción que se llama seleccionar y una última opción que se llama otro
y con eso cerramos nuestro tipo select
y agregamos ahora la columna de música favorita y agregamos también un elemento Select pero de tipo
múltiple.
Así que el usuario puede seleccionar más de una opción.
A diferencia del Select de ocupación en este caso únicamente puedes seleccionar una opción pero en este
caso el tipo de música estamos indicando que es de tipo múltiple y por lo tanto el usuario puede seleccionar
varias opciones.
Similar al manejo de check boxes.
También si el usuario selecciona únicamente una opción entonces se procesa de manera individual este
elemento pero si el usuario selecciona más de una opción entonces los valores se procesan como un arreglo
cerramos nuestra columna y también cerramos el renglón
y vamos a agregar la siguiente columna a la columna de comentarios.
En este caso es un texto Uriah y estamos indicando un ancho y un largo para ese texto área.
También agregamos el atributo de un Focus disputo select
y con eso cerramos también esta columna y este renglón vamos a agregar por último los botones de limpiar
o de hacer Summit así que agregamos otro registro y agregamos el botón de tipo input el cual va a ser
de tipo reset.
Así que con esto vamos a limpiar cada uno de los campos de este formulario.
Esta es una función que realiza en automático el código de HTML así que al agregar este botón de reset
en automático se van a cargar todos los valores por default de este formulario y también agregamos el
botón de Submit en dado caso de que presionemos este botón de Submit se va a mandar a llamar.
El evento on Summit de este formulario el cual definimos al inicio de este formulario y es en ese momento
cuando se va a realizar la validación de JavaScript cerramos nuestra columna y también nuestro registro.
Con terminamos la tabla del formulario y también cerramos el elemento de forma cerramos también el body
y nuestra etiqueta de HTML.
Recuerden que pueden dar clic en el nombre del archivo para cualquier problema que tengan.
Sin embargo se le solicita codificar línea a línea.
Este ejercicio para que quede claro de nueva cuenta el manejo de formularios HTML pero ahora agregando
el concepto de validación con JavaScript.
Vamos a detener hasta aquí este video y en el siguiente video vamos a continuar codificando nuestro
ejercicio de formulario final con HTML CSS y a la escuela.