Este documento presenta un tutorial para crear un formulario de contacto con HTML y CSS. Explica los pasos para crear la estructura básica HTML, una hoja de estilos CSS separada y el diseño y estilos de los diferentes elementos del formulario como las cajas de texto, áreas de texto y botón de envío. El objetivo es mostrar cómo construir un formulario funcional y atractivo visualmente con tecnologías web front-end.

1. Integrantes:
Sarahi Beatriz Hernández
Martínez
Matilde Scarlette Rodríguez
Cruz
Grado: 4to grupo; Dm
Materia: Desarrolla Aplicaciones
Web
Trabajo: Tutorial formularios de
contacto
Maestro: Everardo Juárez Predaza
Especialidad: Programación
Escuela: CETis 109
Aula: 14

2. Como hacer un formulario de contacto 1-HTML y CSS
1.- Comenzamos guardando la sintaxis simple de HTML bajo el
nombre “index.html”

3. Hoja de estilos:
Lo siguiente es crear una hoja de estilos le ponemos de nombre
“Estilos.css”
Empezamos con el siguiente código que define las propiedades de
fuente, color de fondo y longitud del body:
Formulario: Hacemos un selector para el formulario y le definimos
border, border-radius, padding, margin, y color de fondo:

4. En la línea 17 estoy definiendo dos sombras: una externa y otra
interna que da la apariencia de un borde interior.
Luego hacemos selectores para label y div y ponemos el siguiente
código:
Cajas de texto
Para las cajas de textos usamos selectores multiples, para los input y
para el textarea:

5. En la línea 26 y 34 se usa el selector input[type=’text’](selector de
atributo) esto es para que no se mezcle con el
otro input[type=’submit’] (el botón de envió).
Botón de Envió
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:

6. Código final del formulario de contacto:

7. Resultado Final:
URL:
file:///C:/Users/Taller/Desktop/Formulario%20de%20contacto/index.
html?