---
id: 587d78af367417b2b2512b03
title: Build a Survey Form
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Crear un formulario de encuesta
---

## Description
<section id="description"> <strong>Objetivo:</strong> crear una aplicación <a href="https://codepen.io" target="_blank">CodePen.io</a> que sea funcionalmente similar a esta: <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" target="_blank">https://codepen.io/freeCodeCamp/full/VPaoNP</a> . Cumple las siguientes <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">historias de usuario</a> y haz que pasen todas las pruebas. Dale tu propio estilo personal. Puedes usar HTML, JavaScript y CSS para completar este proyecto. Se recomienda CSS simple porque eso es lo que las lecciones han cubierto hasta ahora y debe obtener algo de práctica con CSS simple. Puede utilizar Bootstrap o SASS si lo desea. No se recomiendan tecnologías adicionales (solo por ejemplo, jQuery, React, Angular o Vue) para este proyecto, y su uso es bajo su propio riesgo. Otros proyectos te darán la oportunidad de trabajar con diferentes pilas de tecnología como React. Aceptaremos e intentaremos solucionar todos los informes de problemas que utilizan la pila de tecnología sugerida para este proyecto. ¡Feliz codificación! <strong>Historia de usuario n. ° 1:</strong> Puedo ver un título con <code>id=&quot;title&quot;</code> en texto de tamaño H1. <strong>Historia de usuario n. ° 2:</strong> Puedo ver una breve explicación con <code>id=&quot;description&quot;</code> en texto de tamaño P. <strong>Historia de usuario n. ° 3:</strong> Puedo ver un <code>form</code> con <code>id=&quot;survey-form&quot;</code> . <strong>Historia de usuario # 4:</strong> Dentro del elemento del formulario, debo ingresar mi nombre en un campo con <code>id=&quot;name&quot;</code> . <strong>Historia de usuario n. ° 5:</strong> Dentro del elemento del formulario, debo ingresar un correo electrónico en un campo con <code>id=&quot;email&quot;</code> . <strong>Historia de usuario n. ° 6:</strong> Si ingreso un correo electrónico que no tiene el formato correcto, veré un error de validación de HTML5. <strong>Historia de usuario n. ° 7:</strong> Dentro del formulario, puedo ingresar un número en un campo con <code>id=&quot;number&quot;</code> . <strong>Historia de usuario n. ° 8:</strong> Si ingreso números que no son números en la entrada del número, veré un error de validación de HTML5. <strong>Historia de usuario n. ° 9:</strong> si ingreso números fuera del rango del ingreso de números, que están definidos por los atributos <code>min</code> y <code>max</code> , veré un error de validación de HTML5. <strong>Historia de usuario n. ° 10:</strong> Para los campos de ingreso de nombre, correo electrónico y número dentro del formulario, puedo ver las etiquetas correspondientes que describen el propósito de cada campo con los siguientes <code>id=&quot;name-label&quot;</code> : <code>id=&quot;name-label&quot;</code> , <code>id=&quot;email-label&quot;</code> , y <code>id=&quot;number-label&quot;</code> . <strong>Historia de usuario n. ° 11:</strong> Para los campos de ingreso de nombre, correo electrónico y número, puedo ver el texto del marcador de posición que me da una descripción o instrucciones para cada campo. <strong>Historia del usuario n. ° 12:</strong> Dentro del elemento del formulario, puedo seleccionar una opción de un menú desplegable que tiene un <code>id=&quot;dropdown&quot;</code> correspondiente <code>id=&quot;dropdown&quot;</code> . <strong>Historia de usuario n. ° 13:</strong> Dentro del elemento del formulario, puedo seleccionar un campo de uno o más grupos de botones de radio. Cada grupo debe agruparse usando el atributo de <code>name</code> . <strong>Historia de usuario n. ° 14:</strong> Dentro del elemento del formulario, puedo seleccionar varios campos de una serie de casillas de verificación, cada una de las cuales debe tener un atributo de <code>value</code> . <strong>Historia de usuario # 15:</strong> Dentro del elemento del formulario, me presentan un área de <code>textarea</code> al final para comentarios adicionales. <strong>Historia de usuario n. ° 16:</strong> Dentro del elemento de formulario, se me presenta un botón con <code>id=&quot;submit&quot;</code> para enviar todas mis entradas. Puedes construir tu proyecto por medio de <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">este CodePen</a> . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">lectura-búsqueda-pregunta</a> si te atascas. </section>

## Instructions
<section id="instructions">
</section>

## Tests
<section id='tests'>

```yml
tests: []

```

</section>

## Challenge Seed
<section id='challengeSeed'>

</section>

## Solution
<section id='solution'>

```js
// solution required
```
</section>
