Formulario con estilos CSS
A continuación se presenta un ejemplo de como personalizar los elementos de un formulario. El resultado que deseamos obtener es el siguiente:
Primeramente, se necesita tener ya un formulario programado en HTML, para eso se utilizará este:
El siguiente paso será modificar dicho código HTML para agregarle identificadores y clases. Los cambios realizados se han marcado con un recuadro color rojo.
Ahora vamos agregando el código CSS y vayamos viendo los cambios:
Primero agregamos una imagen para que actúe de fondo en la página web (puedes usar la imagen que tu quieras) y cambiamos la fuente a una familia "Verdana".
Código fuente:
Visualización:
Ahora agregar un contenedor para centrar el contenido de la página respecto a la ventana del navegador.
Código fuente:
Visualización:
El siguiente paso es aplicarle los estilos al propio formulario:
Código fuente:
Visualización:
Estilizamos los cuadros para entrada de texto:
Código fuente:
Visualización:
Ahora el botón para guardar los datos (ya casi acabamos):
Código fuente:
Visualización:
Y por ultimo aplicamos formatos a la firma del programador y con esto obtenemos el resultado final:
Código fuente:
Visualización:
Comentarios
Publicar un comentario