Vamos a continuar.
Lo primero que vamos a hacer es modificar nuestro archivo índex punto HTML.
Podemos observar que esto ya se agregó de manera automática a botellas y hasta el archivo de índex punto
HTML.
Sin embargo como hemos comentado si no estuviera entonces simplemente deben agregar un archivo de tipo
HTML el título va a hacer ejercicio formulario
y vamos a agregar a continuación los links para hacer referencia a los archivos CSS y funciones de JavaScript.
Así que digamos lo siguiente agregamos un archivo de Link el atributo de rel
iba a ser un tipo chip de tipo CSS agregamos el Type que va a ser el tipo texto CSS
y posteriormente con el atributo de HR-V vamos a indicar dónde se encuentra este archivo si damos control
espacio Podemos se va que nos muestra las posibles opciones dónde está este archivo en este caso seleccionamos
la carpeta de recursos de nueva cuenta presionamos control espacio y nos muestra los archivos que tenemos
disponibles en esta carpeta y seleccionamos el archivo de estilo CSS con eso terminamos de hacer referencia
al archivo CSS como siguiente paso.
Agregamos el script indicamos el tipo que va a ser el tipo texto y agonal JavaScript posteriormente
agregamos el atributo de Sors y de igual manera con el espacio nos muestran las posibles opciones seleccionamos
la carpeta de recursos y también seleccionamos en este caso el archivo de funciones JS Y con eso terminamos
también nuestro tag de script bien con esto ya tenemos completo nuestro G.T.
Ahora vamos a hacer lo siguiente dentro del Bodhi quitamos este comentario y vamos a hacer lo siguiente.
Vamos a agregar un formulario así que utilizamos el tag de form
y vamos a heredar los siguientes atributos de nuestro formulario.
Agregamos un nombre
el número va a ser uno agregamos también el atributo de acción y vamos a indicar el nombre de nuestro
proyecto Manejo formularios HTML debe de ser exactamente igual que el nombre de nuestro proyecto respetando
mayúsculas y minúsculas y posteriormente el nombre del servlet recordemos que en la anotación de web
servlet es donde estamos indicando el nombre que vamos a utilizar para mandar a llamar.
Este componente así que debe ser diagonal servlet respetando también mayúsculas y minúsculas de lo contrario
vamos a tener errores para mandar a llamar nuestro componente envien también indicamos el tipo de método
iba a ser de tipo post damos un enter y posteriormente vamos a utilizar el atributo de Submit
para que cuando hagamos submit de este formulario mandemos a llamar.
Una función de JavaScript y esta función de JavaScript va a estar definida dentro del archivo de funciones
y esa función se va a encargar de realizar la validación de este formulario así que escribimos Huitrón
validar forma y proporcionamos esta forma.
Por ello utilizamos el operador dis bien así que este es el formulario que vamos a manejar bien ahora
vamos a empezar a agregar los componentes de nuestro formulario.
Vamos a agregar un tipo input
y dentro de este input vamos a ver lo siguiente Este input va a ser de tipo Jinan type
el nombre de este componente va a ser oculto
y el valor va a ser valor oculto.
Eso simplemente para que veamos que podemos enviar también valores ocultos dentro de nuestro formulario
y esto puede ser útil para enviar información a nuestros servlet información que no se debe demostrar
en el formulario pero que nos puede servir para realizar cierto seguimiento con información importante
para este formulario pero que no se debe demostrar directamente al usuario así que este es el valor
oculto que vamos a utilizar y desde el servlet lo que vamos a hacer es procesar el valor.
Preguntando por el nombre de este componente el nombre del componente es oculto y el valor que nos debe
de regresar es este valor que estamos indicando.
Esto lo vamos a hacer posteriormente cuando trabajemos con el servlet bien vamos a agregar el siguiente
componente vamos a agregar una tabla
abrimos y cerramos este componente y esa tabla contiene los siguientes atributos.
Va a tener un UIT-T de 200 un ancho de 200.
Posteriormente va a tener una Heydi y este va a ser un estilo de CCS que vamos a asignar.
Así que el estilo que vamos a asignar se llama enfásis
columna ya que es el estilo que le vamos a aplicar bien posteriormente vamos a agregar un caption
y el título de esta tabla va a ser formulario
registro de datos y vamos a empezar a abrir los elementos vamos a agregar un TR y Burrow
vamos a agregar a continuación un té de
dentro de este te vamos a indicar la clase
le agregamos el atributo de Class y agregamos el estilo llamado columna.
Esto lo vamos a agregar a continuación en el archivo CSS
y el texto de usuario dos puntos y ponemos entre paréntesis asterisco indicando que este va a ser un
elemento requerido.
Ahora agregamos otro elemento de abrimos y cerramos este elemento y vamos a heredar otro elemento de
tipo input agregamos la clase que vamos a agregar también en el archivo CSS.
La clase default agregamos un tipo que va a ser el tipo texto agregamos el atributo de Name que va a
ser usuario y ese es el nombre que vamos a recuperar desde el servlet.
Este valor es muy importante ya que es el nombre que vamos a utilizar para recuperar este parámetro.
Damos enter y agregamos también el atributo de valio con el texto escribir usuario para dar una indicación
al usuario que debe describir esta información y posteriormente también en el evento un focus.
Vamos a hacer lo siguiente escribimos dis punto cl para que en cuanto demos clic sobre este elemento
en automático seleccione lo que se ha escrito y así podamos reemplazar fácilmente el contenido de esta
caja de texto y con eso cerramos también nuestro input.
Ya tenemos nuestro primer renglón y ahora vamos a agregar un segundo renglón abrimos un y Borrow
y también lo cerramos quitamos estos espacios y vamos a continuar nuestro Trevorrow.
Ahora vamos a dar un y data.
Y agregamos el atributo dentro del té de
también agregamos el estilo de columna el cual vamos a agregar a continuación a nuestro archivo de estilos.
Posteriormente definimos el password dos puntos e indicamos que este elemento también va a ser requerido.
Este sería por un lado del lado izquierdo la etiqueta de password y del lado derecho de este registro
vamos a colocar el texto así que abrimos otro de otro data abrimos y cerramos este elemento dentro de
ese teiboleras vamos a agregar un texto la clase va a ser de foll el tipo va a ser password el nombre
también va a ser password damos enter y también agregamos el focus para que en cuanto se dé clic sobre
este elemento también se seleccione todo el contenido de este Input text y con eso cerramos también
nuestro elemento de tipo hipoteque para el password bien ahora vamos a agregar otros elementos a nuestra
tabla pero podemos apoyarnos DST y Borrow que ya hemos trabajado.
Podemos copiar un tablero completo y lo pegamos en esta sección y vamos a modificarlo ya que es la misma
estructura la clase de columna pero el texto va a ser tecnologías de Internet
también es un elemento requerido
y en lugar de texto vamos a hacer lo siguiente Vamos a quitar este elemento de tipo Input text y vamos
a agregar elementos de tipo check box así que vamos a escribir Java imput agregamos el atributo de Type
va a ser un elemento de tipo check box agregamos el nombre que va a ser tecnología en este caso sin
acentos para que del lado del servidor no tengamos problema.
Para recuperar este elemento así decidimos tecnología y posteriormente el valor que queremos enviar
al servidor.
Una vez que se haya seleccionado este elemento y vamos a dejar algunos espacios escribiendo A&G no break
Espais y agregamos varios espacios bien posteriormente vamos a hacer algo similar podemos copiar esto
pero ahora para la tecnología de punto net check box es el mismo el nombre de la tecnología es el mismo
pero el valor en este caso va a ser Net y de nueva cuenta copiamos estas dos líneas ya que les vamos
a repetir agregamos espacios y posteriormente agregamos la última tecnología que es PHP check box tecnología
y seleccionamos PHP y básicamente podemos observar que éste es un check box pero que vamos a poder seleccionar
varios elementos ya que los tres elementos corresponden con el mismo nombre el nombre de tecnología
así que del lado del servidor va a ser un arreglo de elementos no solamente un parámetro aislado sino
que van a ser posiblemente varios valores por lo tanto tenemos que procesarlo como un arreglo de parámetros
cuando veamos los servlets vamos a ver cómo procesar este elemento.
Ahora vamos a agregar otro T.R podemos copiar ese terreno antes vamos a dar formato para que no pierda
el formato en nuestro archivo damos clic derecho format copiamos otro T.R completo y pegamos TDR y damos
un formato
y en este caso el TR va a contener la información de género.
Vamos a reemplazar el contenido de este elemento del TD y vamos a hacer lo siguiente Vamos a tener dos
elementos de tipo radio botón primero el valor de hombre para indicar este género agregamos un input
agregamos el tipo que va a ser el tipo radio botón.
Por ello el valor de radio.
Posteriormente el nombre que va a ser género y así es como lo vamos a procesar del lado del servidor
y posteriormente el valor el atributo de valio con el valor de h para hacer referencia a hombre.
Posteriormente agregamos algunos espacios así que podemos copiar esta línea
y agregamos algunos espacios y posteriormente agregamos el elemento de mujer agregamos un input
el tipo va a ser un radio.
El nombre también va a hacer referencia al género y el valor va a ser mujer y con eso ya tenemos nuestro
elemento para hacer referencia al género.
A diferencia de CHEC Boggs donde podemos seleccionar varios elementos en este caso el tipo radio solamente
puede seleccionar uno u otro elemento debido a que se llaman igual.
El componente de radio se llama género en ambos casos solamente el usuario puede seleccionar una u otra
opción pero no ambas.
Bien ahora vamos a agregar otro Trevorrow para la ocupación así que podemos seleccionar otro Taibo el
rock completo
y vamos a agregar el elemento de ocupación vamos a quitar esto radio Botton y vamos a ver a los siguientes
elementos.
Va a ser un celeb un componente de tipo Selleck y su nombre va a ser ocupación y le asignamos la clase
por default
y cerramos este elemento de tipo select y dentro de este elemento vamos a llegar algunas opciones como
puede ser la opción agregamos un primer valio esta primera opción va a ser la opción por default es
decir que la opción por default va a ser vacío con el texto seleccionar
y cerramos esta opción ahora la siguiente opción
va a ser el valor de uno y este es el valor que va a recibir el servidor al solicitar el parámetro de
ocupación se va a recibir cada uno de estos valores según vayamos escribiendo no se va a recibir el
texto sino el valor de ese atributo.
El valor de valio la primera opción va a ser profesor pero este valor no lo va a recibir el servidor
sino que va a recibir el valor de 1 y así en cada uno de los elementos agregamos otro elemento de tipo
option con el valor de 2 la opción 2 es ingeniero
agregamos otra opción con el valor de 3 va a ser jubilado
cerramos la opción y finalmente agregamos una cuarta opción que realmente es la quinta opción pero los
valores que estamos escribiendo es de 1 a 4 pero son cinco elementos debido a que también cuenta la
primera opción y finalmente agregamos la opción de otro
bien y con eso ya tenemos nuestro Trevorrow para la ocupación.
Damos un formato y ahora vamos a agregar otro Trevorrow para la música favorita así que seleccionamos
ese Trevorrow para apoyarnos
y ahora va a ser el elemento de música favorita dos puntos.
Este elemento ya no va a ser requerido así que desde nuestro archivo JavaScript este elemento ya no
va a importar si contiene un valor o no va a ser un elemento de tipo Select que se va a llamar música
pero en este caso podemos seleccionar múltiples elementos por ello vamos a utilizar el atributo de múltiples
y dejamos la clase por default y las opciones van a ser las siguientes vamos a quitar dos opciones ya
que únicamente vamos a dejar tres opciones quitamos las dos primeras opciones y vamos a agregar la primera
opción que va a ser rock con el texto de rock y lo que va a recibir el servidor al solicitar el parámetro
de música va a ser alguna de estas opciones pudiendo ser una o varias ya que puede seleccionar varios
elementos de ese tipo Select así que el valor que va a recibir es rock o también vamos a modificar a
continuación esto puede ser pop o puede ser por ejemplo salsa y eso es solamente el texto pero lo que
va a recibir el usuario es el valor de valio así que completamos estas opciones es pop y salsa bien
y con eso ya tenemos nuestro elemento de música favorita y finalmente vamos a agregar otro Trevorrow
damos un formato copiamos otro Trevorrow
y en el Festival Rock vamos a agregar el elemento de comentarios también esta opción no es requerida
vamos a quitar este elemento y a continuación vamos a agregar un tex aliá
así que digamos un elemento de tipo tex àrea el nombre va a ser comentarios así es como lo vamos a buscar
del lado del servidor vamos a indicar que va a contener 30 columnas iba a tener dos renglones vamos
a utilizar la clase por default.
Y también agregamos el evento focos para que una vez que damos clic sobre este elemento se seleccione
todo el contenido y agregamos el texto.
Escribir un texto y cerramos nuestro elemento text àrea.
Esos son todos los componentes de nuestro formulario y por último vamos a agregar los botones para hacer
reset del formulario o hacer submit así que vamos a dar enter.
Escribimos un T.R
dentro de STR vamos a agregar el atributo de Staël para centrar estos elementos.
Si agregamos un tex Alpine y agregamos el atributo de Center para que se centre en los elementos de
ese Borrow ahora abrimos un TDM
y Vulgata y dentro de ese eldato vamos a agregar un input de tipo reset va a ser el botón de tipo reset
agregamos el valor de limpiar y la clase por default
y vamos a llegar a continuación otro botón podemos copiar este código el trebol data
pero en este caso el botón va a ser el tipo submit el texto va a ser enviar y también vamos a tener
la clase por default.
Aquí me está marcando un error al final de mi archivo debido al elemento scrip así que vamos a elementos
script y en lugar de cerrarlo de esta manera como es posible agregar contenido a este script vamos a
cerrarlo de la siguiente manera.
Y así ya no nos debe marcar este error
podemos ver que ya se corrigió este error y aquí también me faltó cerrar esa área.
Cerramos el elemento text Arian para que el valor de escribir texto no tenga problemas también aquí
vamos a corregir este input vamos a cerrarlo directamente para que no nos marque este warning y tenemos
algunos otros comentarios.
Sin embargo esto ya tiene que ver con el uso de estilo CSS.
Eso todavía no lo hemos definido y vamos a agregarlo posteriormente en nuestro archivo de estilos y
también en las funciones de JavaScript donde sea necesario.
Así que con esto ya tenemos completo nuestro archivo índex punto HTML.
Podemos revisar cómo va hasta este momento de archivo HTML así que vamos a dar clic derecho Krishnan
View no debe estar arriba las debe estar detenido DAgostino Ambigú
obviamente de momento todavía no va a hacer nada nuestro formulario sino que únicamente lo vamos a poder
visualizar pero vamos a visualizar este código HTML.
Damos clic derecho y Rohn
esperamos a que termine de levantarse glacis
y ese es el código HTML que hemos escrito hasta el momento.
Tenemos el componente de usuario password.
Las tecnologías los géneros hombre mujer ocupación con los elementos escritos la música favorita los
comentarios y los botones de limpiar y enviar obviamente aquí todavía no podemos observar ningún estilo
aplicado ni tampoco la funcionalidad de JavaScript para validar este formulario y tampoco todavía podemos
validar esta información del lado del servidor ya que no hemos escrito todavía el código de nuestro
servlet bien pero con eso ya tenemos la base de nuestro proyecto la interfase web y vamos a detener
hasta aquí este video y en el siguiente video vamos a continuar con las hojas de estilo.
Nos vemos en el siguiente video.
Saludos.