Día 6 / Semana 3

Comenzamos la última jornada de la semana, con todo el cansancio acumulado pero con ganas de cerrar esta semana (cada día que pasa es un día más cerca de terminar y tener nuestra «graduación»).

Como la tarea del día de ayer no tuvo el suficiente tiempo de desarrollo para la mayoría de compañeros tuvimos unos minutos más en aquella actividad, a continuación dejaré imágenes del resultado final que obtuve.

Navbar por «dentro»

Cada vista tenía su propio «contenido» diferenciador, lo que más me gustó de este ejercicio es volver a poner en práctica flexbox, con el cual tengo menos «experiencia» que con grid, aún así ambos me gustan (aunque tengo más afinidad utilizando grid puesto que la naturalidad con la que manejamos layouts es mayor).

La actividad consistió en crear la estructura y estilos de un formulario para añadirla a la página de contacto de nuestro “sitio”, incorporando los siguientes inputs:

  • Nombres y Apellidos
  • Teléfono
  • E-mail
  • Mensaje
  • Botón enviar

Estructura sugerida en la clase:

Resultado de mi formulario
mi formulario por «dentro»

herramienta css para construir backgrounds

Conclusión

Hoy aprendimos a realizar un formulario de contacto en HTML5 y CSS usando tres etiquetas que se usan para este tipo de elementos: <form>, <label> e <input>. También aprendimos que esta última tiene varios “tipos” según el dato que se solicita (por ejemplo: si es un campo de texto, número de teléfono, correo electrónico, fecha, hora, etc) y que podemos poner una condición para que un campo sea obligatorio (especificando dentro de la etiqueta input como “required”) o de lo contrario sea opcional. Y al finalizar utilizamos un input de tipo “Submit” que funciona como botón y envía los datos.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *