Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Proyecto] LO QUE APRENDI.

1) En la página contacto.html, agrega un alt para los logotipos de la barbería, es decir, para las imágenes, logo.png y logo-blanco.png: Logo de la Barbería Alura Y: Logo de la Barbería Alura 2) En los input de nombre y apellido, e-mail, teléfono, y en el textarea de mensajes, agrega el atributo required.

3) Modifica los tipos de input de correo electrónico y teléfono para que sean email y tel, respectivamente. Además de eso, agrega un placeholder para ellos: Correo Electrónico

Teléfono 4) En el input radio del WhatsApp, agrega el atributo checked: WhatsApp 5) Haz lo mismo en el checkbox: ¿Le gustaría recibir novedades de la Barbería Alura? 6) Modifica las div de las opciones de contacto y del selector para que se conviertan en un fieldset.

7) Modifica los títulos de las opciones de contacto y del selector, que son párrafos, para que se conviertan en legend.

8) En el archivo style.css, en los estilos de form p, modifica a form legend: form label, form legend { display:block; font-size: 20px; margin: 0 0 10px; }

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta

¡Hola Karen!

Gracias por compartir tu pregunta en el curso "HTML5 y CSS3 parte 3: Trabajando con formularios y tablas". Parece que estás trabajando en un proyecto interesante. A continuación, te proporciono algunas sugerencias para completar los requisitos que mencionaste:

  1. Excelente trabajo al agregar el atributo "alt" a las imágenes de los logotipos de la barbería. Este atributo es muy importante para la accesibilidad de tu sitio web.

  2. Agregar el atributo "required" a los campos de nombre, apellido, correo electrónico, teléfono y mensaje es una buena práctica para asegurarte de que los usuarios completen estos campos antes de enviar el formulario.

  3. Modificar los tipos de input de correo electrónico y teléfono para que sean "email" y "tel", respectivamente, es una forma de ayudar al navegador a validar los datos ingresados por el usuario. También es una buena idea agregar un placeholder para indicar el formato esperado.

  4. Agregar el atributo "checked" al input radio del WhatsApp y al checkbox de novedades es una forma de indicar que estos campos están seleccionados por defecto.

  5. Convertir las div de las opciones de contacto y del selector en un fieldset y los títulos de las opciones de contacto y del selector en legend es una forma de agrupar visualmente los campos relacionados y hacer que el formulario sea más fácil de entender para los usuarios.

  6. Modificar los estilos de form p para form legend en el archivo style.css es una forma de aplicar estilos a los títulos de los fieldsets.

Espero que estas sugerencias te hayan sido útiles para completar tu proyecto. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)