Prueba tus habilidades: controles HTML5

El objetivo de esta prueba es evaluar si has comprendido nuestro artículo Los tipos de entrada de HTML5.

Nota: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

Si tienes problemas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

Controles HTML5 1

Primero exploraremos algunos de los tipos nuevos de input en HTML5. Crea las etiquetas input apropiadas para que un usuario actualice sus detalles para:

  1. Correo electrónico
  2. Sitio web
  3. Número de teléfono
  4. Color favorito

Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:

Nota: Descarga el código inicial de esta tarea para trabajar en tu propio editor o en un editor en línea.

Controles HTML5 2

A continuación, queremos que implementes un control deslizante para permitir al usuario escoger el número máximo de personas para invitar a su fiesta.

  1. Implemente un control deslizante básico que acompañe a la etiqueta provista.
  2. Establezca un valor minimo de 1, uno máximo de 30 y un valor inicial de 10.
  3. Crea un elemento de salida correspondiente para poner el valor actual del deslizador. Asígnale la clase invite-output, y asocialo semanticamente con le entrada. Si haces esto correctamente, el JavaScript incluido en la página automáticamente actualizará el valor cuando se deslice el control.

Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:

Nota: Descarga el código inicial de esta tarea para trabajar en tu propio editor o en un editor en línea.

Evaluación o ayuda adicional

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.

  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Categoría de aprendizaje. Tu publicación debería incluir:

    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de controles HTML5 1".
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.