Download - Formularios
![Page 1: Formularios](https://reader031.vdocuments.site/reader031/viewer/2022030207/58aa1ce11a28abff6b8b526d/html5/thumbnails/1.jpg)
Profesor: Everardo Juárez Pedraza
![Page 2: Formularios](https://reader031.vdocuments.site/reader031/viewer/2022030207/58aa1ce11a28abff6b8b526d/html5/thumbnails/2.jpg)
Estructura HTML Para empezar copiamos el siguiente código en el bloc de notas, que viene siendo la estructura HTML base.
![Page 3: Formularios](https://reader031.vdocuments.site/reader031/viewer/2022030207/58aa1ce11a28abff6b8b526d/html5/thumbnails/3.jpg)
Ya que este en el bloc de notas guardamos el archivo como index.html:
![Page 4: Formularios](https://reader031.vdocuments.site/reader031/viewer/2022030207/58aa1ce11a28abff6b8b526d/html5/thumbnails/4.jpg)
HOJAS DE ESTILO Abrimos otra vez el bloc de notas en blanco, le ponemos de nombre estilos.css y lo guardamos en la misma carpeta en donde esta el .html Copiamos el siguiente código que define las propiedades de fuente, color de fondo y longitud del body:
![Page 5: Formularios](https://reader031.vdocuments.site/reader031/viewer/2022030207/58aa1ce11a28abff6b8b526d/html5/thumbnails/5.jpg)
Hacemos un selector para el formulario (.contacto) y le definimos border, border-radius, padding, margin, y color de fondo:
![Page 6: Formularios](https://reader031.vdocuments.site/reader031/viewer/2022030207/58aa1ce11a28abff6b8b526d/html5/thumbnails/6.jpg)
Luego hacemos selectores para label y div y ponemos el siguiente código:
![Page 7: Formularios](https://reader031.vdocuments.site/reader031/viewer/2022030207/58aa1ce11a28abff6b8b526d/html5/thumbnails/7.jpg)
CAJAS DE TEXTO Para las cajas de textos usamos selectores múltiples, para los input y para el textarea:
![Page 8: Formularios](https://reader031.vdocuments.site/reader031/viewer/2022030207/58aa1ce11a28abff6b8b526d/html5/thumbnails/8.jpg)
BOTON DE ENVIO Por ultimo para el botón de envió usaremos estilos similares a los de las cajas de textos, pero además va a tener bordes redondeados, sombra al texto y para el background le pondremos degradados CSS3:
![Page 9: Formularios](https://reader031.vdocuments.site/reader031/viewer/2022030207/58aa1ce11a28abff6b8b526d/html5/thumbnails/9.jpg)
CODIGO FINAL CSS
![Page 10: Formularios](https://reader031.vdocuments.site/reader031/viewer/2022030207/58aa1ce11a28abff6b8b526d/html5/thumbnails/10.jpg)
Continuación…
![Page 11: Formularios](https://reader031.vdocuments.site/reader031/viewer/2022030207/58aa1ce11a28abff6b8b526d/html5/thumbnails/11.jpg)