Y bienvenido de nuevo.
Vamos a entrar en algunas etiquetas más avanzadas y probablemente la etiqueta más importante que usará además de las
que hemos cubierto hasta ahora, son las etiquetas que necesitamos para crear formularios.
Como sabe, cuando va a sitios web, generalmente hay algún tipo de formulario de inicio de sesión o registro.
Así que vamos a desarrollar eso hoy para comenzar.
Creemos un nuevo archivo aquí.
Lo guardaremos y lo llamaremos HTML registrado en nuestro escritorio.
Perfecto, y sabemos que también queremos usar nuestro pequeño atajo y lo titularemos, regístrelo, guárdelo.
Y ahora en el archivo de índice, agreguemos otro enlace.
Las referencias registran dot html y solo diré aquí, regístrese.
Muy bien, guardaremos ambos archivos y refresquemos, tenemos registro.
Haga clic en registrarse.
Bueno, todavía no tenemos nada, pero parece que está funcionando, agreguemos esto en una nueva línea solo porque se ve más
bonito de esa manera.
Entonces, para hacer eso, si recuerdas, agregaremos una etiqueta de freno.
Así que refresquemos.
Ahí tienes.
Tenemos nueva página y registro.
Bien, construyamos este formulario si vamos a registrar DOT.
La forma en que escribimos formularios en HTML, aunque convenientemente hay una etiqueta de formulario.
De acuerdo, pero esta etiqueta de formulario en sí, debe tener el formulario real dentro.
Entonces, ¿qué tipo de elementos de forma tenemos?
Bueno, de nuevo, si recordamos a nuestro buen amigo W tres C, vamos a escribir formularios.
Y podemos ver aquí que tenemos pequeñas granjas.
Y la actualización hará que la pantalla sea completa y puede ver aquí que hay una tonelada de
información, pero puede buscarla usted mismo por ahora.
Te voy a presentar los más comunes, probablemente los que usarás el 90 por ciento del
tiempo.
El primero, como hacemos con cualquier formulario y vayamos a esa base por ahora, es el que queremos introducir con nuestro
nombre.
¿Entonces cómo hacemos eso?
Tenemos una etiqueta de entrada.
Eso tiene un tipo de texto porque, bueno, nuestro nombre estará en forma de texto y podemos cerrarlo y en realidad es una
etiqueta de cierre automático.
Entonces, si guardo y actualizo, está bien, tenemos un pequeño cuadro aquí.
Ojalá puedas ver eso.
Pero, bueno, probablemente deberíamos titularlo porque no sabremos qué responder de esa manera.
Entonces vamos a poner aquí.
Vamos a decir el nombre.
Ponga punto y coma y guarde, actualice, tenemos el nombre y ahora hagamos esto un poco más grande.
Ahí tienes.
Ahora puede ingresar su nombre aquí.
Impresionante.
Bueno, agreguemos otro para nuestro apellido.
Y nuevamente, tendremos nuestro tipo de entrada, por lo que es un atributo y un valor de texto.
Y si actualizamos, tenemos el apellido, está bien, pero se ve feo, recuerde que HTML solo lee línea por línea
y realmente no sabe que queremos un espacio aquí.
Entonces, nuevamente, podemos agregar un.
Regrese aquí y actualice, y tenemos el nombre y el apellido.
Bien, eso es bastante evidente.
Ahora bien, ¿qué más tenemos en un formulario?
Tenemos correo electrónico.
Así que agreguemos otro campo, que es correo electrónico, y volveremos a ingresar.
Escriba llamadas, texto.
Bueno, agregue otro salto aquí, porque vamos a necesitar ese espacio.
Y guardemos la actualización, genial.
Bien, tenemos nuestro formulario de registro general.
Y obviamente con cualquier formulario, necesitamos algún tipo de botones, cierto, como si tuviéramos que enviar esto en algún lugar para que
podamos registrarnos.
Bueno, de nuevo, hay un buen apetito por eso.
Entonces ingresamos en lugar de un tipo de texto.
Hay un tipo de envío.
Así que esto.
Si tuviéramos otro descanso aquí.
Y digo esto, actualizo que tiene cumbre.
Ahora bien, ¿de dónde vino esta cumbre?
Bueno, cuando pones un tipo de entrada enviar, automáticamente crea un botón.
Y si no especifica qué decir, solo tendré este texto.
Pero podemos cambiar eso para poder poner valor.
Y pondremos registro.
Guarde esa actualización, ahora tenemos un botón de registro.
Bien, pero ¿qué pasa si cometemos errores en este campo, escribimos cosas y para qué queremos restablecer esto? De
nuevo, hay una entrada para eso.
Y el tipo de esa entrada, como puede imaginar, se restablece.
Entonces, si cerramos esto en otra ruptura aquí, en realidad podemos mantenerlo en la misma línea,
guardaremos la actualización.
Y hemos reiniciado, así que ahora si escribo algo aquí y digamos que no quiero, no me gusta esto,
necesito reiniciar el formulario.
Puedo simplemente hacer clic en restablecer y se borra todo para nosotros.
De acuerdo, es posible que se pregunte qué sucede cuando hacemos clic en registrar antes de entrar en eso, solo quiero revisar todos
los tipos de entrada comunes y luego haremos clic en registros para ver qué sucede con
el correo electrónico.
Lo ideal es que, en primer lugar, sea necesario para que cuando haga clic en registrarse, si no
ha proporcionado un correo electrónico, no le permita registrarse.
Y hay un atributo que podemos usar para eso y es obligatorio.
Y aquí en realidad no tenemos que especificar un valor porque automáticamente se asume que requerido es igual a verdadero, lo
que significa que este campo de formulario es obligatorio.
Entonces, si digo que actualizo y lo dejo en blanco y hago clic en registrar, diré, por favor complete este
campo.
Ahora, también queremos asegurarnos de que sea un campo de correo electrónico apropiado, así que si escribo algo como esto, queremos
asegurarnos de que, ya sabes, este es un correo electrónico incorrecto.
No queremos registrarnos.
Entonces, el tipo de texto de entrada que les dije para el correo electrónico es realmente incorrecto, hay uno
específico que podemos usar, que es, como puede imaginar, correo electrónico.
Entonces, si actualizo y escribo algo que no es un correo electrónico y hago clic en registrar.
Le diré que incluya un y la dirección de correo electrónico.
Muy agradable.
Es como magia, hace esto por ti, lo cual es muy, muy agradable.
Ampliemos nuestro conocimiento de las entradas y agreguemos algunos campos más que probablemente necesitarán
saber el cumpleaños de alguien.
Así que agreguemos cumpleaños aquí.
Y para este tipo de entrada, escriba.
Fecha.
Entonces, si digo esto y actualizo el aspecto, tenemos un pequeño selector de fechas para que pueda elegir cualquier cosa aquí.
Está bien, ¿qué más necesitamos?
También necesitamos el género, por lo que haremos el tipo de entrada y para el género.
Bueno, no hay un apetito específico por el género, pero hay algo que se llama radio.
Y la radio es, como sugiere el nombre, botones de radio.
Y ahora.
Haga clic en actualizar y, bueno, tengo un botón de opción, pero lo ideal sería tener opciones, ¿verdad?
¿Entonces cómo hacemos eso?
Entonces, para la radio, también debemos decir si es masculino o femenino, tengamos dentro del género.
Vamos a tener un descanso aquí en la fila y diremos.
Y ponte tipo radio y diremos masculino y también queremos.
Mujer.
Y también queremos.
Otro.
Y cuando actualizamos esto, tenemos masculino, femenino y otros, pero si ves un problema aquí, simplemente hago clic en los botones de
opción y no puedo deseleccionarlos e idealmente tú puedes.
Solo debería poder seleccionar uno.
Y en este momento, tal como están los botones de opción, no conocen la existencia del otro.
Queremos asegurarnos de que sepan que están conectados, que son familia y que solo se puede elegir a uno de
ellos.
¿Entonces cómo hacemos eso?
La forma en que lo hacemos es a través del atributo de nombre.
Entonces, el nombre dirá género.
Y este atributo de nombre debe coincidir en todos los botones de opción para que sepan que están juntos, son parte del
campo de entrada de género.
Así que si guardo aquí y actualizo.
Ahora puede ver que solo puedo seleccionar uno.
Está bien, perfecto.
¿Qué más deberíamos tener?
Bueno, digamos que realmente quiero saber si tienes mascotas.
Lo mismo ocurre con las mascotas.
Vamos a tener un tipo de entrada o puede tener varias mascotas, por lo que no serán botones de opción, queremos casillas de verificación.
Entonces casilla de verificación, queríamos tener gatos o perros, pero gato y queremos tener.
No puedo escribir hoy.
Marque la casilla y queremos tener perros.
Así que guardemos eso, refresquemos y veamos eso, tenemos mascotas, pero esta vez son casillas de verificación, lo que
significa.
Puedo seleccionar varios.