Vamos a realizar a continuación el ejercicio de formularios con HTML.
Están listos.
Vamos
el objetivo del ejercicio es crear un proyecto para poner en práctica el manejo de formularios con HTML
y al finalizar deberemos observar lo siguiente según se muestra
como primer paso vamos a crear nuestro proyecto el nombre del proyecto se va a llamar formularios HTML
y lo depositamos en la ruta mostrada y damos clic en Finalizar como siguiente paso creamos un archivo
de tipo CSS en el archivo se va a llamar estilos y lo depositamos a nivel raíz de nuestro proyecto y
damos clic en Finalizar
vamos a modificar a continuación nuestro archivo índex punto HTML el cual va a contener el formulario
HTML que vamos a trabajar en este proyecto
vamos a lo siguiente agregamos un jet y al título ejercicio formulario y agregamos un link hacia nuestro
archivo.
Estilos puntos CSS y cerramos el elemento de Get.
También vamos a agregar ahora un Bodhi y vamos a utilizar la etiqueta form para agregar un formulario
a este documento HTML.
Vamos a indicar lo siguiente En este caso para trabajar un formulario con HTML.
Vamos a utilizar la etiqueta de form.
Posteriormente podemos indicar un nombre a este formulario.
Esto es importante ya que cuando damos la validación por medio de JavaScript podemos utilizar este nombre
para hacer referencia a este formulario.
Como siguiente paso vamos a indicar una acción en este curso no vamos a procesar este formulario del
lado del servidor.
Sin embargo este atributo de acción se utiliza precisamente para indicar la ubicación del recurso del
lado del servidor que va a procesar este formulario.
Pero en este caso simplemente vamos a indicar el nombre de recurso en servidor y en el curso de serles
JSP vamos a procesar este formulario.
Posteriormente en este formulario podemos indicar un método de envío de esta información.
Existen varios métodos para comunicarnos con el servidor pero los métodos que más vamos a utilizar para
enviar información van a ser los métodos Get y post.
En este caso estamos indicando que vamos a utilizar el método post en este curso no vamos a explicar
a detalle este atributo debido a que esto lo vamos a explicar cuando establezcamos la comunicación con
nuestro servidor y esto lo vamos a ver también en el curso de Servlets y JSP.
Pero en este curso vamos a dejar todo listo para que podamos crear nuestro formulario del lado del cliente
en este caso de la aplicación web como siguiente paso vamos a empezar a agregar elementos a nuestro
formulario HTML.
Podemos tener elementos ocultos y esta información la podemos procesar del lado del servidor todo lo
que empecemos a agregar en este formulario lo va a recibir el servidor por lo tanto incluso un elemento
que no se muestre en nuestro formulario.
Podemos utilizar la etiqueta de input y el tipo de tipo Gillen y esto significa que va a ser un elemento
de tipo oculto así que para empezar a agregar elementos podemos utilizar la etiqueta de tipo input.
Posteriormente el atributo de type y en este caso estamos indicando que vamos a agregar un elemento
de tipo oculto el nombre de este atributo se llama oculto y el valor es valor oculto.
Esto únicamente lo estamos ejemplificando para que podamos observar que podemos enviar información que
no se va a mostrar en nuestro formulario HTML es decir que este campo no se va a mostrar en nuestro
formulario HTML pero sí se va a enviar al servidor
posteriormente vamos a agregar una tabla en este caso va a ser una tabla con un ancho de 200 píxeles
y vamos a asignarle un estilo.
En este caso el estilo que vamos a definir posteriormente en nuestro archivo destilas puntos CSS y va
a ser un estilo de tipo selector llamado Juan Colom enfásis
posteriormente agregamos un título a nuestro formulario a nuestra tabla.
En este caso formulario de registro de datos y agregamos un primer renglón a nuestra tabla y posterior
a nuestro primer renglón vamos a agregar una primera columna y le asignamos el estilo de Océ first y
agregamos la etiqueta usuario cerramos nuestra columna y agregamos una segunda columna y en este caso
para poder capturar este valor de usuario vamos a utilizar una etiqueta también de tipo input pero le
vamos a asignar el estilo default vamos a indicar que este campo para capturar el usuario va a ser de
tipo texto el nombre va a ser usuario y vamos a poner un valor por default en esta caja de texto indicando
el texto de escribir usuario es decir que en esta caja de texto que se despliegue en nuestro formulario
HTML debemos de escribir el valor del usuario y el valor que indiquemos en esa caja de texto se va a
asociar a esta variable llamada usuario.
Cuando se envía esta información del formulario al servidor así que esto es simplemente una etiqueta
pero ésta va a ser la caja de texto que va a almacenar el valor que capture el usuario y así poco a
poco es que nos vamos a ir familiarizando con los elementos de un formulario.
Podemos observar que por un lado estamos agregando una etiqueta para que el usuario sepa qué es lo que
debe de proporcionar y por otro lado para poder almacenar esta información estamos utilizando un elemento
de tipo input es decir que va a ser un tipo entrada para poder capturar información.
En este caso se va a asignar el valor a una variable llamada usuario así que este componente de tipo
input se va a llamar usuario y el valor que escriban aquí entonces este valor se va a asociar con la
variable usuario de este formulario HTML y cuando trabajemos con Javascript por medio de este nombre
es que podremos hacer referencia a este elemento de tipo input HTML y así poder saber por ejemplo si
el usuario ya proporcionó un valor en esta caja de texto o no ya que muchas veces la idea de estas cajas
de texto es que proporcionen información antes de que se envíe al servidor y en dado caso de que el
usuario no haya proporcionado información en estas cajas de texto entonces por medio de JavaScript podemos
indicarle al usuario que debe capturar información en estas cajas de texto y con eso cerramos nuestra
segunda columna y también con esto cerramos nuestro primer renglón vamos a agregar un segundo renglón
en este caso también le asignamos el estilo la clase de OCE first y ahora vamos a agregar el campo de
password para ello agregamos el texto de password dos puntos y a continuación vamos a agregar la caja
para capturar este elemento de password continuando con la codificación de nuestro archivo índex punto
HTML.
Agregamos otra columna y ahora agregamos la caja de texto pero que va a almacenar la información del
password así que agregamos un elemento de tipo input le asignamos un estilo.
En este caso el estilo llamado de FAW y en este caso vamos a indicar que el tipo no va a ser de tipo
texto sino que va a ser de tipo password es decir que cuando escribamos información en esta caja de
texto no se van a mostrar los caracteres.
Por ello es importante que indiquemos que este campo va a ser de tipo password y posteriormente el nombre
con el que vamos a hacer referencia a este elemento de tipo input va a ser password.
Por ello indicamos el atributo de nombre y el valor de password así que de igual manera cuando estemos
trabajando con JavaScript podremos hacer referencia a este elemento de tipo imput y saber el valor que
escribió el usuario haciendo referencia por medio del nombre de password ya que precisamente para ello
estamos utilizando este atributo de Nain
y con eso cerramos nuestra columna y también este renglón vamos a agregar otro renglón y también definimos
una columna en este caso la columna del lado izquierdo le asignamos el estilo de OCE first y agregamos
el texto tecnologías de interés y cerramos esta primera columna y agregamos una segunda columna en este
caso vamos a agregar ahora un elemento de tipo check box así que ahora ya no vamos a utilizar una caja
de texto sino que simplemente vamos a agregar ahora un check box el cual podemos seleccionarlo o seleccionarlo.
En este caso indicamos la tecnología Java y agregamos un elemento de tipo input de tipo check box y
el nombre va a ser tecnología y el valor va a ser Java.
Vamos a poder agregar varios elementos de tipo check box y todos se pueden llamar igual.
Es decir que esto va a formar un arreglo de elementos de tipo check box por ejemplo todos se pueden
llamar tecnología pero dependiendo del valor que seleccione el usuario son los valores que va a tener
este arreglo de elementos de tipo check box por ejemplo en este caso el primer valor puede ser Java
pero así podemos tener más tecnologías como pueden ser punto net o como pueden ser PHP y si el usuario
selecciona los tres elementos hace check en los tres elementos entonces se va a crear un arreglo de
tipo tecnología con estos tres valores pero si el usuario únicamente selecciona uno de estos elementos
entonces únicamente se va a enviar un valor simple de tipo check box es decir que ya no se va a formar
un arreglo sino que únicamente se envía el valor seleccionado por ejemplo Java o cualquiera de los elementos
de este listado que tengamos asociados a un mismo nombre.
En este caso el nombre de tecnología agregamos algunos espacios en blanco y agregamos un segundo elemento
por ejemplo en este caso podemos observar según hemos comentado la opción de punto net.
Sin embargo el tipo también es de tipo check box y el nombre es el mismo el nombre de tecnología pero
el valor en este caso es net
y finalmente agregamos una tercera opción.
También es de tipo check box el nombre es el mismo en este caso del elemento el name va a ser tecnología
pero el valor es PHP y cerramos nuestra columna y también con eso terminamos este renglón.
Así que esta es una práctica común en nuestros formularios HTML que podemos tener varios check boxes
pero estos valores están asociados a un mismo nombre y en dado caso de que el usuario seleccione más
de una opción entonces se va a crear un arreglo con los valores que el usuario haya seleccionado y estos
serían los valores que se van a enviar al servidor web.
Todo esto lo vamos a procesar cuando hagamos la validación con JavaScript
como siguiente paso vamos a agregar otra vez una columna.
Por ello asignamos el estilo de First y agregamos la cadena de género y agregamos otra columna en este
caso vamos a agregar la opción de hombre.
Pero ahora vamos a utilizar la opción de un radio botón pero los radio botón.
A diferencia de los tipos check boxes en el caso de los check boxes la idea es que el usuario pueda
seleccionar varias opciones.
Comúnmente es así como nos vamos a utilizar pero en el caso del ōba seleccionar una opción o selecciona
otra pero no ambas.
Por ejemplo en este caso le estamos utilizando para la opción de que el usuario indique si es hombre
o es mujer y por ello utilizamos la opción de radio.
Va a ser el tipo de elemento HTML que vamos a utilizar un radio botón y el nombre va a ser género y
en este caso el valor va a ser h haciendo referencia a hombre
agregamos algunos espacios y agregamos también la segunda opción y como hemos comentado el elemento
se va a llamar exactamente igual va a ser el mismo valor pero debido a que es un radio botón o se selecciona
una opción o se selecciona otra.
Si selecciona hombre entonces ya no se selecciona la opción de mujer pero si selecciona la opción de
mujer entonces la opción de hombre ya no se debe de seleccionar.
De esta manera es que le vamos a dar uso a los elementos de tipo radio botón y con eso cerramos nuestra
columna también cerramos nuestro renglón y continuamos con la modificación de nuestro archivo índex
punto HTML
agregamos también ahora una columna en este caso vamos a agregar el texto de ocupación y vamos a agregar
ahora un elemento de tipo Select.
Estos elementos de tipo Select es como una lista la cual se va a desplegar una vez que el usuario de
clic.
En este caso le estamos asignando el nombre de ocupación y también una clase en este caso a la clase
de FAW un Select es como una lista según hemos comentado y podemos agregar varias opciones para agregar
cada una de las opciones.
Podemos utilizar el elemento de tipo opción
y podemos ir asignando cada uno de los valores.
Por ejemplo en este caso el valor de uno para la profesión de profesor la opción de dos para la profesión
de ingeniero la opción 3 para la opción de jubilado y por ejemplo la opción de 4 para la opción de otro
y por medio del atributo Selected es la opción que se va a mostrar por Defour así que en este caso vamos
a tener un elemento de tipo HTML y por default se va a mostrar la opción de otro ya que esta es la opción
seleccionada pero conforme el usuario da clic en las opciones se va a desplegar estas opciones.
De esta lista así que en este caso se va a mostrar profesor ingeniero jubilado y también la opción de
otro y el usuario puede seleccionar alguna de estas opciones pero no varias simplemente va a seleccionar
una opción y dependiendo de la opción que seleccione por ejemplo la opción de ingeniero lo que se va
a enviar al servidor va a ser el valor pero no la cadena.
Así que únicamente en el servidor recibiríamos el valor de dos y por medio de alguna asociación entre
valor y cadena.
Tendríamos que saber que estamos recibiendo esta opción de 2 que hace referencia a la opción de ingeniero.
Normalmente esto se hace con un catálogo en la base de datos por ejemplo un catálogo de ocupación y
cuando recibamos el Airy de dos debe de hacer referencia a nuestro catálogo de la tabla de base de datos
de ocupación y poder obtener entonces el texto de ingeniero pero en este caso únicamente es información
del lado de cliente.
Por lo tanto estamos indicando las opciones que puede seleccionar el usuario y esta es la información
que se va a enviar al servidor cerramos nuestra columna y continuamos agregamos otro renglón y también
comenzamos otra columna en este caso para agregar las opciones de música favorita
y en este caso estamos agregando un Select pero podemos observar que estamos indicando la opción de
múltiple así que en este caso sí es posible seleccionar varias opciones de este listado que vamos a
mostrar y podemos agregar las siguientes opciones las opciones de rock pop y salsa así que el usuario
puede seleccionar varias de las opciones que se muestran en este listado y lo que se va a recibir también
en el servidor de manera similar a lo mostrado en el selector de ocupación se va a recibir el componente
de música con los valores que haya seleccionado el usuario no se va a enviar esta cadena sino el valor
que se proporcione en el atributo de Balio así que si el usuario selecciona varias de esas opciones
entonces todas estas opciones se van a enviar al servidor y de igual manera que como mostramos en la
opción de check boxes también si el usuario selecciona más de una opción entonces se va a enviar como
un arreglo de valores.
En este caso como un arreglo de cadenas y con eso cerramos también nuestra columna y nuestro renglón
vamos a agregar ahora otra opción otro renglón agregamos una columna de comentarios y para capturar
comentarios podemos utilizar un elemento de tipo tex àrea.
En este caso el nombre que le asignamos es comentarios y le vamos a asignar el tamaño de columnas de
treinta y dos renglones y también la clase por default.
Y agregamos la opción de escribir un texto así que esta va a ser una caja como un tipo imputs pero debido
a que es un texto Auria puede ser de mayor tamaño y para ello es que indicamos cuántas columnas y cuántos
renglones queremos que ocupe este texto área y con eso cerramos nuestra columna y nuestro registro también
agregamos otro registro en este caso vamos alinearlo al centro y vamos a agregar dos botones.
En este caso un botón para limpiar y también un botón para enviar este formulario así que podemos agregar
estos elementos también a nuestro formulario HTML.
Por un lado un input que es de tipo reset y por otro lado un botón que va a ser de tipo Submit.
Esto en automático cuando lo presione el usuario va a enviar la información de este formulario al recurso
del servidor que hayamos indicado cerramos nuestro registro y con eso terminamos nuestra tabla y cada
uno de los elementos que hemos agregado a nuestro formulario HTML.
Con eso cerramos nuestro formulario y también el body y el documento HTML.
Vamos a detener hasta aquí este video y en el siguiente video vamos a continuar con la codificación
de este ejercicio.