Si ya sabes como crear formularios usando HTML5 y PHP pero sientes la necesidad de aplicar estilos visuales, entonces este es tu post.
En una entrega pasada(Formulario básico en HTML y PHP) aprendimos lo básico sobre formularios pero no le dimos un diseño que agradara al usuario final, por lo contrario nos quedamos con las propiedades css que aplican los navegadores por defecto. En esta ocasión usaremos el formulario que teníamos antes y le vamos a aplicar un buen estilo visual.
¿Qué vamos a necesitar?
- Una carpeta llamada css y otra llamada img dentro del mismo directorio de nuestro archivos index.html y mostrar.php.
- Normalize.css, este archivo css nos permitirá mostrar de igual manera nuestro contenido en los diferentes navegadores. Para descargarlo nos dirigimos a Normalize y le damos clic al botón download. Se nos abrirá un página con el código css. Le damos clic derecho y "guardar como". Lo almacenamos en la carpeta css que creamos en el ítem 1.
- Un fichero estilos.css para los estilos del form.
- Una imagen de fondo. La puedes descargar de freepik.es.
Lo primero que haremos será enlazar los archivos css que hemos creado en nuestro index.html:
Además añadiremos un encabezado al form y algunos divs para los input.
En nuestro archivo estilos.css vamos a poner una imagen de fondo para nuestra página:
Por último le das vida al form:
Bueno eso ha sido todo, así es como se ve:
Si te gusta comparte.
No hay comentarios:
Publicar un comentario