freeCodeCamp/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md

---
id: 587d78af367417b2b2512b03
title: Criar um formulário de pesquisa
challengeType: 3
forumTopicId: 301145
dashedName: build-a-survey-form
---

# --description--

**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/VPaoNP>.

Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê à página o seu próprio estilo pessoal.

Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!

**História de usuário nº 1:** deve haver um título com `id="title"` que possua o tamanho de uma tag h1.

**História de usuário nº 2:** deve haver uma descrição curta com `id="description"` que possua o tamanho de uma tag p.

**História de usuário nº 3:** deve haver um formulário (`form`) com `id="survey-form"`.

**História de usuário nº 4:** dentro do elemento de formulário, é necessário inserir um nome em um campo de entrada (input) com `id="name"`.

**História de usuário nº 5:** dentro do elemento de formulário, é necessário inserir um e-mail em um campo de entrada (input) com `id="email"`.

**História de usuário nº 6:** se for informado um e-mail que não esteja correto, um erro de validação HTML5 deve ser mostrado.

**História de usuário nº 7:** dentro do elemento de formulário, é possível inserir um número em um campo de entrada (input) com `id="number"`.

**História de usuário nº 8:** se for informado qualquer dígito não-numérico, um erro de validação HTML5 deve ser mostrado.

**História de usuário nº 9:** se forem digitados números fora do intervalo permitido no campo de entrada de número, definido pelos atributos `min` e `max`, um erro de validação de HTML5 deve ser mostrado.

**História de usuário nº 10:** para os campos de entrada (inputs) nome, e-mail e número dentro do formulário, deve haver rótulos (labels) correspondentes que descrevam o propósito de cada campo com os seguintes ids: `id="name-label"`, `id="email-label"`, e `id="number-label"`.

**História de usuário nº 11:** para os campos de entrada nome, e-mail e número, deve haver um texto placeholder (texto ilustrativo) que forneça uma descrição ou instruções para cada campo.

**História de usuário nº 12:** dentro do elemento de formulário, deve ser possível selecionar uma opção de uma lista suspensa que tenha um `id="dropdown"`.

**História de usuário nº 13:** dentro do elemento de formulário, deve ser possível selecionar um campo de um ou mais grupos de inputs do tipo radio. Os grupos devem ser identificados pelo valor dado ao atributo `name`.

**História de usuário nº 14:** dentro do elemento de formulário, deve ser possível selecionar vários campos de uma série de caixas de seleção (checkbox). Cada um desses campos deve ter um atributo `value`.

**História de usuário nº 15:** dentro do elemento de formulário, deve haver um campo `textarea` no final para comentários adicionais.

**História de usuário nº 16:** dentro do elemento de formulário, deve haver um botão com `id="submit"` para enviar todas as informações.

Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.

# --solutions--

```html
// solution required
```