Tutorial formulario

7

Click here to load reader

Transcript of Tutorial formulario

Page 1: Tutorial formulario

1. El primer paso sera crear una carpeta en donde guardaremos todos lo que vayamos ocupando como el código html del formulario o la hoja de estilos.

2. Lo siguiente sera abrir el bloc de notas y crear un nuevo documento para empezar a escribir nuestro código. Podemos utilizar algun otro programa si

queremos pero el mas recomendable es el ya mencionado.

3. Hechos los pasos anteriores ahora si procederemos a escribir el código html del formulario.

Page 2: Tutorial formulario

En el definimos el titulo que se mostrara en la pestaña , se han escrito los titulos de las casillas del formulario , asi como tambien hemos puesto la linea

de código que enlazara nuestro documento html a la hoja de estilo que crearemos a continuación.

4. El código html ya quedo listo , ahora guardaremos el documento como index.html en la carpeta que creamos al principio para nuestro formulario.

5. Lo siguiente por hacer sera crear un nuevo documento de texto que sera nuestra hoja de estilos. Definiremos las propiedades de fuente , color de

fondo y longitud de body.

6. Ahora añadiremos un selector para nuestro formulario(.contacto) y

Page 3: Tutorial formulario

definiremos las propiedades border , border-radius , padding , margin y color de fondo.

Lo siguiente sera insertar selectores para label y div , lo haremos de la siguiente manera:

7. En el caso de las cajas de texto, utilizaremos selectores multiples , para los input y para el textarea. Definiremos propiedades como el borde, margen,

Page 4: Tutorial formulario

sombras de la caja de texto entre otras como se ve a continuación:

8. Para terminar con nuestra CSS debemos ponerle estilo a los botones, para ellos utilizaremos estilos similares a los de las cajas de texto anteriores solo

que nuestros botones tendran bordes redondos , sombra al texto y un degradado como background.

9. Con eso terminamos nuestra hoja de estilo , lo siguiente sera guardar el documento en nuestra carpeta con el nombre estilos.css.

Page 5: Tutorial formulario

10. Ahora sola queda abrir nuestro archivo html para ver como quedo el formulario.