formularios en html555
TRANSCRIPT
![Page 1: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/1.jpg)
Formularios en html5 Primero que todo abrimos el programa Notepad++
Y empezamos escribiendo nuestras primeras etiquetas, las cuales son las
más importantes para crear una página web
![Page 2: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/2.jpg)
Posteriormente insertamos la etiqueta que esta de color rojo en nuestra
imagen la cual nos ira sirviendo para crear nuestro formulario
Ahora para colocaremos el titulo o el nombre del usuario que utilizara este
formulario, para esto colocamos la etiqueta que está en la siguiente img de
color rojo (aquel input será tu nombre)
![Page 3: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/3.jpg)
Posteriormente vamos a guardar y guardar como
Y colocamos nuestra carpeta en donde tú quieras
Una vez guardado, vamos a Run y Launch in chrome
![Page 4: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/4.jpg)
Y al ejecutarlo aparecerá así.
Y si quieres escribes tu nombre, como lo miras en el ejemplo
Ahora crearemos la casilla para el apellido, para ello aumentamos el
siguiente código que aparece en color rojo
![Page 5: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/5.jpg)
Nuevamente volvemos a guardar y al ejecutarlo de la misma manera que el
anterior, saldrá lo siguiente
Ahora para hacer las casillas separadas únicamente aumentamos el (br)
como observamos en la imagen
Y al guardar y ejecutar sale así
![Page 6: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/6.jpg)
Posteriormente seguimos aumentando el código que esta seleccionado en
rojo en la siguiente imagen
Y al guardar y ejecutarlo saldrá así, nos aparece el nombre Curso y una
flecha en donde se desplegaran mas opciones
Ahora aumentamos la etiqueta anterior varias veces como miramos a
continuación
![Page 7: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/7.jpg)
Y al guardar y ejecutarlo saldrá así
![Page 8: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/8.jpg)
Ahora aumentaremos una casilla para la contraseña, para lo cual
aumentamos el código que esta seleccionado en la siguiente imagen
Y al guardar y ejecutar saldrá así
![Page 9: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/9.jpg)
Posteriormente seguimos aumentando el código, con una opción para
escoger un sí o un no
Y al guardar y ejecutarlo saldrá así
![Page 10: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/10.jpg)
Seguimos aumentando el código que esta seleccionado en rojo, que servirá
para seleccionar un archivo y enviar
Y al guardar y ejecutar saldrá así
![Page 11: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/11.jpg)
Posteriormente en la parte de arriba escribimos la palabra Required
Y al guardarlo y ejecutarlo saldrá lo siguiente, al no escribir nada en la
casilla de nombre saldrá una pequeña advertencia que dirá (completa este
campo)
![Page 12: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/12.jpg)
Y si seguimos aumentando el Required a la casilla de nombre, apellidos y
contraseña, saldrá la advertencia para todas, en caso que no se escriba
Posteriormente para crear la casilla del correo escribimos el código que
esta seleccionado con color rojo en la siguiente imagen
![Page 13: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/13.jpg)
Y al guardar y ejecutar saldrá lo siguiente
Ahora para crear la casilla de la fecha escribimos el código que esta
seleccionado con color rojo en la siguiente imagen
![Page 14: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/14.jpg)
Guardamos y al ejecutarlo nos saldrá así
Ahora para crear la casilla del color escribimos el código que esta
seleccionado con color rojo siguiente imagen
![Page 15: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/15.jpg)
Y al guardar y ejecutar saldrá así
Y al presionar encima del color saldrá la paleta de colores
![Page 16: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/16.jpg)
Ahora aumentamos este código seleccionado, para que aparezca una
barrita
Y al guardar y ejecutar saldrá así
![Page 17: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/17.jpg)
Y al presionarla la barrita me saldrá así
Finalizando escribiremos el código que esta seleccionado, que será para
seleccionar números
![Page 18: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/18.jpg)
Y al guardar y ejecutar saldrá así
Y ya por ultimo nuestra página queda así
![Page 19: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/19.jpg)
Y si quieres darle color a tu página aumenta el código del color que tú
quieras en body
![Page 20: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/20.jpg)
Y al guardar el resultado final de nuestra página será este
![Page 21: Formularios en html555](https://reader033.vdocuments.co/reader033/viewer/2022052508/5597f2121a28ab7a0f8b465c/html5/thumbnails/21.jpg)
Gracias