Entonces en este video vamos a seguir adelante y crear una solución para este formulario de registro.
Así que tengo un nuevo archivo para guardarlo.
Voy a llamar a este formulario de registro que HDMI usaré mi atajo sublime y pondré en funcionamiento nuestra
placa de la caldera de la caldera.
Entonces, cuando nos enfrentamos a un proyecto como este, hay bastantes lugares donde podríamos comenzar.
Y lo primero que voy a hacer es agregar el formulario Tagen y luego también voy
a agregar
esta H1 arriba y Louis se registra.
Así que adelante, abra nuestro formulario de registro aquí y muévalo.
Ok, todavía no está allí, pero al menos o Cada uno se ve bien.
Así que volvamos a lo sublime y pongámonos, comencemos con lo más simple, debería ser este
este nivel superior de entradas.
El primer nombre y apellido
Entonces comenzaremos con la entrada.
Y esos son tipo igual a texto ups.
ser John, hagamos otro marcador de posición, Smith, y luego tenemos que dar dos etiquetas.
Y vamos a darle un marcador de posición que parece que debería
Entonces podríamos usar cualquier sintaxis para las etiquetas.
Voy a usar los cuatro.
Así que llamaré esto primero y nos aseguraremos de obtener una identificación igual a la primera.
Y luego esta etiqueta dirá el nombre de dos puntos que nos dará eso y luego tenemos
que hacer exactamente lo mismo.
Otra etiqueta para el último de, digamos, un apellido de dos puntos y luego necesitamos dar a esta identificación la última palabra.
Entonces, revisemos y veamos lo que tenemos.
Hasta aquí todo bien.
Hay una pequeña cosa que nos falta, que es que no le hemos
dado un nombre a estas entradas, así que primero dale el nombre y nombra el último gran.
Pasemos al próximo fragmento aquí.
Lo que en realidad nos falta una cosa son las validaciones.
Entonces, mientras estemos aquí, recuerde que el nombre y el apellido no deben estar en blanco.
Entonces, para hacer eso es muy simple, simplemente agregamos el atributo requerido en las entradas requeridas
y lo configuramos como verdadero.
Así que voy a seguir adelante y expandir esto solo para que podamos ver un poco más claro
en qué estamos trabajando.
Entonces, lo siguiente que consultamos aquí es el botón de selección de género.
Entonces necesitamos tener tres botones de radio.
Entonces esos son tipos de entrada iguales a la radio.
Tres de ellos.
Y si echamos un vistazo con eso, lo primero que veremos es que están en línea con los otros elementos, que
en realidad no es lo que se supone que debe ser la forma que le di.
Entonces tenemos algunas opciones para que las cosas se comporten.
Podemos incluirlos en
un párrafo como este solo agregue un poco de espacio.
Ahora los tenemos en una línea separada.
Solo voy a usar un div aquí.
Ahí vas en un div.
No tiene el mismo espaciado
Un párrafo en el video de C S S hablará en realidad sobre lo que es el espaciado.
Así que ahora tenemos que seguir y agregar o
etiquetas y antes de hacerlo comencemos a darles el mismo nombre, así que el nombre será de género aquí.
Avancemos y deberíamos haber usado mi atajo aquí, que consiste en hacer clic en múltiples cursores para que les den
un nombre de género cruzado y luego les demos a cada uno un valor.
Entonces, el primero, el valor será masculino.
El segundo será femenino.
El último es o bien y actualiza.
No vemos nada de eso, por supuesto, porque eso es solo detrás de las escenas.
Entonces, lo que tenemos que hacer es agregar en nuestras etiquetas.
Entonces vamos a querer tres etiquetas.
Primero, vamos a decir la etiqueta cuatro y llamaremos a este macho
que tenemos aquí.
No, el correo de Colon es tan simple y, luego, el Id es igual al correo.
La misma cosa.
Otra etiqueta aquí.
Este será femenino
Y luego vamos a querer decir "Id me for you cause female".
Y luego dices ID que causas mujer.
Entonces, como puedes ver construyendo estas formas, a veces es un poco tedioso.
Tienes un montón de etiquetas y muchas cosas desordenadas, solo tienes que tener
mucho cuidado para que todo funcione correctamente.
Entonces queremos otro, quiero decir que también queremos ID.
Así que solo revisemos esto para ver lo que tenemos.
Todo bien.
Eso se ve genial.
Solo podemos seleccionar uno que es lo que queremos.
Lo siguiente que podemos hacer es avanzar y agregar el botón de enviar al final mientras estamos aquí.
Entonces ese será el tipo de entrada igual a enviar.
Y asegurémonos de que la validación funcione.
Sí, está muy bien en buena forma.
Así que, luego, tenemos un correo electrónico y un campo de contraseña.
Y esos también están en línea nueva.
Entonces continuemos y agreguemos otro div y vamos a hacer una entrada y esta vez es un tipo igual al correo
electrónico.
No se trata solo de texto y el marcador de posición aquí fue su correo electrónico, que no es el mejor texto de marcador de
posición, pero vamos a seguir con esa imagen, asegúrese de seguir la tarea.
Entonces, el tipo de entrada es el marcador de posición de correo electrónico es su correo electrónico y luego tenemos otro para
la contraseña y eso nos da dos entradas.
A continuación, podemos ir con el nombre para decir simplemente el nombre es correo electrónico aquí miembro en caso de que esté confundido.
descubrir cómo enviar los datos, ¿qué deberíamos enviar a los datos en la solicitud en Cómo se llama?
Ese nombre se usa puramente entre bastidores para
Entonces, en este caso, lo que escribamos en este campo se llamará correo electrónico.
Entonces, no vemos ningún impacto por las dudas.
Creo que esta es una de las partes más confusas porque no es muy visual.
Así que este dirá que el nombre fue una contraseña y luego continuemos y agreguemos o etiquetas.
Entonces, para mezclarlo aquí, usaré el otro tipo de etiqueta, que es donde anidamos los datos dentro de
la etiqueta.
Entonces diré dos puntos de correo electrónico en lugar de los cuatro y la sintaxis de Id.
Funcionan de la misma manera que nosotros hacemos correo electrónico y contraseña.
Seamos muy precisos.
Hay dos puntos en ambos.
Estupendo.
Pero guarda eso y hay otra cosa que deberíamos echarle un vistazo y ver si las validaciones
están en su lugar llene esto.
No.
Entonces, una cosa que nos falta es que necesitamos solicitar el correo electrónico.
Entonces, necesitamos ir a nuestro correo electrónico y agregar el requerido ahora que actualizamos los completan.
Dejamos el correo electrónico en blanco si escribimos un correo electrónico no válido.
Obtenemos este error.
Estupendo.
Hasta ahora, todo se ve bien.
Vamos a volver a la validación de la contraseña de bonificación al final antes de llegar allí.
Pasemos a la selección de cumpleaños.
Entonces tres menús desplegables.
Así que de nuevo puedes agregar otro div y esta vez en este div vamos a agregar tres selecciones diferentes.
Entonces uno dos tres.
Comencemos con este primero que es de cuatro meses y sigamos adelante y comencemos con la etiqueta.
Solo hay una etiqueta aquí para todo.
Así que sabes hacerlo como esta etiqueta y poner los tres temas en el interior
y esta etiqueta iba a decir un cumpleaños y va a ser así.
Entonces, si vemos lo que tenemos, nuestras tres entradas son tres etiquetas y todo lo que tenemos que hacer
es agregar adentro los datos correctos.
Entonces eso es un montón de opciones.
Entonces, el primero vamos y agrego que voy a hacer dos o tres aquí, así será durante meses.
Así que haremos enero y marzo.
El siguiente hace lo mismo.
Solo unas pocas opciones y esto será por un día.
Entonces comenzaremos.
Hagamos dos dígitos a 10 11 y 12.
Y el último será el año.
Solo haga tres de nuevo y hagamos 1999 2000 2001.
Estupendo.
Y puedes ver que bajamos aquí.
Hay una pequeña diferencia, sin embargo, es que comenzamos de inmediato con enero y los números
y el año.
Pero el que te di comienza con mes, día y año.
Entonces hay algunas maneras de hacerlo.
HDMI el formulario simplemente escoge la primera opción y decide el valor inicial.
El
más simple es solo para hacer que la primera opción diga mes día y año y al
hacer eso
Entonces esa es la forma más común de hacer eso.
Entonces, ahora nuestra firma se ve bastante bien.
podamos agregar otro div aquí y entonces esa es la div adecuada en vez de esta.
Vamos a
comenzar con la etiqueta. Esta vez hagamos cuatro y esta vez vamos a llamar lo llamaremos acordado.
Solo necesitamos nuestra casilla de verificación Estoy de acuerdo con los términos y condiciones para que
Estuve de acuerdo con los términos
y condiciones y luego lo siguiente que necesitamos es nuestra casilla de verificación de las casillas de entrada. Démosle
ID porque acepté y nombré, y también acepté.
Y eso es lo que vemos que se ve bien para mí.
Entonces, una cosa que también debemos agregar a nuestras etiquetas de selección es el nombre.
Así que llamemos este
mes y este del día y este estará aquí.
Y recuerde que si no quisiéramos en enero y Fab y Mar fueran lo que realmente se envió
si quisiera que fuera algo diferente, como un número correspondiente, pondríamos un valor aquí.
Entonces para enero podríamos poner el valor 1 en este caso.
Estoy bien con solo tener a Jan allí.
No especifiqué cómo se debe comportar.
Así que volvemos aquí, se ve bastante bien.
Todo se ve igual.
Lo último que realmente tenemos que discutir es la validación de la contraseña real.
Entonces quiero mostrarte cómo podrías encontrar eso.
Así que voy a abrir la validación de la longitud HMO y probemos eso.
Como puedes ver, ya he estado aquí.
Esto es algo que tuve que buscar recientemente y parece.
Así que esto es Stack Overflow por cierto si no has visto esto antes.
Esto permite que alguien haga una pregunta.
¿Hay algún otro atributo que lo destaque con la ayuda de la cual puedo establecer un valor mínimo
para los campos?
Y luego las personas proporcionan respuestas y las respuestas más votadas aparecen primero.
Entonces, esta respuesta dice que puedes usar el atributo de patrón. También se necesita el atributo requerido.
De lo contrario, un campo de entrada con un valor vacío se excluirá de la validación de la restricción.
DE ACUERDO.
Entonces parece que esto es todo lo que necesitamos.
Entonces, esta es una entrada que le damos, el patrón es igual a esta cosa que parece extraña.
Y luego se requiere y luego este título.
Entonces, incluso antes de siquiera preguntar qué hace esto y qué hace este cinco 10 común.
Vamos a ver.
Así que vamos a buscar nuestra contraseña y esto es mucho de lo que.
Ser desarrollador es mucho copiar y pegar algunas cosas o encontrar algún código
y ajustarlo.
Entonces tenemos que hacer que esto se ajuste a lo que tenemos, que es un nombre de entrada, es el tipo de contraseña porque la contraseña.
Así que solo voy a copiar estos tres atributos.
Así que ahora tenemos que escribir su patrón de contraseña: se requieren cinco y 10.
Y el título equivale a cinco a 10 caracteres.
Así que vamos a ver qué refresca esto.
Asegúrate de tener todo lo demás completado.
Hago clic en enviar y me dice que complete este campo.
De cinco a 10 caracteres y tipo 2 y tipo 3 y escribe más de 10 no funciona.
Pero si escribo cinco o seis, funciona.
Exploremos un poco más.
Comencemos con este aquí.
Cambiemos esto para ser.
La contraseña debe tener entre cinco y 10 caracteres
y actualizarse.
Asegúrate de completar todo lo demás para que podamos obtener este error.
Y hago clic en enviar y puede ver que recibo el mensaje de que establecemos la contraseña debe tener
entre 5 y 10 caracteres.
Así que eso es lo que hace este título.
Básicamente es el mensaje de error que se muestra.
sintaxis solo estamos definiendo la longitud de un rango de longitud completa que es aceptable para esta entrada.
Entonces la otra parte nueva es este patrón y esto es un poco raro, pero usando esta
Entonces, si cambiamos esto para que sea de dos
a tres, aún no se aceptan aceptables, pero no son aceptables, pero dos son aceptables.
Entonces esto es solo definir un rango o patrón que debemos seguir.
Así que definitivamente hay más en esto que puede hacer otras cosas además de una longitud mínima o un rango de longitudes, pero
eso es todo lo que necesitaba que encuentre aquí.
Si no pudo encontrar eso, no entre en pánico, es muy temprano.
Pero habrá más oportunidades para que intentes cosas como esas.
Así que tengo una solución completa que escribí, que está completa porque tiene las entradas de día completo y año y mes y
se puede ver que es un desastre.
No escribí esto a mano y tampoco esperaba que escribieras esto a mano.
Veremos cómo generar esto más adelante en la clase.
Puede usar javascript para hacerlo por usted, así que no tiene que escribirlo.
Así que eche un vistazo a la solución.
Si tienes alguna pregunta