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

---
id: 587d78af367417b2b2512b03
title: Build a Survey Form
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Criar um formulário de pesquisa
---

## Description
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" target="_blank">https://codepen.io/freeCodeCamp/full/VPaoNP</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História do usuário 1:</strong> posso ver um título com <code>id=&quot;title&quot;</code> em tamanho de texto H1. <strong>História de usuário # 2:</strong> Eu posso ver uma breve explicação com <code>id=&quot;description&quot;</code> em P tamanho do texto. <strong>História de usuário # 3:</strong> posso ver um <code>form</code> com <code>id=&quot;survey-form&quot;</code> . <strong>História de usuário # 4:</strong> Dentro do elemento form, eu tenho que inserir meu nome em um campo com <code>id=&quot;name&quot;</code> . <strong>História de usuário # 5:</strong> Dentro do elemento form, eu tenho que inserir um email em um campo com <code>id=&quot;email&quot;</code> . <strong>História do usuário nº 6:</strong> se eu inserir um e-mail que não esteja formatado corretamente, verei um erro de validação do HTML5. <strong>História de usuário # 7:</strong> Dentro do formulário, posso inserir um número em um campo com <code>id=&quot;number&quot;</code> . <strong>História do usuário nº 8:</strong> se eu inserir números diferentes na entrada do número, verei um erro de validação do HTML5. <strong>História de usuário # 9:</strong> Se eu inserir números fora do intervalo da entrada do número, que são definidos pelos atributos <code>min</code> e <code>max</code> , verei um erro de validação HTML5. <strong>História de usuário # 10:</strong> Para os campos de entrada de nome, email e número dentro do formulário, posso ver rótulos correspondentes que descrevem o objetivo de cada campo com os seguintes IDs: <code>id=&quot;name-label&quot;</code> , <code>id=&quot;email-label&quot;</code> e <code>id=&quot;number-label&quot;</code> . <strong>História do usuário nº 11:</strong> para os campos de entrada de nome, e-mail e número, posso ver o texto do marcador de posição que fornece uma descrição ou instruções para cada campo. <strong>História de usuário # 12:</strong> Dentro do elemento form, posso selecionar uma opção em um menu suspenso que tenha um <code>id=&quot;dropdown&quot;</code> . <strong>História de usuário # 13:</strong> Dentro do elemento form, posso selecionar um campo de um ou mais grupos de botões de opção. Cada grupo deve ser agrupado usando o atributo <code>name</code> . <strong>História de usuário # 14:</strong> Dentro do elemento form, posso selecionar vários campos de uma série de checkboxes, cada um dos quais deve ter um atributo <code>value</code> . <strong>História de usuário # 15:</strong> Dentro do elemento form, é apresentada uma <code>textarea</code> no final para comentários adicionais. <strong>História de usuário # 16:</strong> Dentro do elemento form, eu recebi um botão com <code>id=&quot;submit&quot;</code> para enviar todas as minhas entradas. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambi

## 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>