Tutorial formulario
- 1. 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.
- 2. 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.
- 3. 6. Ahora añadiremos un selector para nuestro formulario(.contacto) y 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:
- 4. 7. En el caso de las cajas de texto, utilizaremos selectoresmultiples , para los input y para el textarea. Definiremos propiedades como el borde, margen, 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.
- 5. 9. Con eso terminamos nuestra hoja de estilo , lo siguiente sera guardar el documento en nuestra carpeta con el nombre estilos.css. 10. Ahora sola queda abrir nuestro archivo html para ver como quedo el formulario.