Bien, continuemos con el manejo formulario.
Vamos a ver otro campo, por ejemplo, una lista desplegable SELECT, un combobox.
También se le llama donde seleccionamos un elemento de una lista.
Nos vamos a ir a la lista, al HTML.
Entonces por acá index vamos a agregar 1 campo.
Entonces al final, por ejemplo, por acá debajo de email, bajamos y vamos a tener un nuevo div dentro
un label bajamos otro div con tab y dentro este elemento.
Pero no es un input común y corriente, es un elemento de formulario del tipo SELECT.
Entonces con las etiquetas select va a tener un name.
Igual le podríamos llamar por ejemplo país, una lista países también con el Heidy igual país y cerramos.
Vamos a bajar por acá, faltaría el for.
El mismo que Leidy en este caso país también.
Entonces un select olita plegable.
Quiero tener opciones.
Cada elemento, en este caso cada país va a ser una opción option que al final es un mapa.
Es un diccionario que está basado en un nombre y un valor.
El valor de esta opción y el nombre de esta opción.
Por ejemplo, el valor podría ser un código, un Heidy del país y el nombre, el nombre el país.
El nombre sería lo que se muestra el label y el valor es lo que se envía en el recuesto.
Vamos a partir con una opción por defecto que diga seleccionar dos guiones, por ejemplo seleccionar
guiones y en Valeo por acá valor válido lo dejamos sin valor.
Eso sería por defecto bien, pero vamos a tener más, vamos a bajar otro option value por ejemplo,
ese en mayúsculas o minúsculas de lo mismo da lo mismo simplemente un código país y como nombre España
vamos a duplicar.
Vamos a subir por acá.
Seleccionamos México MX, por acá, céle Chile, Argentina y por acá AR Perú.
Colombia C.O Venezuela listo, hoy tenemos una lista paisa 12, cada uno va a tener un nombre, asocia
un valor.
El nombre es lo que se muestra en esta lista desplegable.
Solamente un tema visual es un label o etiqueta y el valor es el código que se envía del país.
Podría ser un código así como s mx o un identificador, un Heidy por ejemplo España sea el 1, México
sea el 2, Chile es el 3, Argentina el 4 y así algún código.
Ya tenemos nuestra lista desplegable, vamos a tener otro más, otro elemento.
Entonces por acá vamos a bajar y vamos a crear otro grupo.
Vamos a tener ahora una lista desplegable muy parecido, pero en vez de poder seleccionar uno solo puedo
seleccionar múltiples elementos, por ejemplo una lista con lenguajes de programación.
Bueno, y cuáles son los lenguajes que domino?
Por ejemplo Yaba ya he Springwood, se fijan.
Voy seleccionando todo aquello que domino, pero son varios.
Es una lista múltiple en realidad.
Parecío vamos a tener un div dentro, un label te vamos a llamar lenguajes acá también lenguajes de
programación.
Arriba faltó el label, vamos a subir por acá paìses en el label vamos a colocar páis esto, bajamos,
faltaba eso, bajamos, vamos a tener otro div acá el select select con tab se fijan de forma automática.
El tag me genera el nombre name lenguajes y también el Heidy Lenguajes.
Abajo las opciones Option vamos a partir con Yaba Option Yakarta e también vamos a colocar los nombres
acá, vamos a colocar Jakarta E9 por ejemplo acá vamos a colocar Yaba s o ya están redicho.
Bajamos otra opción con el Valeo Sprint acá por ejemplo Spring Buto.
10 JavaScript
angular, recto, recto.
Ahora, claro, se fijan atormento, es muy parecido el Selleck que tenemos arriba.
De hecho, en realidad esto no es un select multiple hasta que coloquemos una bandera.
Entonces dentro del select por acá colocamos una bandera multiple, colocamos simplemente multiple.
De esta forma nos permite seleccionar varios elementos en vez de uno.
Acá uno solo no es múltiple y acá sería múltiple.
Por esta bandera que le colocamos en el SELECT.
Bien, por último, vamos a tener otra lista más o elemento, pero en vez de ser una lista desplegable,
un combobox va a ser una lista de este boxes.
Es decir, que podamos marcar con un check, con un ticket, se fijan.
También podemos tener varias opciones.
Entonces vamos a crear otro campo por acá debajo div.
Vamos a bajar label roles, roles.
Bajamos div.
Acá vamos a tener el elemento y déjenme.
Todo está formado por un input y por un label.
El input va a ser del tipo checkbox input.
En vez de texto vamos a autocompletar acá y buscamos check boxes.
Lo tenemos type checkbox va a tener un neith, le vamos a llamar roles y a su vez va a tener un valor,
un palio, por ejemplo, como un código rol mayúscula.
Guión bajo admin perfecto.
Bajamos.
Va a tener una etiqueta, un label.
Si en el for el solo lo vamos a quitar.
De hecho el acá también lo quitamos porque no está enlazado a ningún campo, solamente una lista de
este epoxy.
Vamos a seleccionando entonces el label roles y acá el label le vamos a colocar administrador perfecto
administrador.
Bien, vamos a subir, vamos a copiar este input, este top box completo, incluyendo el input y el
label y lo pegamos dos veces porque vamos a tener dos más.
Entonces rol administrador rol usuario y rol moderador vamos a subir el name se mantiene name roles
porque es una lista, podemos tener varios y acá en vez de admin user bajamos acá, quitamos usuario,
bajamos y lo mismo acá rol moderador en inglés Moderato en mayúscula moderador bajamos y acá moderador
moderador se fijan entonces una lista.
Cada input va a tener mismo nombre de roles, roles, roles, roles.
Por lo tanto hacer un arreglo, un arreglo, roles con los elementos que seleccionamos y acá también
va a ser un arreglo de lenguajes, porque múltiple con todos los elementos que seleccionamos.
Entonces básicamente serían dos forma de tener elemento múltiple, ya sea con bóxers o bien con una
lista SELECT.
Tienen todo alternativa.
Ya tenemos una lista SELECT solamente de un solo elemento.
Bien, pero veamos cómo quedaría en nuestra página web.
Vamos a desplegar.
Primero tenemos que levantar el servidor.
Lo tengo abajo.
Entonces Startup levantamos.
Hacemos el despliegue.
Hacemos un clic en la ruta.
Lo tenemos entonces usuario, password y email.
País se fijan, una lista desplegable dice Seleccionar y acá seleccionamos El País.
Acá tenemos lenguajes de programación múltiple.
Entonces, con un clic y con cheff podemos seleccionar No clic y marcamos TIFF y por ejemplo podría
tener acá pero con control, no con cheff, con React puedo tener Spring Boot, Yakarta E y ya entonces
con control voy seleccionando los elementos que quiera y los roles administrador, usuario, moderador
puedo ir marcando, se fijan?
No voy a enviar porque no lo están capturando después.
La siguiente clase vamos a capturar estos elementos.
Estos dos serían del tipo arreglo, roles y lenguaje, porque son múltiples y este sería uno solo.
Por qué seleccionó un solo país?
Ahora también cómo puedo dejar?
Porque, por ejemplo, se actualizo la página.
Cómo puedo dejar seleccionado algún elemento por defecto se fija en país, por defecto pudiera dejar
seleccionado cualquiera, se fijan.
Por ejemplo, Chile.
Puedo dejar seleccionado el Spring Boot acá y en roles puedo dejar seleccionado administrador usuario,
se fijan.
Veamos como volvamos al código, vamos a bajar acá.
Muy simple.
Si querés seleccionar, por ejemplo, Chile, en la lista países colocábamos Selected Selected de seleccionado.
Pero como no es múltiple, puedo seleccionar uno solo, pero acá como es múltiple, puedo seleccionar
varios.
Por ejemplo, voy a dejar seleccionado yaba s e y también angulas, por poner un ejemplo esos dos.
Bueno, y por supuesto, Yakarta.
Ya vamos a seleccionar esos tres elementos y de acá solamente usuario.
Entonces en el input vamos a colocar checked.
Porque el tipo es checkbox.
Entonces lo dejamos como chequeado, como marcado.
Entonces de esa forma seleccionamos elemento por defecto.
Bien.
Volvemos a desplegar.
Hacemos un rifeño con él.
Acá se fijan usuario.
Acá aparece marcado país, Chile llega, tenemos ya base y Yakarta 9 y angulas marcado por defecto perfecto.
Lo dejamos así y continuamos la siguiente clase capturando estos elementos y procesando los en el bitcoin
en el chalet nos vemos.